Google UX Design Certificate Project 2

Money management and budgeting with   Simple Budget responsive website and app

Building an easy way of managing finances

Empathize
Define
Ideate
Prototype
Test

Overview

Managing money does not come easy to everyone. National surveys show that young adults have amongst the lowest levels of financial literacy. They need more support and some education in the field of personal money management, planning, budgeting and saving to prevent them getting in debt, or constantly worrying about their finances. 

High levels of financial stress manifest through physical symptoms like sleep loss, anxiety, headaches, compromised immune systems, digestive issues, high blood pressure, muscle tension, heart arrhythmia, depression, and a feeling of being overwhelmed.


Project goal:

Develop a prototype of the budgeting responsive website and app that will teach young adults and adults how to manage their money.

This product will help people to keep their life in balance preventing them from getting in debt, and insuring them that they have enough money for things they like and for things that are important for them.





Role

UX/UI designer, UX researcher

Project Duration

June 2022- Aug 2022

Responsibilities 

User research, ideating, wireframing, prototyping, usability testing 



Understanding the User:

  • User research
  • Personas
  • Problem statements
  • User journey maps

User research summary

The results of the user research revealed the information about different types of users, and their needs. And confirmed initial assumptions about main users needs:

  1. Users want to get some education about money management process and personal finances
  2. Users need a digital money management tool which is easy to use for people who are not financially educated
  3. Financial adviser to help them with reaching their goals, budgeting and saving, or getting out of debt.



User Pain Points

Lock of financial education

Some people never managed their finances and don’t now how to do this. 


Apps are too complex

People that don’t have financial education struggle to use some money management apps because of its complexity and specific terminology


manual money management

It requires a lot of time and organization to track finances and expenses manually

lack of financial advice

People need for some expert advice on their specific financial situation 


Personas

Julia

Problem statement

Julia is a full time working doctor and mom of two children 

who needs time saving and easy way to manage her expenses because she does not have time and self-organization to manage it manually.



Peter

Problem statement

Peter is a full time working young adult who landed his first job and needs to learn how to manage his spendings because he does not want to get in debt.



User journey map

Mapping user journey for Julia and Peter revealed how helpful for the busy people would be creating money management and budgeting app.

.

Competitive audit

Starting the design

  • Paper wireframes
  • Digital wireframes
  • Low-fidelity prototype
  • Usability studies

Paper wireframes

Crazy 8 technique was used to come up with ideas for the home page. Later, based on the most interesting ideas from this technique, paper wireframes were created.


Crazy 8 technique
Paper wireframes

Digital wireframes

The goal for the website was to create an easy way for young adults and adults to learn about saving, budgeting and money management.

The homepage consists of the information about the product, explains product’s functionality, provides educational posts for those who needs to get better understanding of the finances and money management.

Besides the homepage registered users can login to their personal dashboard where they can start budgeting and saving.

Low-Fidelity Prototype

The low-fidelity prototype connected user flows for returning users and new people who are discovering the product.

Usability study findings

  • It was difficult for users to scroll through a large amount of unnecessary information to find the right one.

  • Monotone color scheme, that is hard to perceive, and impossible to perceive for color blinded people

  • Users want to have more personalised and enjoyable experience with more advice and feedback.

Refining the design

After two rounds of usability studies, in order to address user pain points, some additional pages were created,  the color scheme was refined to create functional and usable product.

The design of the dashboard was modified based on the usability study finding – it was difficult and time consuming for users to scroll down to find the information they needed. All blocks of information have been organized in the form of drop-down buttons for quick and easy access to the necessary information.


Before usability study
After usability study

Based on the usability study finding about color similarity on the chart, that makes the chart very hard to view not only for color blinded people, the color scheme has been refined to create more contrast ,and to make the design easy to perceive for wider group of users.   


 

Before usability study
After usability study

High-fidelity Prototype

Responsive Design

  • Information architecture
  • Responsive design

Sitemap

The goal for the website was to provide clear and straightforward user flows for existing and new users.

Based on the users needs discovered during the research phase, a website provides all the important information for new users including learning resources, and easy and fast access to the personal dashboard for existing users.

Responsive designs

With responsive designs my website can be easily accessed from different screen sizes. While designing responsive screen designs, my main goal was to arrange all the important information in the way that is easy to perceive for wide groups of users and to make the website focused on the users needs discovered during the research.

My takeaways

This project helped me to gain practical knowledge in creating multi device user experience using mobile first approach. 

I learned how to create responsive website using Progressive Advancement concept. It was a bit challenging to me to design first a simple version of the website that focuses only on the most important things. That was a great lesson in synthesizing information.

From user research I learned that users are different, with different needs, abilities, and situations when they access the website, and successful product design is based on the inclusiveness of the variety of human factors, needs and situations.