Case Study:
FinSavy UX/UI Design
Crafting FinSavy
Overview
Saving money can be hard – especially if you are not that much of a numbers guy. But it doesn’t have to be!
With FinSavy saving gets so much easier. Having your finances at a glance and your saving goals defined, FinSavy helps its users to save the correct amount of money to reach every goal in time.
Contents
Click on the keyword to get to this part of the case study directly.
Branding GuidelinesUser StoriesUser FlowsLow-Fidelity WireframesMid-Fidelity WireframesHigh-Fidelity WireframesMockupsInteraction
Purpose and Context
The project was completed as part of the CareerFoundry UI Design course. For this project a partial design brief was provided.
Objectives
The goals of this project were the following:
- help users that have no or little knowledge about finances save money
- let users set saving goals to work towards to
- let users have a view on their finances
- motivate users to save money
Tools
The project was engaged with the help of the following tools:
- Lucidchart (Initial User Flows)
- Sketch (Wireframes, Icons & Illustrations, Final Design, User Flows, Mockups)
- InVision (All Prototype Stages)
- UseBerry (Low- & Mid-Fidelity Prototypes)
- ProtoPie (Interactions)
Branding Guidelines
For this project there were only a few key messages given that would help shapen branding guidelines and the visual direction of the product. The key messages were the following:
„A finance app you can trust.“
„It’s like having financial advisor in your pocket!“
„Anyone can save money!“
„You don’t need to be a financial expert to use our app.“
These messages needed to be transported by the product and so the creation of branding guidelines was the first step to ensure a consistent experience and delivery of the key messages. The following guiding principles were developed:
User Stories & User Flows
User Stories
The design brief provided a selection of user stories to choose from.
The design process started with the following user stories in mind:
As a new user, I need to be able to create a profile, so that the financial advice I receive is personalized to me, my spending habits, and tailored to my goals.
As a money-saver, I need to be able to input infor-mation on the money I am receiving and spending (and on what), so that I can see an overview of my finances.
As a user, I want to see a dashboard of my finances clearly and visually, so that I can see how much I am spending on what at a glance.
As a user, I need to be able to tell the tool what my saving goal is and how long I have to reach it, so that I can save accordingly.
As a user, I want the money-saving tool I use to be motivational, so that I stay on track with my goals.
User Flows & User Flow Diagram
After choosing and exploring the user stories user flows were created to specify the requirements each story contains. The focus was on a simple and straight-forward solution that guides every type of user with ease.
Low-Fidelity Wireframes & First Prototype
Low-Fidelity Wireframes
The user flow diagram gave a first impression of the screens necessary however no it gave no idea on how to each certain goals from the user stories such as being able to see progress on a saving goal or how to display the users current financial situation. To push the process forward a set of low-fidelity wireframes were designed. This was done in a very fast-paced way to get as many ideas out as possible. The best screens were selected and a first prototype was made.
First Prototype & User Testing
The low-fidelity prototype had the purpose of showing up problems in the general user flow and it was tested on several users to ensure diverse and rich feedback.
The testing was conducted with an InVision Prototype in combination with Useberry. With Useberry scenarios and tasks were given that guided the users through the user flow without giving away on how to navigate the prototype. Heatmaps and recordings of each sessions were made and checked afterwards.
While some minor flaws in the user flow were discovered, no major problems with the flow occured and the stage was therefore deemed successful.
Mid-Fidelity Wireframes & Second Prototype
Mid-Fidelity Wireframes
Feedback and minor problems discovered in the low-fidelity prototype were fixed in the next stage. For this, the wireframes were digitalized and opted to show a more detailed user flow.
For this stage, user testing was conducted once again with the help of a mid-fidelity prototype.
Second Prototype & User Testing
The user testing of the mid-fidelity screens was done to both ensure that the user flow didn’t have any structural problems left as well as to get an idea on which of the sketched details would resonate with users and which don’t.
For this purpose the testing was conducted once again with an InVision prototype and partly with the help of Useberry. While half of the users were tested through Useberry again, the other half received a direct link to the InVision prototype with the task to click through the prototype and comment on any problem / detail they found.
The results showed that all problems with the general user flow were eliminated and that most of the sketched details for the next stage resonated with the users however many useful suggestions were made that were partly incorporated based on compatibility with the user stories and feasibility.
High-Fidelity Wireframes
The final stage of the project was the creation of high-fidelity wireframes that had all details and functions incorporated. Again the feedback from the last stage was considered and incorporated.
Mockups
Interaction
After finishing the final designs and preparing them for handoff to developers, a few screens needed explanation beyond static images. There for a short interaction flow was created with the help of Protopie.
Visual Assets
Thank you for your interest!
Do you like what you just saw?
Then let's talk!
