Designing a financial web application — A UX Case Study

Project Overview

Financial literacy is the possession of the set of skills and knowledge that allows an individual to make informed and effective decisions with all of their financial resources. Research by the Financial Industry Regulatory Authority says 63% of Americans are financially illiterate. They also lack basic skills to reconcile their bank accounts, pay their bills on time, and pay off their debts. The underlying problem is that most people do not have enough interaction with their money and most do not have savings over $1,000. At some point we have, or probably will have, something happen that will test our ability to make informed and effective financial decisions.

This is where Glenn Robertson and I came in. We were given 5 weeks to solve this problem.

Goals

• Help people to have more interaction with their money.
• Provide a solution for users to set financial goals and achieve them by creating a platform that helps keep them keep track of their goals.

My Role

• User research — Collaboratively created a survey and conducted interviews.
• User story mapping — Collaboratively created a user story map.
• Wireframing —My partner worked on the on-boarding process, dashboard, and past goals page. While I worked on the goal creation process, current goals, and track my spending page.
• Low-Fidelity Prototype with Invision —Created a prototype using Invision for our user testing.
• User testing — Created a user test scenario. Individually found candidates to test.
• High-Fidelity design — My partner worked on the on-boarding pages. We both worked on the re-design of the dashboard. I worked on the goal creation process and the color palette of the design.

Research/Strategy

We were able to conduct interviews and surveys to find out where the pain points of financial illiteracy were. We created an online survey through Typeform. During this process, we were able to identify some issues that not many people had a solution for.

Those issues being:

• People were using spreadsheets and applications like Mint.com to help them manage their finances, but a large majority of them never set, or achieve financial goals.
• People struggled to track their spending.
• A large majority of people did not feel confident when it came to managing their finances.

Persona

The purpose of our persona was to help us understand our users’ needs, experiences, behaviors, and goals. Creating our persona was key. It provided an empathic mindset and perspective which was helpful for creating the user flow. From there we dived into our user story mapping, where we were able to create a user flow that would best satisfy our users’ needs.

User Story Mapping

Creating the user story map was challenging, but in the end very rewarding. Some of the takeaways user story mapping helped us with were:

1. Gave us a holistic view of our project, which helped us see where everything would fall into place.
2. It helped us focus on our user. We constantly referred back to our persona to understand his goals and needs
3. It gave us a shared understanding of where the product would go and what the would do.

One of the most difficult parts of creating our user story map was understanding the “who” I am making this project for and “why”. We asked ourselves, “Why did the user chose to use our web application and what are their goals?” Once the user story map was done, I felt confident enough to move into sketching and wireframing.

Wireframing

While I was wireframing, I consistently referenced back to the story map and persona. I did this to make sure I was creating a user-centered design. I worked on the goal creation process, current goals, and track my spending pages. All throughout I would constantly refer back to my partner to make sure we had a shared understanding of what we were creating.

Prototyping

From Sketch, we used our wireframes to build our prototypes using Invision. User testing was conducted by creating scenarios that coincided with the needs of our persona. There were many problems that came up during user testing.

1. Our pages were cluttered with random information, which made for poor visual hierarchy.
2. Our dashboard did not have clear way-finding.
3. Whenever the user would leave the dashboard, it was unclear on how to get back.
4. We had too many buttons they needed to click on to complete a task, which was giving them too many opportunities to get lost.
5. There were options on the application with no function and no justifiable reason for being there. For example, at the top of the page, we had Overview, Planning, Advice, and Settings, which none of them had functions or any good reason for being there.

I believe this was a result of not having a clear understanding of our MVP before jumping into wireframing and prototyping. It helped me understand the importance of not getting attached to your ideas or design, so there is no time wasted. I spent a lot of time in low-fidelity prototyping in order to identify these issues and fix them before I began the high fidelity iterations.

Solutions

During the process of user testing, I learned the importance of iterating my design and then testing those iterations. Feedback was crucial for me to create something that solved our users’ needs. We designed our high fidelities to include a more legible dashboard and a better user flow. I created a navigation bar on the left-hand side to reduce our time on task. With this, they can easily find where they need to go while having key information on the dashboard for them to digest. The pages for track my spending and current goals were added on to the dashboard to give the user instant, easy to read information.

I designed the goal creation process with the intent to make it quick and easy. I also did not want the user to feel intimidated while going through this process. I created several iterations of this process during our user testing and here’s why.

What I learned

This project has been an incredible learning experience for me. One thing I have realized in this process is your first iteration is never your best. Another thing I learned is to not rush the design process. At some point, you need to move on to the next step, but the key thing I learned was to always get user feedback and remember the goals and needs of the users. Every time that I created a new iteration of the onboarding, or the dashboard, I would implement them into user testing. In doing this, we were able to create an effective and efficient product, that solved our users’ needs.