top of page
iMacriser.png
riser.png
Riser
Money Saving App

Creating Brand Guidelines 

#ux #ui #webdesign #mobiledesign #studentproject #ios

Riser is a money-saving tool that helps people in preparation for a big purchase or expenditure.

The Problem

Saving money is a big part of our life, but a lot of people seem to be having trouble doing so simply because they don’t keep track of their spending or they don’t have the right tool to help them.

The Goal

Create a tool that helps people save money and keep track of their finances.

My role

UI/UX designer working on the app and responsive web app design from planning to delivery

Scope of work

Conduct interviews, wireframe, mid and high-fidelity prototype, usability test, and iteration on the design

Project duration

4 weeks

Planning

User interview

User flow

Wireframe

Usability test

Prototype

Planning the Project

The 5Ws.

WHO are we designing for?

This tool is for people who want to save money quickly for a particular reason—for example, a wedding, big trip, or a new car. The users are not new to technology but do not like working with their finances. So, they require that the information they receive via the tool is accessible and clearly tells them what they can do to save better.

  • Save money, quickly, for a particular reason.

  • Not new to technology but do not like working with their finances.

WHAT does it do?

A responsive website, web app, and/or mobile app allows all data on income and expenses to be recorded easily, on the go, and from various devices. The tool displays data on the user’s finances (how much money they spend and on what) and helps them save money in a certain amount of time.

  • Responsive, on the go

  • Record income and expenses, how much and on what

WHEN do they use it?

Users will utilize the tool in the period before a planned expense. During this period, they will input data when spending and receiving money so they can view accurate information on their finances and dynamic information on their saving goal.

  • Before a planned expense

  • Input data when spending and receiving money.

WHERE do they use it?

The tool can be used anywhere and any device to ensure income and outgoings are easily recorded.

  • The tool can be used from anywhere and using any device.

WHY do they use it?

Saving money can be hard, especially when you don’t have a long time to do so. By providing personalized information on how a user can save based on their actual finances, the tool can provide financial planning during these finite periods of saving.

  • Personalized information on how a user can save

Interviewing users

5 participants | Remote - Moderated | Google Meet

I conducted interviews to understand the users and their needs better. Then I created user stories to correspond to the features.

I don’t know how to save,
I always end up overspending

  • As a money-saver, I need to input information on the money I am receiving and spending (and on what) so that I can see an overview of my finances.

Saving money seems hard,
feels like it’s gonna take forever

  • As a user, I need to be able to tell the tool what my savings goal is and how long I have to reach it so that I can save accordingly.

I never keep track of my money,
I only look at my available balance

  • As a user, I want to see a dashboard of my finances clearly and visually to see how much I am spending on what at a glance.

Result

The user interviews confirmed the initial assumptions from the 5Ws. I also discovered that most users don’t have a clear picture of the financial situation during the month.

User Flow

  1. Creating a saving goal and helping users calculate the time needed from the inputted information

  2. A personalized dashboard that shows their finances clearly

  3. Recording their income and expenses easily to keep track of their finance

riseruserflow.png

Brand guidelines

I created brand guidelines to ensure consistency throughout our product, and that includes the introduction to our brand, logo usage, colors, typography, illustration, and writing style.

content.png
Colors.png
Colors-1.png
illustration.png
intro.png
Tone & Voice.png
logo.png

Wireframe

First, I drafted each screen on paper, and then I made them into digital wireframe for the usability test. The app contains three main sections that correspond to our user needs. They are - Dashboard, Transactions, and Saving Goal.

Dashboard

Transactions

Saving goals

riser1.png

Add Transaction

riser3.png

Set saving goal

riser 2.png

Usability testing

5 participants | Remote - Moderated | Google Meet

Using the mid-fidelity wireframe, I conducted five scenario-based usability testing to help conclude my solution. However, the testing revealed that my solution needs changes.

  • Scenario 1 - Navigation of the dashboard
    You want to find out how much you spent last month and how does it compared to this month.

  • Scenario 2 - Adding a transaction
    You just went to the market for some groceries. Now try adding the transaction to the app.

  • Scenario 3 - Setting up a new saving goal
    You want to add a monthly saving goal for vacation. The goal amount is $10,000, starting from the 1st of next month.

Findings

In scenario 3, all of my participants disagreed on a particular step within the solution. They don’t necessarily want to put all the money into one goal when they don’t have enough to cover all goals. I figured it makes more sense to save using a percentage of the income instead of using priority.

Saving goal

Saving Amount

Saving type

Start date

End date

Priority

End Goal

riser5.png

Design decision

18 participants | Preference test | Usabilityhub

I conducted a preference test to see which design to use for the homepage. 67% of the participants prefer more colors than the minimal design.

test2.png
test1.png

The colors make it stand out more. The colors are also quite motivating, making sense since they are saving goals.

In the context of saving goals, I decided ultimately for the colored one because it gets me more invested in the goals and makes them more emotional they are saving goals.

The icons emoji brings a friendly vibe!

With the colored pictures, it is much easier to see what it is about.

I like the gamification of the icons here!

Monthly finance overview

Keep track of every transaction to make saving money easier

risermock1.png

Set up your saving goals

Let us know what and how you want to save and we will set up a saving plan for you

risermock2.png

Recap

The project was developed during the Career Foundry UI design course. The project scope is to create a money-saving tool. I never had any experience using this type of tool, so I was having some difficulties with how and where to start. I took some time looking online for a similar product, browsing through my banking apps, and reading some articles about money-saving. Finally, I had some idea on how it should work.

The usability testing was a great success. I gathered some insightful feedback and tweaked my design solution to its best. I believe that sometimes I might not be working on a topic that I’m familiar with. It was a great opportunity to work on something new, and I learned so much from it.

Let's get social

I'm open to work!

Send me an e-mail:

christychan04@gmail.com

Connect with me on Linkedin!

  • LinkedIn
email.png
bottom of page