Financial Tracking App: UI Design Project with CareerFoundry
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.
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:
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.
We're handling sensitive financial information, so the app needs to look serious.
Some of our users aren't familiar with technology, so the interface must be simple.
The information we provide must be meaningful and give real value to the users.
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
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.”
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.
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.
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.
The End
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. I've learned a lot since then.
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. Thank you.