In early 2020, I was asked to join a project team that was struggling to turn the client's vision into reality. We only had 4 weeks to deliver.
We had a couple stumbling blocks: lack of clarity of user flows and no prototype that could demonstrate what we were all thinking. I jumped in to lead a design sprint, resulting in flows and wireframes. But it wasn't enough for engineering to get to work.
At the time, we were mostly using Sketch, but I was really struggling to keep up with the demand of designs and the need to communicate with engineers about the complexity of the flows (and the lack of vision that was communicated by the client). I decided to jump into Figma instead because of it's collaboration tools. I hadn't used the tool before, but I spent 2 evenings learning how it worked along with switching our designs from the old Sketch files.
The next day, I showed the engineers and the client the new designs and they were both so excited. Due to Figma's collaborative nature, we could all explore the designs together in realtime and easily communicate about necessary changes, questions, or comments to make decisions about flows and visual design.
The switch to Figma helped increase our design velocity and engineering collaboration by 50%. As a result, we were able to design an even better tool than anticipated by the client and we were able to develop more quickly. We made our deadline and the customer was extremely pleased.
You can check out the Figma prototype that we created and tested in the span of 3.5 weeks. We used the US Web Design System along with creating a custom logo and branded "learning badges." The tool is built on Wordpress and is currently being beta tested with various government agencies prior to full release.
Usability Testing Findings
We validated the prototype through usability testing to demonstrate that the visuals, content, and overall user experience met the needs and expectation of the client.
During our first round of testing, we learned that the homepage and the subsequent dashboard did not have enough contextual information to support the user to navigate the complexities of the different learning pathways, missions, and badge levels.
To improve their experience, I created a new homepage that better explained the hierarchy of achievements along with creating a clearer left-side navigation to explore each of the learning pathways (in addition to the CTAs on the dashboard).
In the final round of usability testing prior to launch, 98% of our users expressed high satisfaction about the clarity of content and ability to navigate the beta app.
