Safe Advisor

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

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.

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

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:

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

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.

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.

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 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

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. 

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

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.

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 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 project I did for Integrity Power Search, a search firm for tech companies and startups in North America.