Formability
Enterprise SaaS Design for Government Agencies
Formability was a SaaS application designed to modernize government services. Common use cases include creating and submitting online forms for COVID vaccination appointments or government license applications. Its roadmap had long been driven by contractual obligations resulting in a fantastic MVP ready to grow up.
User acceptance testing had surfaced a problem with Formability's 'List Views'. The feature lacked functionality and our client refused to sign off on our contract without it. My team stepped in to understand their needs and design solutions to meet them.
I designed features to fulfill $6 million in company contracts and planned and hosted our team's award show to celebrate.
UI/UX Designer
UI/UX Designer, Product Manager, Developer, SME
Feature Iteration
User research is the foundation of every great product. I start every design process by learning about my user and their pain points so I can create solutions that feel delightful and intuitive.
To understand my users I coordinated with my team's Subject Matter Expert (SME), a member of our Client Solutions department who worked with our clients to implement Formability to meet their needs.
List Views were primarily used by government form processors to accept or reject form submissions and file reports. Most of these reports are filled regularly, although some are ad hoc.
I focus on building trust with my user by solving their pain points in the right order. I identify and meet their basic expectations first to ensure my product meets its fundamental promise to the user.
Single-select filters. Filtering for multiple criteria required excessive re-filtering and created a high possibility for error.
I focus on removing pain points to keep my product user centered. Each pain point removed makes my product more effective and increases its value to the user.
To remove the need for excessive refiltering, I added checkboxes to make our filters multi-select.
Design takes time, as does development. I design as little as possible to save everyone time and make products simple for the user.
Checkboxes were already in Formability's design system so users would intuitively understand them and it required minimal effort for our development team.
Adding multi-select filters creates a new problem; how do we communicate to the user which filters have been selected?
I added filter selection pills underneath dropdown filters to signal which filters had been selected. This was also a design pattern present throughout Formability.
Those pills may be removed by clicking the “X” on each pill. I also added an option to “Clear all” as a quality-of-life improvement.
Perfect components don't always combine to create a perfect product. I need to make sure that each component fits together to create a consistent, cohesive user experience.
The pill selection design was complicated by the application's “drill-down” feature. The drill-down lets users filter List Views from a different application area, so those filters may or may not be re-selectable if removed. This means that with both features acting together, some filters would function differently from others which must be communicated to the user.
Color was used to differentiate the filters to create a clear visual indicator that drill-down pills are different from regular pill filters. The drill-down filters are of course already present when the user navigates to the page and the dropdown filters match the color of the checkbox to connect the two for the user.
Accessibility compliance increases my product's potential user base and often improves usability for everyone, not just the disabled.
Formability required 508 and WCAG2 compliance. Because color is a common compliance issue, a hover effect was added to signal where each filter came from. The hover effect helps all users easily distinguish the origin of each pill selection when dozens of filters are active.
Multi-select filters allowed List Views to pass user acceptance testing with the client and fulfill a $6 million contract.
To celebrate I hosted an award show for my team and handed out awards including 'Best Dad' for the best dad jokes and the 'Millard Fillmore' award for most obscure historical trivia knowledge. (If you're aware that Millard Fillmore was America's 13th president you also qualify for this award)
Each product has key attributes that matter most to its users. I find those attributes and optimize them to speak my user's language and make sure my product meets their needs better than any others.
Formability was used exclusively by our employees and government clients, but that wouldn't always be the case. With an upcoming global release, my team turned our attention to identifying the attributes necessary to turn List Views into a productivity superpower.
User research informed me that our users valued speed and accuracy above all else. Speed so they can finish their work and move on, and accuracy because they can't afford to make mistakes.
Product usage data gives me insight into my user's behavior by letting me know what works and what doesn't. Either case offers a learning opportunity to inform my design decisions moving forward.
I checked the data to understand how people were using List Views to find where I need to improve speed and accuracy.
The data indicated that users file the same reports all the time. They need to configure their List Views before downloading their report data each time. Can we speed this up?
I enabled processors to save report exports as templates to be used again next time. When generating any report, processors can template it and then use that template to generate reports quickly.
With basic expectations met and key attributes optimized I can start innovating. In this final phase of product design, I focus on creating features that surprise and delight my user to create a product that they can only describe with one word, remarkable.
Processors tend to file the same reports at the same times. Why should they need to gather all that information themselves?
I created auto-reports that can be configured to automatically collect a report's data and send a notification through Formability's messaging system when their data is ready to download. This ensures that processors only need to configure their data once and eliminates the possibility of any future user error once configured.
