summit.png

Anyone can save money

Rectangle 3969.png

Context

Banks are old institutions, that need to adapt to new ways of saving money.

Saving money is not an easy task if you struggle with discipline or don’t have much time to spend. It’s a commitment.

Summit is designed to help balance your savings goals with priorities.
It is a financial mobile app and web app created during a  UI student project, that helps non-tech people to save money quickly for a particular reason.

Challenge

Understanding the functionalities of a money saving app.

Design a positive experience for users that aren’t into tech and finance.

Create smooth and intuitive navigation.

Role
UX & UI

Tools
Figma

Duration
1 month (Part-time)

Saving time

Make your experience quick and smooth, especially if you are not a tech person.

Convenience

Provides an intuitive journey that keeps track of your expenses and incomes.

Safety

Includes secure login process and data protection system.

mocup 2.png

Approach

Research

Gathering design solutions from competitors and understanding how money-saving apps are working.

Branding

Defining a consistent and cohesive brand for the target user, representing :

 

Optimism

Freedom

Professionalism

User flow

Defining a meaningful user flow rythm. Generating a smooth, frustration-free navigation process, linking user’s bank account and creating their first saving goal.

Wireframe design

Creating UI and visual design.
Going back and forth between sketching, low to mid fidelity wireframes and user tests.

Feedbacks

Running several user tests using protoypes of grayscale wireframes.
Incorporating feedbacks and developing high-fidelity wireframes.

 

High-fidelity wireframe

Creating a pixel-sharp product design.

shadow.png

Summit interface


The educational and refreshing interface helps users to navigate smoothly and visualize their spending habits.

Users can shape their goals

According to their expenses and incomes, thanks to an auto-calculator.

Link a bank


This app feature helps users to receive accurate information about their balance, and calculate automatically the right amount and duration for their saving goals without stress and knowledge about finance & tech apps.

Create a goal screen

ELIPSE 3964.png
Create a goal group.png

The saving recurrence, will calculate how long it’s going to take to get to your goal.

Duration will influence the recurrence; so that saving amount is calculated automatically from the user’s spending habits.
 

There are a lot of reasons to save money.
Presenting a list of common goals, easily accessible; as well as a search function for the user to type directly for more suited choices. This would have also for effect to limit cognitive overload.

Goal screens

The user can adjust goals at anytime and is also able to change their trajectory if needed.
 

To deliver a tailored goal-saving strategy plan, this extra feature helps and encourages the user through the saving money process.
 

Gathering design solutions

The research phase allowed me to gather significant design ideas and features from competitors. Also it helped me to get visual inspirations to create a corporate brand guideline.

User flow

Signing up process

An important point was to simplify the signing up process and avoiding the user to click “next” caused from confusions.

Therefore 2 options are possible:

Option 1

Avoiding to many steps to accomplish the signing task and encouraging the user to link their bank account in order to be able to have an accurate representation of their actual balance.
user flow green.png

Option 2

In order to create a saving plan right a way, allowing the user to understand the aim of the app, and develop a taste for it. After setting a goal, the user will have the possibility to “link to their bank”

Brand guideline

logo grid.png

Typography

typo1.png
typo 2.png

Colors

PRIMARY.png
secondary.png

Reflection

The main challenges was time, I had very little time to understand how a saving-money works.

Thankfully, I could remember my past studies in Business management and excel spreadsheet; on how to calculate the sum of different sources of revenues with percentages. I also asked people from my surrounding that are into tech and ask them to be part of feedback sessions.

This research became a very instructive project from the UI and UX perspective.
It allowed me to structure better component systems and my thinking process more effectivly.

There are many ways to achieve a great design experience, and I had to analyze many other existing apps, to understand what problem they were trying to solve.
I got lost into the different visual possibilities but I found a way to minimalize the visual design by bringing back the famous design approach “less is more”.
I also established a consistent component and color system to bring homogenity and coherency all along the design process.

Keys to take away

Involving early stage testing & user feedback proved me again how necessary this process is. It also helps to find design solutions more rapidly and to take better visual direction.
Keeping my visual design as simple and clear as possible to develop a consistent and structured design process
THANKS.png

Thank you for reading !