Otto

Otto is a native mobile app designed to help users save money for upcoming expenses. I created UI/UX designs in addition to developing brand identity guidelines.

Context

Case study
My Role: UI/UX Designer

Tools and skills used

Figma
Photoshop
Wireframing
Interactive Prototyping
User Testing
A/B Testing
Branding

Overview

An app to help save money for an upcoming event.

I created a proof-of-concept design for a native mobile app designed to help people save for an upcoming purchase or expense. Additionally, I authored a brand guidelines document to maintain consistency across platforms.

The Problem

How do you make saving money easy?

Saving money is hard, partly because it can be challenging to keep track of your bills, expenses, and income. When looking at your bank balance, it may be hard to calculate how much you can spend freely while still setting aside funds for bills, rent, or upcoming expenses.

Hypothesis

People want the assistance of an expert.

My working hypothesis was that many people would happily hand over their financial planning to an experienced professional if they felt this was feasible or affordable. If an app can carry out financial planning with minimal user involvement, many people would want to take advantage of that service. Key messaging for this approach, as defined by the project brief, included:

A finance app you can trust.
A financial advisor in your pocket.
Anyone can save money.

My Approach

I began by trying to identify how this app would help users save money. Would it automate the process? Or would it offer tools to allow users insight into their finances and let them take action themselves?

Because I wanted to simplify the process for users as much as possible, I determined that the app would as a separate bank account that automatically withdraws funds from a user’s primary bank to be set aside for their saving goals. While this automated withdrawal might feel invasive to certain people, the trade-off was providing a set-and-forget savings tool.

This approach also ensures that the balance in a user’s primary account is always money they can spend freely without worrying whether they should be setting it aside.

I plotted out how users would complete these tasks in the app by creating three user flows, and combining these in a user flow diagram.

Low Fidelity Wireframes

Once I have determined how the app would function, I began by sketching out the low-fidelity wireframes for the central saving functions of the app. These were summarized in the design brief as the following:

As a user, I want to receive a personalized saving plan so that I can save enough money to reach my goal in time.

As a user, I want to see an overview of how much my finances have changed and how much I am saving throughout the saving period so that I can stay on track.

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.

Brand Guidelines

At this point, I also developed a set of brand guidelines to focus the rest of the design process and define the app's personality. I began by articulating the brand’s guiding principles:

Welcoming

You don’t need a high income or an economics degree to use Otto. Everyone needs some help to reach their unique financial goals, and that’s where we come in.

Trustworthy

Otto takes financial privacy seriously. We protect your data with industry-leading encryption and never share your information with third parties.

Smart

Never look at your calculator again. Otto uses sophisticated algorithms to figure out how much money needs to be put aside and then takes care of it for you. Otto will not remove money if your balance is low.

Easy

Financial planning doesn’t need to be difficult, and Otto makes saving and investing simple and rewarding. Let Otto handle your finances and give you a leg up on your goals.

Logo Design

I developed the name Otto to humanize the app by using a person’s name while also giving a nod to the automatic functionality of the app. While designing the logo, I sought to include a high density of meanings resulting in an engaging and memorable logo.

Some references in the logo include:

The letter O: Otto's initial.

A pie chart: Representing the app’s financial saving tools.

A circle: Representing holistic understanding and simplicity.

An upward arrow: Representing growth and prosperity.

User Testing / Mid-Fidelity Wireframes

Next, I created mid-fidelity wireframes and a clickable prototype in Figma to conduct user testing and identify pain points. I have included the synthesized takeaways from this research below.

Pain Point

Priority (1-5)

Design Solution

Users are confused by the ‘connect bank’ screen after clicking ‘create goal.’

5 - Critical

Make this screen part of the onboarding process. Consider allowing to skip.

The “create goal” button text is confusing on the plan confirmation screen.

4 - Critical

Adjust wording to include “save” and consider adding a caption beneath.

Users wanted to see whether they were on track with their goals from the home screen.

3 - Nice to have

Replace the percentage metric with a tag confirming the goal is on schedule.

The category input is seen as unnecessary when creating a goal.

1 - Low prioty

This opinion may change with the introduction of icons and advanced metrics. Test again at a later point.

Mid-Fidelity Wireframes Used in User Tests

Final UI Design

The final UI Design for Otto incorporates user test results and consistent brand guidelines. It adheres to the core design goals of the brief. Simplicity is the overarching goal, and a polished UI establishes the app as trustworthy and sophisticated.

Icons and language are friendly and intuitive. I chose blue as a primary brand color due to established psychological associations with trustworthiness and simplicity.

Final UI Design

Icons and language are friendly and intuitive. I chose blue as a primary brand color due to established psychological associations with trustworthiness and simplicity.

Design of Primary User Flow

Connecting bank is a part of the app onboarding, and offering a help overlay menu helps to build trust.

The goal creation screen is simple and consistent in style. The category dropdown accesses a variety of descriptions and icons.

The goal is added to the home screen with animation to draw attention to the change of state. Traffic-light color-coded completion bars indicate whether you are on track.

The Bank confirmation screen emphasizes security and offers access to the homepage if a user wants to look around before committing to a goal.

The plan summary allows users to understand what they are committing to. The app guarantees this is a safe amount based on bank records of income and spending.

Design of Primary User Flow

Connecting bank is a part of the app onboarding, and offering a help overlay menu helps to build trust.

The goal creation screen is simple and consistent in style. The category dropdown accesses a variety of descriptions and icons.

The goal is added to the home screen with animation to draw attention to the change of state. Traffic-light color-coded completion bars indicate whether you are on track.

The Bank confirmation screen emphasizes security and offers access to the homepage if a user wants to look around before committing to a goal.

The plan summary allows users to understand what they are committing to. The app guarantees this is a safe amount based on bank records of income and spending.

Data Visualizations

Otto also offers users interactive visualizations of users' imported bank data, allowing them to spot trends and develop insights about their spending.

If you want to spend less in a particular category after viewing your trends, Otto allows you to create a monthly budget based on previous averages.

I designed this section of the app for users who want to take a more hands-on approach to their finances. A contrasting dark UI color scheme hints at this functional change. I conducted an A/B test to validate this decision, with 88% of respondents preferring the dark option.

Desktop Website

I designed the desktop website to promote the Otto mobile app, ensuring the messaging and visuals were consistent with the existing brand guidelines. As a result, the brand identity of Otto feels cohesive regardless of device or platform.

Project Takeaways

This project offered an exciting set of challenges, and I enjoyed designing solutions to these complex problems. Some key moments and decisions throughout this project included:

Deciding on an automated withdrawal system to simplify users’ experience.
Addressing the issues of trust and security that arise from that choice.
Using user interviews to refine what they want to see from the product.
Creating a UI that is clean, simple, and speaks to the brand’s values.