Simple Saver: UX & UI Design

Image displays three app mockup screens, with text "Simple Saver: Helping you save. Savings App UX/UI Design by Ellen Tisdale."
Context

Saving money for large expenses is a problem faced by many people today. What if you’re not really comfortable dealing with financial matters?

The goal of this project was to design the UI for an app that makes saving an approachable topic. This app targets people who are saving for a specific purchase within a limited amount of time; with this in mind, the app needs to be easy to use, and present information in a straightforward way.

As it will contain financial details, it’s also crucial for the app to inspire trust and confidence. The project needs to maintain a balance of friendliness and professionalism.

Brand Guidelines

I defined guiding principles for the brand, including the core values.

Our Values

• Security & Trust. Our users connect their financial information to their account with the Simple Saver app. One of our top priorities is to help users understand what information they’re sharing, and to ensure those details are secure.

• Ease. Our goal is to make saving money a simple process. Users can put aside the calculator, and leave the math to us.

• Inspiration. Our users want to see fast results in order to achieve their goals. The Simple Saver app aims to encourage our users to see their dreams turn into reality, by making their financial dreams easier to attain.

Other elements I developed for the brand guidelines document include:

Logo

The logo embodies the brand values: users feel secure in the knowledge that their money is in their hands; their goals are easily within reach.

Simple Saver App logo, displaying a hand drawn in outline grasping a yellow coin with a dollar sign. Includes the tagline "Helping you save".

Colors

The primary color used in this app, a dark blue, was chosen to evoke a sense of calm and trustworthiness. Secondary colors are used to draw attention to the next step in any process.

Circles display a primary palette of navy blue, off-white and dark grey, as well as a secondary palette of green and yellow.

Typography

Proxima Nova is a rounded sans serif font, projecting stability and objectivity. The simplicity of this font aligns with the core messaging of the brand.

Image displays typography options for headers, body text, and button text.

Image Style

Photography is used throughout the app, to encourage users to identify with people saving money and achieving their goals. While searching for stock photography, I noticed the overabundance of Caucasian models in stock photos, compared with models of other ethnicities. Using photos that capture the diverse range of users is important to create an inclusive user experience.

Photos feature a background with mostly light, off-white colors. Portraits of smiling people, reasons for saving money, and other relevant imagery convey the core messages of the brand.

Images display a glass jar full of coins labeled "House Fund"; a man holding a credit card; a baby in a bathtub; and a woman waiting for a train. People in photos are from a variety of ethnicities.

Mapping the User Flow

Key functions to include:
• create a profile
• set a savings goal
• receive financial advice based on that goal, and on user’s current finances
• receive a savings plan tailored to goal

My first thoughts on the account creation process were to walk users through each step in the process, in a very linear format:

Image shows a simple user flow with five main pages.

Upon further reflection while drafting the first wireframes, I decided that providing users with more options would be better – some may be excited to set their first goal, while others may want to save that process for later. Providing more than one way of engaging with this process gives users more control and freedom. With that in mind, I developed the flow below.

Image displays a more complex use flow, demonstrating multiple potential paths that users might take while onboarding.

Wireframes

Low Fidelity

With these wireframes, I tried out the idea of a strictly linear flow while creating an account.

Mid Fidelity

Having decided to try out the idea of providing users with more options, I developed mid-fidelity wireframes, and created a prototype to test with potential users. Four of the first screens are below; fourteen screens were designed in all, aiming to capture each sequence users might choose.

User Testing

Mid-fidelity wireframes were tested with three potential users. Testers included male and female users aged 30-39, with different levels of technological proficiency. Future testing should aim to recruit users from different age groups, as well as users outside North America.

Key Quotes

• “‘We’re rooting for you’, I like that!”
• “Not crazy about seeing the percentage that I need to cut my spending, percentages can be hard to understand. Better to focus on the dollar amount.”

• “It says it’ll help me find easy ways to save at the end of this sentence – that would be my priority while using this app, so maybe that could be placed where it’s easier to see.”
• “I see how much I can spend on restaurants, but I’d love to see how much I’ll save by sticking to this mini goal.”

• “I really like the clean design here.”

Analysis covers pain points, priority level, and recommendations, many of which are discussed in the following section.

Refining Wireframes

Using the information collected during user testing, I resolved the issues that were highlighted, while adding the final touches to the wireframes.

Two testers expressed concern about whether they would be able to return to different functions within the app.

To resolve this issue, I added a bottom navigation bar with links to three important areas: their current goal; their spending, where users can view and edit their financial information; and the blog, where users can gain information and inspiration.

image highlights addition of bottom nav bar in high fidelity wireframe

I worked on reducing the amount of text throughout the app, and highlighted the best features of the app earlier in the text (e.g. “easy ways for you to save”), as suggested by one tester.

Engaging photography was also given a more prominent placement on screens that did not have a lot of content.

image compares mid and high fidelity wireframes

Two testers were unsure about the purpose of the button circled in yellow, which is intended to allow users to upload a photo aligned with their savings goal. This area was expanded and given a brief explanation with examples of inspirational photos.

image compares mid and high fidelity wireframes

Testers suggested emphasizing the amount that would be saved every week by sticking to each mini goal. This is a good way to fuel users’ motivation to reach their goals.

image compares mid and high fidelity wireframes

Final Designs

Image displays final high fidelity screen designs

Desktop Design

A desktop landing page was designed, to promote the app and offer the first step towards a web app design.

Image displays desktop landing page mockup, and other mobile mockups

Reflections

Designing flows where users may follow many different paths was the key challenge in this project. While it was not simple from a design perspective, the flexibility and freedom it creates for the user is worth the work.

The next step in this process would be to test the designs again, having implemented feedback received during the first round of testing, and having refined the wireframes.

Designing a web version of this app would be useful as well. This app will be handy while users are on the go, but some will prefer to sit down at a computer when mapping out their financial goals. Offering this experience to users who would prefer not to download an app would draw in a wider range of users.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s