Safe Advisor
The Story
This was the final project in my UI Designer course with CareerFoundry, an online school based in Berlin, and it was meant to show us what it would be like to work on a sudden client request for a new financial tracking app. We had to take a Design Brief and turn it into mockups in just a few days, and this is that tale.
The User Experience
I started by defining the required features, extracted from the user stories. This gave me an idea of the screens I would need to design, and how they would fit in the user flow diagram. Here are fancier versions of what those scribbles looked like:
The 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.
And here are the first iterations of my mid- and high-fidelity wireframes. [ Note from future Matt, in 2023: these are horrendous, and I know that (now) — but let's pretend it's about the process and that I do eventually figure out what accessibility actually means] 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.”
Design 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.
Make Pretty Pictures
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.
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 it meant to design with accessibility in mind, so I was designing for visual hierarchy instead, without any regard for contrast ratios or what the hell a rem was.
And with that, we've reached the end. If you would like to check out a more recent design, there's the website design for Jessica Rose Counselling Therapy — or the website redesign for Allan McKay, Emmy Award Winner and VFX Expert, coming soon.