SAVVY

UX DESIGN / UI DESIGN

Overview

Savvy is a money management app that helps people save through budgeting, expense tracking, and working towards savings goals.

This concept came to life during my UX post-graduate course at Billy Blue College of Design, where we had a free range of selection into a problem area of our choosing to design a native mobile application over a 12-week period.

I was inspired by conversations and discussions with friends who sometimes struggle with saving money and/or desired to be more disciplined with their discretionary spending habits.
ROLE
Full end-to-end UX design process + UI design of primary screens
ACTIVITIES
  • Research and Ideation
  • User Interviews
  • Affinity Mapping
  • User Journey Mapping
  • User Flows
  • Information Architecture
  • Wireframing
  • Prototying
  • Visual Design
PROGRAMS
  • Axure RP
  • Sketch
  • OBS
  • Miro
USER INTERVIEWS
A total of 5 in-depth face-to-face user interviews were conducted over a 1-week period. The participants chosen included 3 males and 2 females within the ages of 22 - 32, who all worked full-time. They were all social media users and highly tech-savvy. All interviews were audio recorded and transcribed.
AFFINITY MAPPING
To synthesise the qualitative data gathered from the user interviews, I created an affinity map. This allowed me to make sense of mixed data and organise findings into similar groups and themes in a visually cohesive way. I grouped the data primarily through demographic, behavioural and attitudinal themes for each area of focus – saving, budgeting, tracking expenses and bills.
KEY FINDINGS:
  • 4/5 interviewees saved a portion of their pay every period.
  • The one candidate who did not save consistently believed that his saving behaviours will increasingly get more serious as he earns a higher level of income, however understands the importance of having some backup funds.
  • Another candidate also admitted they used to be this way but has recently switched in behaviour and mind-set since the beginning of the year.
  • Not all users tracked their expenses; older candidates did indeed pay closer attention with their spending whereas younger candidates generally checked in on their balance occasionally and compared it to mental expectations based on their spending behaviour throughout the period.
  • Older candidates had strict budgets for certain expenses as they had longer-term saving goals.
  • All candidates agreed and stated that limiting discretionary spending and maintaining discipline is the most difficult part of saving.
PROBLEM STATEMENT
Young working professionals sometimes struggle to stay accountable when it comes to controlling their spending in order to save money and reach their saving goals.
POTENTIAL SOLUTION
Develop a multi-faceted app that allows users to track expenses, budget and create saving goals. The goal of the app is to motivate users to save towards their goals and visually update them on their spending progression against their budgets.
USER PERSONAS
Key Segments were segmented by behaviour and attitudes as both differed in the way they budgeted and saved. The disparity in attitudes led to distinct behaviours in the way they saved.

From this, the below user personas were formed:
  • The Casual Saver: conscious of saving money as backup for the future, and saves more for short-term goals (e.g. travel or material goods)
  • The Calculated Saver: has a set long-term savings goal and constrained budget for defined periods.
USER JOURNEY MAPS
Through the creation of user journey maps, I was better able to empathise with each defined user by mapping out each phase throughout their saving and expense tracking process. This allowed me to uncover their pain points and moments of delight.
USER FLOWS
Using the structure laid out in the information architecture, I mapped out the main user flows of the app. These included:
  • Log In / Sign Up
  • Onboarding (Profile/Setup)
  • Setting a budget
  • Understanding & categorising expenses
  • Creating saving goals
  • Viewing & adding bills
INFORMATION ARCHITECTURE
When designing the information architecture, I considered all the insights gathered from the research and user journey maps. The information architecture is a visual representation of the app’s structure and hierarchy which also helped me assign the general features (as outlined in the user journey maps) required for each screen.
WIREFRAMES
I roughly sketched out some low-fidelity wireframes on pen and paper and reproduced them digitally using Axure RP. When sketching, I made sure to integrate the desired user flows into each set of screens outlined in the information architecture.
INTERACTIVE PROTOTYPE
I converted the wireframes into a functioning prototype that aimed to test out the core flows and features of the app. These will serve as the test tasks intended for usability testing:
  1. Sign up and complete the onboarding process
  2. Set a budget
  3. Identify specific expense categories
  4. Categorise transactions
  5. Creating saving goals
  6. View bills due on specific dates
PREVIEW PROTOTYPE
USABILITY TESTS
The testing phase involved usability tests that assessed both the learnability and usability of the Savvy application on a mobile iOS device amongst new users.

I observed and measured the success rate of 5 participants completing 6 task attempts each. I also noted down general observations of the participant’s actions and errors and recorded their comments, SUS rating, and time taken to complete each task.
TEST FINDINGS
30 total task attempts were collected (T), 27 of which were a success (S), 2 were partially successful and 1 task was deemed a fail.

Using a learnability equation [ S + (P*0.5) ] / T, the usability testing sessions had an overall success rate of 93.33%.