Help people to understand money, together

Good Money is a startup financial project. The goal is helping people understand and manage their money with their family members.

I worked on this freelance project for 3 months. I created mocks for main features and explored multiple ways of visualizing data and how people react to them.

prototype | interaction | visual design

Freelance project

My Role

Interaction Design
Visual Design
Motion Design
Data Visualization
Usability Study

Research: Money is not just about numbers

  • People don’t care about who spend the money, themselves or their spouses.
  • Family is an unit. Family income and outcome is a big call.
  • Other than simply showing categories they’ve spent, normal outcome VS special outcome can help them understand their outcome. Special means treat.
  • A pie chart can’t show the growth. Ratio means nothing for summary of a month. People don’t like numbers.


Based on the research, I created two personas:

Design challenges

  • Managing money better can strengthen marriage.
  • Come with a better financial plan


I started with sketch to explore as much as possible ways of presenting data for user. The goals are include:
1. Tendency: Money in time space (Bar chart and pie chart are not helpful.)
2. Category: money in different categories (normal VS special, general categories like food, vehicle, transportation, etc.)
3. Gamification: Money is changing everyday. Showing numbers is not enough. A bit of gamification can motivate users and help them understand the complexity.

Data Visualizations

I started with sketch out some ideas. After discussed with our co-founder, we decided to go with the triangle option as it’s more flexible for different scenarios. To verify this hypothesis, I got her 3 months bills and visualized each of them. Details are varied based on circumstances.

3 ways of presenting data

In order to help people understand their monthly bills, I created 3 ways of presenting data.

The first column, each triangle piece means one transaction. Users can see their normal&special expense and compare with the income.

The second column shows savings and special projects, like education fee, weddings, house buying. Usually for these projects, people will spend more money than the usual. Food for wedding is not a normal expense. It’s more understandable to show users in a metaphor rather than pie chart and bar chart without emotion attached. 

The third column indicates important data in overview. 

Easy to tag normal/special

Just now, I got an alert from Mint. It said:

For people, it doesn’t mean anything at all. How much I spend on food, utilities, something I have to pay, are just normal outcome. For things like travel, treat myself (not normal shopping), are special expense. From our research, in order to help people understand their money, the first thing to define what is normal, what is special. Knowing an expense is about food means nothing for people. So I came up with this easy-to-use tag interaction, people can just tag one item as normal or special very easily. No pressure and no frictions when tagging things.

Other mocks

To sum up

This project has been shut down after 3 months because of a shift in business. I still learned a lot from this project, which provided a chance for me to learn how to apply user-centered strategies in design.

  • Putting everything logically right on the screen is not UX design. Humans are emotional and social.
  • Understandable graphic presentation is more acceptable than precise and detail data. When a professional financial consultant pull out a chart and complicated table, their customers don’t understand what’s behind the data. The easier way is just drawing some simple diagrams on paper.
Project Details

Date: April 24, 2017