Case Study

UX|UI Design

Problem

Project Overview

HMW

Solution

Constraints

Mexicans aged 18-34 struggle developing savings habits due to their variable income structure.

How might we help FYPs feel optimistic about their financial future by addressing their unconventional income flows?

A budgeting app that sets savings goals and comes up with a custom budget to meet them.

The main constraint was time; we had 10 weeks to build this product, as well as weekly submissions and daily classes.

My Role

Duration

Responsibilities

Tools

Designed for

Other prototypes

Lead Product Designer

Oct- Dec 2023

Figma, FigJam

iOS 15 & 14 Pro

Desk & User Research, Wireframing, Prototyping, and User Testing

Methodology Used

For this capstone project, I worked in weekly agile sprints, using Design Thinking's Double Diamond methodology. which consists in developing a product throughout phases of inputs (research at the beginning and testing after ideation processes) and outputs (ideation and prototype design).

I was drawn to finances and how it was a heavy topic for freelancers around me. So, I started asking questions.

1) Research and discovery

of Mexican young adults want to save, but don't think they have the means to do so.

of Mexicans find financial information confusing

of Mexicans don't have a 3 month reserve fund

of Mexicans don't have a register of their expenses

of Mexican young adults don't have saving habits

73%

79%

75%

64%

47%

Alex

Once I had a clear hypothesis, I proceeded to run 4 user interviews. I called for individuals who were or had been freelancers, are Gen Z or Millennials, live and work in Mexico City, and are concerned about improving their financial health.

Juli

Karla

Lucia

Age: 34

Age: 34

Age: 34

Age: 34

“It’s become a vital habit for me to build a reserve fund to use in months of no income.“

“I use excel to have a general view of my expenses, otherwise I feel lost financially.“

Has savings: Yes

Has savings: No

Has savings: No

Has savings: No

“I don’t save because I can’t see far ahead having an unpredictable income.“

“Somehow I always make ends meet, but I improvise a lot; no room for planning.“

From the user interview, I drew pain points, motivations, behaviors. I found a key theme to guide the ideation process.

2) Analysis and Synthesis

The time came to start ideating a solution. This was the part where I encountered my biggest learning; the art of reduction for a broad-viewer.

3) Ideation

Note: This is an updated version of the core epic, user stories and task flow based on required pivoting. Due to time constraints, I was not able to include the entire process for both versions. However, the process, the versions and the pivoting is presented in the following steps, 04) Wireframes and 05) User Testing.

Epic: Budget Builder

The user stories in this epic cover the process of adding savings goals because the budget is based on the these goals. It also covers the login because the app connects to the user’s bank to automatically add their incomes and expenses information to generate the budget.

create a savings plan that is customized to my situation

I will be able to follow the plan.

see a breakdown of my expenses

I know where my money is being spent.

set a limit to my expenses

so that I don’t go over-budget.

separate my income in categories

my money is organized in a budget.

connect my savings plan to my bank history

my savings plan is realistic in relation to my financial behavior.

connect my savings plan to my bank history

my budget is made based on my history and my savings plan.

control the timeframe of my savings plan

foresee the future of my financial state.

Tasks

In this task flow, the user starts by setting savings goals, followed by a login method that allows them to connect the app to their bank history so that it’s not necessary to enter expenses manually -although it can still be an option. Once the user makes that connection, their budget is generated based on their spending history and their savings goals.

4) Low Fidelity Wireframes

Paper Sketches

Version 1 (low fidelity)

After the carcass was done, it was time to test the flow. It wasn’t until after the 2nd round that I realized I would have to pivot in order to narrow down.

First Round of Tests

Version 2 (low fidelity)

After each round of user testing, I used a Design Prioritization Matrix to identify the most important issues based on design effort and user experience impact.

I found that there were many things that needed attention. Many were UI elements that had a lot of impact on the experience and ranged from high to low effort.

In the second iteration, I included the changes that resulted from solving the issues that appeared in the first round of user tests. This is where it started to become evident that my target user was more interested in a budgeting tool than an automated financial tool.

Second Round of Tests

After the second round of tests, it became clear that my solution required a bigger change than only UI elements. The issues that came up were more about the concept of the app than about usability.

Based on the opportunities found in the Experience Map and some potential areas of development from the Competitive Analysis, I ideated an all-in-one automated tool that would take care of every financial responsibility of my users. This idea was not effective. It implied that users would basically not do anything in the app except check the dashboard to see how the app was handling their finances and users did not entirely buy into the idea.

After the 2nd round, I narrowed down. Instead of being an automated investment bank app, my design became a custom budgeting app. Due to tighter time constraints, I was not able to test this new task flow, but I did update the necessary artifacts; user stories and task flow shown in step 3) ideation.

Version 3 (low fidelity)

In this 3rd iteration, I came up with what would be the low-fidelity wireframe of the final solution. I extracted a saving method called the Snowball Method from the comparative analysis. I found this method as an excel sheet and realized that other apps, such as YNAB or Goodbudget offered different types of saving methods. And so I designed the app for this specific one.

The app had a logical flow, now it was time to establish a strong brand that would represent the users and transmit the message they were looking for.

Moodboard

Based on the user interviews and secondary research from the first stages of the project, I could understand that users wanted to feel safe around the topic of finances. I defined key words that translated into moods for the user experience through my app. These key words were: Relatable, Reliable, Friendly, Easy, Orderly, and Practical.

Domino was the chosen name because the domino effect represents the behavior and result of accumulated efforts of saving to reach goals.

For the wordmark, I made a falling domino, which represents each savings goal. When one goal is complete, this jumpstarts the next in a cumulative behavior until all goals are completed.

The colors were extracted from the moodboard. Shadow Blue was chosen as the brand color for its soothing effect, while Dark Olive was chosen as primary CTA color and Blood as accent colors that would indicate a warning throughout the app. American Bronze and Bright Gray were chosen as the neutrals.

Typeface

Karla is a Google Fonts sans serif typeface designed to convey a sense of warmth and approachability, which was important for a financial app for GenZ and Millennials. Its rounded shapes and friendly letterforms evoke a feeling of familiarity and comfort. It is highly legible and versatile, making it suitable for a wide range of applications.

Source: typ.io

Grid System

The layout grid was chosen based on native mobile app best practices. Since the information displayed were in large amount numbers, it was important to have a hard grid that would serve as a guide for an organized design.

Accessibility

I chose a light background in most of the app to allow higher visibility of elements that would stand out, such as numbers or graphs. I chose to have a universal design, for the largest amount of people, without the need for adaptation or specialized design.

4 Column Grid
20 pt Gutter
20 pt Margin

8 pt Soft Grid

8 pt Hard Grid

Version 4 (high fidelity)

After the branding was done, it was time inject color in the app. What can be seen is mostly light, and this is because I thought it would be important for a financial tool to convey transparency. I also added a few animations to make the experience interactive, and bring the design as close as possible to the actual product once it’s built.

Now that I had a product, I had to create a marketing website to start spreading the word.

Website

The marketing website should transmit the value proposition not only to target users, but anyone who might stumble upon it. I included a step-by-step animated design to communicate ease of use. I also included statistics of how it helps users save and other social proof in the form of reviews. I added bank logos to convey trustworthiness.

I got to the final version of the marketing website through peer feedback. Since a website should be seen on both desktop and mobile, I designed a mobile version as well. In the future, this design will be fully responsive and I’ll make a design for tablets.

Sketch

Version 1

Final

Looking back and going forward; what happened and what can else can be done?

Design Impact

Domino brings freelancing young professionals an effective savings method that is variable-income-proof. It solves the pain point of low visibility of financial future state by giving users projected completion dates for their savings goals and visibility over their expenses. Its added value is that it calculates an ideal budget that allows them to reach their savings goals in the estimated date without affecting their lifestyle.

Next Steps

The next steps for Domino would be continuous improvements to usability and data visualization in order to make the flow clearer and easier to understand. The app also needs to follow iOS guidelines more strictly. Improvements can also be made to the marketing website, in order for it to accurately communicate the value proposition of the app and its benefits to the general public.

Using the Tarot Cards of Tech, by the Artefact Group, I was able to imagine future scenarios that would require new features and special attention to specific aspects of infrastructure. These would the next steps for Domino if it were to continue its design and development.

I would add a goal feature that allows multiple users to share the same goal. This would allow people to achieve goals together.

The necessary step to ensure user information safety is to have bank-level security. This would prevent an undesirable security breach.

I would add a donations feature in which users can choose a charity to donate to in the frequency of their choosing.