Formability

Enterprise SaaS Design For Government Agencies
ABOUT

Raising B2B Experience From 😐 to 😍!

UX Design
UX Strategy
UX Research

Enovational

Enovational was a startup developing Formability, a digital form-building and processing platform. The product roadmap was driven by minimum functionality to meet contractual obligations resulting in a fantastic product, but one that could use some help growing up.

Challenge

Slow search and navigation in Formability's 'Manage Documents' feature reduced efficiency for Client Solutions teams developing no-code applications. This began as a solo project before expanding after I uncovered larger issues with the application area.

MY PROCESS

Discovery
Understanding My User
Position
Intuitive Design
Valdate
Minimalism is a Win-Win
Valdate
Design for Scale

Result

I created 'Advanced search' reducing document search times and rebranded 'Manage Documents' as 'Manage Apps' to meet Enovational's product strategy.

Industry

GovTech

Product

SaaS MVP

Team

UI/UX Designer

Product Manager

Developer

Project Type

Feature Iteration

Original Manage Documents screen
PART 1

Understanding My User

My highest priority is to design products that look cool solve problems. This starts with user research to help me understand my user and guide my design decisions.

User Interviews

I began by turning to Formability’s ‘power-users,’ the ones who worked inside the app all day. I focus on asking questions to understand their behavior so I can shape my product around how they naturally want to use it, rather than making them adapt to the product.

The Problem

I learned that power-users universally struggled with search functionality. Unless you knew the exact name of a document you were often stuck digging through folder after folder to find it. There had to be a better way.

The Solution

That better way became ‘Advanced search’. It offers a number of filters to bring search times down from minutes to seconds.

Manage Documents with Advanced search added
PART 2

Intuitive Design

An otherwise perfect solution can't solve a problem if its user doesn't understand how to use it. I make products feel intuitive by anticipating my user's expectations to raise their experience from a 😐 to a 😍!

Icon Placement

I placed Advanced search in the search bar accessed via a commonly used filter icon. This matches the user's mental model for where search features should be and what a filter icon should look like.

Original search bar
Advanced search bar

Progressive Disclosure

Once clicked, the modal popup allows limitless search functionality while not being obtrusive to the rest of the product. It uses progressive disclosure to let expert users work fast and smart while not overwhelming new ones with a cluttered UI.

Advanced search modal
PART 3

Minimalism is a Win-Win

Design takes time, as does development. I design as little as possible to save everyone time and simultaneously make the product simple to use.

Re-using Components

Advanced search uses a modal commonly used throughout Formability. Re-using the component ensures that users will easily understand it and reduces development time.

A pre-existing modal design within Enovational's design system

Re-using components also keeps my product consistent and makes the product easier to learn.

Consistency

I designed the advanced filter feature using only pre-existing patterns. This way, once users understand how the patterns operates in one area of the application, they understand how they work everywhere.

Advanced search modal dropdown only uses pre-existing patterns to keep my design light and consistent
PART 4

Design for Scale

I design to meet my user's needs in the moment, but also anticipate future needs and use cases to come. This helps me eliminate rework and design products that adapt and scale.

The First Draft

My first draft of Advanced search failed to anticipate how to scale filters in Formability. It featured fully visible filters without a modal popup or dropdown.

This worked fine for filtering just document types, but what about other types of filters? What about when more document types were added?

An early draft of Advanced search filters failed to scale to fit other types of filters

The Final Draft

Using a modal helps Advanced search scale to fit any number of filters or document types. It can easily scroll to accommodate more items without interfering with the rest of the application area.

Results

Advanced search reduced Manage Documents search times by 55%.

The final draft of Advanced search filters scales to fit any filtering needs
PART 5

The Big Picture

Solving user needs is only one part of product design, I need to solve my business needs as well. This requires me to zoom out to see the big picture and shape my theory on how the product needs to evolve.

Formability's Global Release

At the time, Enovational employees were the only users of Manage Documents, but that wouldn’t always be the case. A global release was planned for the next year but one lingering issue remained with Manage Documents before that could happen.

Design Debt

Each application’s documents were managed together. This worked fine for Enovational's current circumstances; after all, we worked together and it could actually be beneficial to reference each other's work. But once Formability was globally available we couldn't let this design debt continue. The rest of my design team was brought on board to fix the problem.

The Solution

Manage Documents was turned into Manage Apps. Now, every project's documents are grouped under one application in its own area, clearing the way for Enovational's goal of releasing a global product.

Manage Apps separates project documents into different application areas
Create a new app, or select an existing one