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
-
Creating a saving goal and helping users calculate the time needed from the inputted information
-
A personalized dashboard that shows their finances clearly
-
Recording their income and expenses easily to keep track of their finance
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.
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
Add Transaction
Set saving goal
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
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.
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
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
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!
