Form familiarity.
Making purchase requests intuitive and digestible for everyone.
The brief.
ControlHub is a startup aiming to make expense reports easy for everyone. However, their current product exists as a Slack applet and is not user friendly. The original UX team of 3 brought me on in the final 5 days of the 3-week sprint. I transformed rough sketches into a beautiful and usable interface.
Duration.
5-day sprint
Role.
UI and visual designer.
Tools.
Figma
Method.
Wireframing
Prototyping
Usability testing
THE PROBLEM
Trying to reinvent the wheel.
Sometimes all you need is a simple form.
When ControlHub initially conceived the product, they believed that a Slack chatbot applet would be the fastest way for users to submit expenses. But our research showed that users found that completing a form via chatbot was unintuitive, confusing, and difficult to recover from errors.
ControlHub’s initial Slack applet design.
THE SOLUTION
Stick to what people know.
Create a familiar and digestible input form.
The current experience lacked familiarity and users had to relearn how to complete what was essentially a form. In response, we hypothesized that if we moved the experience from Slack to a web-based form, users would recognize the experience and more easily understand how to complete the task. Additionally, we believed that breaking the form up into clearly labelled segments with a progress bar would both prevent the user from feeling overwhelmed, and give users a reassuring sense of where they were in the process.
Where I fit into the story.
1. Design the interface and layout.
2. Establish a cohesive visual design.
How I approached the UI and visual design.
Rework the initial sketches.
My team came to me with lo-fi sketches. Like with any design project, I had to really nail down a solid blueprint before I could take the design from paper to pixels. While the initial sketches allowed me to see how my team conceptualized how to best solve users’ problems, the sketches were also very rough and more of a first draft. It was up to me to assess the sketches and flesh them out into something more polished and usable.
Break it up into bite-sized chunks.
To make the whole purchase request process more digestible and less daunting, I divided the form into 5 bite-sized sections following form design best practices. The user is less likely to become overwhelmed by how much they have to complete if they approach the form one section at a time.
Furthermore, I included an omnipresent progress bar to help users visualize where they are in the entire process. This eliminates ambiguities about how much of the form is left to complete.
Validate our prototype via usability testing.
After two days of UI ideation, we had a functioning lo-fi prototype up and running. Before we solidified the UI and fleshed out the visual design, we performed usability testing with 5 users who met our criteria: They had to regularly submit purchase request forms for work, and they had to have zero experience with UX design.
We discovered a number of insights:
Some of the captions for the form fields were not specific enough, leaving 60% of our users unsure about what was needed from them.
Additionally, 100% of our users felt frustrated that they had to continually denote whether a purchase was “one-time” or “recurring” on separate pages. They voiced that it felt redundant and that they would prefer to input all of their purchases on one page.
80% of our users pointed out that the design lacked the ability to set a frequency for recurring purchases. This was important for our users to denote, as it provides important information about the total cumulative cost of a purchase.
Lastly, 60% of our users voiced the need for a way to communicate the urgency of a purchase request by including an “approve by” date.
Elevate our design to the next level.
Now that we discovered the things that needed to change and the features that needed to be incorporated, I created a hi-fidelity prototype. It was extremely important that the product be visually appealing, as well as easy to use. I was responsible for determining and executing the visual styling within 3 days.
Derive visual inspiration from the pros.
Our client expressed the desire to apply glassmorphic styling to the product. With that in mind, I conducted some visual design research to gain inspiration, pulling from several examples found online.
Some elements from the glassmorphic trend that I decided to adopt were: the use of card with rounded corners, and the illusion of light through the use of gradients. This styling gave the design some depth and further emphasized the division of sections within the form.
A side-by-side comparison of glassmorphic design and my inspired visual styling.
Establish a visual design system.
Now that I had determined the approach to UI and visual styling, it was time to create a visual design system to work with. Establishing a design system helped me to work efficiently within my short timeframe of two days. In addition to it speeding up my design process, it also provided a solid and reliable reference for the engineers to follow.
Results and reflections.
The visual design is just too flashy for a simple purchase request form.
Although I was proud of the solid work I had created in only 5 days, I was ultimately unsatisfied with the visual design. An experienced colleague affirmed my hunch that the visual design was too distracting and implied a more fun, personal experience, rather than a serious work transaction. With this in mind, I whipped up a new iteration of the visual design that suggests tactical enterprise software while also retaining some of the more striking visual styling. Sometimes flashy and trendy is just too much.
We’re missing form-field requirements from F&A professionals.
Throughout this short sprint, we quickly came to realize we were missing research about the users on the other side of the product: finance and accounting professionals who review and approve purchases. While we simplified the process of sending a purchase request, there are still questions about exactly which input fields are missing from our existing form. The next step is to conduct further user research in order to ensure that all requirements are being met.
Validate next iteration with both front and backend users.
With our new research about the other target users, the next step is to add all the necessary input fields and perform usability testing with both finance professionals and requesters. This will help validate our design decisions and illuminate our blind spots.
Get in touch.
Let’s build something together.
jamesrothbart[at]gmail[dot]com
Oakland, San Francisco Bay Area