Client: SavingsOak is a Silicon Valley-based HSA provider that allows the user to save and invest the money to help with long-term healthcare needs. Our team was tasked with creating a mobile version of the current website’s expense page with a focus on uploading and filing receipts with the goal to have it ready to hand off to the developers.
Overview
Problem: Create a mobile version of the Savings Oak Expense Page that focuses on uploading and filing receipts and drives Savings Oak’s mission of encouraging users to save their money and invest.
Results: Our team created a high fidelity prototype of the mobile expense flow to be sent to the developers that fits the users’ needs of being able to capture receipts on the go and gives them visual reminders and clear calls to action to encourage saving and investing their money.
Approach: Directed Story-Telling Interviews | Secondary Peer-Reviewed Research | IA Diagram I Low Fidelity Sketch I Figma Wireframing and Prototype I A/B Testing I High Fidelity Prototype
Team Members: Jamie Tan, Ryan Thoemke, Stephen Magner
My Roles: Researcher, Interview Moderator, Designer
The Challenge.
Create a mobile version of the current expense page that meets the users needs and helps encourage saving and investing.
Discovery Research
Directed Storytelling Interviews
To gain a deeper understanding of the problem, we conducted Directed Storytelling Interviews with 3 participants.
We wanted to understand how well people currently understand HSA’s and HSA’s as an investment tool, what they might need out of a mobile expense app, and how they typically file and keep track of their expenses.
Our entire worked together to synthesize the data. The main insights we found were:
participants typically upload and file receipts on the go (or want to capture them right away so they don’t lose them)
they often forget about or don’t know what to do with their money
Our team then split into pairs, (research & design). I was partnered with Ryan Thoemke to handle research for the first phase of the project. As part of the research pair, I was individually responsible for creating the user interview report, while my partner conducted secondary research and looked into competitors.
Empathy Map
With the data from the user interviews, my partner and I created an Empathy map. We wanted to help our team and the stakeholders visualize how users felt about HSA’s and how they were using them so we could better design an application that meets the users where they are.
User Goal
From the key insights of our discovery research, we created our design goal that fit our overall users’ needs.
Goal: Create a mobile application that:
allows users to capture and upload receipts on the go
Encourages the user to invest by providing visual reminders and calls to action
Low Fidelity Prototype & Testing
Using our goal, we headed into the design phase. Individually we each created low fidelity sketches to help brainstorm what the design could look like. The designs I created are featured below. As a group, we determined which parts of our designs meet the overall goal the best.
A/B Prototype
While my partner and I were creating the discovery research deliverable, the design pair created an IA diagram and low fidelity wireframes based on the original sketches.
2 similar prototypes were created to put in front of users. We wanted to test the current website's navigation and layout against designs and features that we found to be important through our discovery research so that we could see what fit the needs of the user the best.
The key differences between the two were:
Homepage layout
Camera feature vs upload only
Presence vs absence of a bottom navigation bar.
A/B Testing
As part of the research pair, my partner and I were responsible for planning the usability testing. We collaborated on the main goals and tasks we wanted to look into. I was responsible for creating the script and evaluation plan.
Our main objective was to test the degree to which users could understand and navigate:
The homepage
Expense flow (upload and file receipt)
The expense page
Key Insights and Improvements:
As a team, all four of us synthesized the data. Based on user feedback we found that:
Users visually preferred the pie chart home page but were unclear about what the important actions of the page were.
Users more quickly navigated the page with the presence of the navigation bar, however, the “add expense” button was often missed.
Throughout the expense flow, users felt it was simple to use but were confused by the button labels and were often unsure about what the appropriate action was.
One of our biggest goals moving into high fidelity was to make clearer calls to action that help inform the user what the key functions on the page are and help influence what the best course of action is (such as investing).
From here the original design pair took over the research portion in the final phase, and my teammate Jamie Tan created a Findings and Recommendations Report based on our findings to deliver to the client.
Final Prototype
Combining the Prototypes
For the final phase of the project, our pairs switched roles, and my partner and I became the lead designers.
We worked to combine the two prototypes based on the feedback from users and then bring them to higher fidelity. The main components of Jamie’s original prototype were heavily incorporated and the three of us collaborated heavily on the layout of the homepage and navigation bar.
My direct partner Ryan Thoemke and I worked really well together and jointly worked together on every page.
I was primarily responsible for finalizing the expense flow and layout of the expense page, but really both of our influences and ideas, as well as those of our team member Jamie Tan, shaped the final design.
Color Usage and CTAs
My biggest individual contribution was in creating the design system for the main components, particularly the primary and secondary buttons as well as the placement of these buttons
. I also spent a lot of time planning out how the color palette would be utilized to help communicate specific calls to action.
My goal was to encourage saving and investing by using the green primary button to help signify not only the important functions of each page but what actions would help them optimize their HSA and savings the most. I used the coral shades as feedback signals.
Final Prototype
The final step was creating a high fidelity interactive prototype using Figma, that would be presented to the stakeholder with the goal of being ready to hand off to the developer.
High Fidelity Prototype Run-Through Video
Next Steps
Handoff to Developer. The client’s original goal was for our design to be development ready at the end of our project. Our immediate next step would be to prepare our prototype and files for the handoff.
Implement more user touchpoints for education on how to use an HSA and invest. Important feedback from users during this first design sprint was that they wanted more tips and reminders on how to use their money. Implementing more touchpoints to help the user throughout their journey would be valuable.
Conduct Usability testing Given the time constraints we were unable to test our final design. A second found of usability testing would be valuable to see if any improvements need to be made.
Conclusion
Our client’s scope for the project was incredibly straightforward and clear. They wanted a development-ready mobile version of the current expense page with built-in reminders that help influence the overall company mission of turning spenders, into savers, and then into investors. As a team, I felt that we not only achieved the goal the stakeholders set forth, but we also meet the users’ needs by making it on the go friendly and structuring it in a way that helps teach and guide the user on how to optimize their money.
Overall this was an incredibly fun challenge and project to be a part of. I believe that our team was successful in achieving our goal and bringing the vision of the client and the needs of the users together into a final deliverable.
