Financial Tracking App: UI Design Project with CareerFoundry

High-Fidelity Wireframe Mockup for Safe Advisor UX/UI Design Case Study

The Story

This was for my UI Designer course with CareerFoundry, which I did back in 2020, and it was meant to show us what it would be like to work on a sudden client request with a quick turnaround. The Task: design a financial tracking app.

Design Brief Summary Graphic for Safe Advisor UX/UI Design Case Study
Users and their stories from the design brief

User Experience

I started by defining the required features, extracted from the user stories. This gave me an idea of which screens I would need to design, and how they would fit into the user flows. Here are some fancier versions of what those scribbles looked like:

Simplified User Flow Diagram for Safe Advisor UX/UI Design Case Study
User Flow Diagram for Safe Advisor Case Study
User flow diagram for Safe Advisor

User Interface

Now that I had the basic structure for the app, it was time to work on the interface. To do this, I went back to the Design Brief and established some Guiding Principles. These would give me some sense of direction as I worked on the layouts, visual style, and information hierarchies.

Trustworthy

We're handling sensitive financial information, so the app needs to look serious.

Simple

Some of our users aren't familiar with technology, so the interface must be simple.

Practical

The information we provide must be meaningful and give real value to the users.

Accessible

Our users will come from all walks of life, so we must be inclusive in our design.

Below are the first iterations of my mid- and high-fidelity wireframes. [Note from future Matt: I know these are horrendous! I was learning!] Okay, wireframes:

User Testing Summary for Safe Advisor UX/UI Design Case Study
Mid- and high-fidelity wireframes and the first iteration of styling

User Testing

In order to validate the primary user flow, as well as the visual design overall, I recruited five users to interact with an inVision prototype. Below is the scenario they were given, along with the wireframes and their feedback.

“You are an existing user, and on July 28th you spent $40USD on food. Now you want to input this information into your app so that you can track your spending.” 
User Testing Updates for Safe Advisor UX/UI Design Case Study
High-fidelity wireframes and feedback from user testing

Iteration

Some users liked the visual style, but most didn't — and I already knew it wasn't ready yet. It was more of a first stab, so I darkened the colors, added gradients, tightened the radiuses, and I tweaked the interface to better suit it to the seriousness of our task, which is the handling of possibly-sensitive financial information. 

Second Iteration User Testing Updates for Safe Advisor UX/UI Design Case Study
Iteration and Improvement of the UX and UI

Mockups

It was time for the deliverables: the client mockups. For the first one, I decided to illustrate the primary user flow — the same one I'd tested with my users — because it highlighted the useful simplicity of the design.

User Flow Mockup for Safe Advisor UX/UI Design Case Study

For the next mockup, I wanted to show what I felt were the best looking screens: the save, spend, and earn input screens. I really liked how these turned out, both in terms of elegance and functionality.

High-Fidelity Wireframe Mockup for Safe Advisor UX/UI Design Case Study

Lessons Learned

And there you have it, from Design Brief to Client Mockups in just a few days. I do like how it looks, but it isn't exactly accessible, obviously. Back then, I only vaguely knew what that even meant, so I was designing for visual hierarchy only, without any regard for contrast ratios or rem units.

If you'd like to check out a more-recent (and real) design project that I've worked on since then, check out the latest updates and improvements for Integrity Power Search (external link to their Webflow website) — and here's the Case Study.