Chu-Ting Fan © 2019

  • email
  • LinkedIn
  • Twitter
  • medium
  • dribbble



$mart is a budgeting tool that helps individuals living paycheck to paycheck, get on top their bills, expenses and even build up habits for saving money on unnecessary purchases towards high-quality ones for future unexpected costs.


The goal of $mart is to solve the following problem: How might we help individuals carefully be aware of their past expenses and anticipate their upcoming spending?


$mart begins to explore the enormous potential behavior of individuals living paycheck to paycheck. For past expenses, $mart offers clean and clear account  transactions data for users to check instantly and frequently. For upcoming spending, mart offers budget planning to be experienced at the user’s pace as he or she explores each month. In addition, $mart also encourages users to save money through weekly-saving and bonus challenges. The whole design process run through GV sprint design process, a methodology of agile product design process.


Jan. 2017 - May 2017 | Austin


Mural, Paper Sketch, Mac Sketch, InVision

My Contribution

Inspiration Board

Paper Sketch


Interaction Design

Visual Design


Design Process

Google Ventures Design Sprint

GV Design Sprint Method is a methodology of agile product design process. It begins to target and define the minimal viable product. Then the process from Monday to Friday, from brainstorming to user testing focuses to solve the key problem from the target audience.


Understand & Define

Map out problems



Sketch and explore ideas to solve the problem



Choose the best ideas and develop them



Build a realistic prototype



Test with target customers


Map Out Problems

Step 1. Target Audience & Goals

A budgeting tool that helps individuals living paycheck to paycheck,

  • get on top their bills,

  • manage their expenses,

  • and even save enough for future unexpected costs.

Step 2. Initial Problems

There were 4 main problems as following:

  • How would individuals living paycheck to paycheck fit this tool into their daily life?

  • What information would need to be displayed in the application?

  • What prompts would it give?

  • How would it help and influence users' behavior?

Step 3. Brainstorming

We ran through a brainstorming workshop during a course time. Discussing background information to confirm potential issues and setting up goals for the budgeting tool.

Step 4. Innovation Map - Understand the Process

Step 5. Choose a Focus - Define

After the course discussion and innovation map, I got a deeper understanding of the users' needs and their potential problems. So, the next step I tried to define the app goals and picked up one critical part to focus. Because our users are individuals living paycheck to paycheck, it's most important to help them track their transaction history instantly and help them plan their future purchases. Therefore, I focused on three features: attractive interactions and features appeal users to use frequently, clear and clean interfaces for users to quickly control their spendings, and plan for each following month. Except the above, the app also offers bonus challenges to encourage users to save their money.


The Four-Step
Sketch Solutions

Step 1. Inspiration Board - Look for old ideas and compete solutions

My inspirations come from two directions: one is budgeting apps which target related goals with mine, the other one is UI designs and interactions which are useful and attract me. The inspiration board is the first step of the sketch solutions in GV Design Sprint process. We collected our own inspirations and also listen to others' inspiration boards to gather ideas.

Step 2. Sketch

After the first step, we grabbed ideas from others and our own inspiration boards. Next step we started to do quick sketches within 20 minutes, which included rapid sketching and discussions.


Decide the Best

Step 1. Scenarios

After the rapid sketching, the next step is to create the solution shortlist and select the winners. Then, in the class, we used scenarios instead of storyboard to confirm the key solutions.


Build Up A Realistic Prototype

Step 1. Prototyping

In the prototype phase, I tried to build up a realistic prototype to realize the possible solutions and also test if the budgeting app is actually meet users' needs during the Friday testing.


I focused on three features: accounts transaction history, budgets, and savings. I first paper sketched the low-fidelity prototype. After then, I used Mac Sketch and InVision to build up the high-fidelity prototype.

Step 2. Accounts Transaction History

Accounts transaction history includes two parts: one is the Overview and the other is the Accounts.


The Overview first shows user profile and users' spending, app alerts, overview budgets and savings and users' credit score. It also shows clean and clear categorized transaction history. Users can see each spending with bank and category information.


The Accounts offers users' certified bank accounts. Within each bank card, it also shows how much this user still have and what's the expenses and budgets for this month.

Step 3. Budgets

Budgets offer the total accounts' spendings and budgets and each bank account's spendings and budgets as well. Red bars show the exceeding amounts in this month. Blue arrows show expecting budgets generated by the system suggestions based on last month's spendings.

Step 4. Savings

When users first visit Savings page, it will begin with savings setting up, including weekly savings and big expenses goals. Users could make their personal goals in big expenses setting phase. 


After the first setup, $mart provides users their own bonus challenge based on their weekly savings and big expenses goals. In this way, users could be entertained and increased their motivation to save money for their goals and even future unexpected use.

What I learned

For this project, I went through the GV design sprint process following the instruction of the book written by Jake Knapp. Because this project is a course project, I didn't make it during a week but a semester. However, we solidly ran through every step and had discussions on the innovation map, inspiration boards, and scenarios. I gave a final presentation in class and got feedback from my professor.


"Good job with white space and not overwhelming. I think you could spend some more time refining your font weight and color palette."


"Bonus challenges are a good idea and your circle graphs look good. I also like that you pulled something things from Starbucks inspiration. Good idea on Balloon visualization, creative!"


Because of the course schedule limitation and the feedback from my professor, I redesigned the color palette and font size after the semester ended. Since I have room and words are easier than icons to understand, I also changed the icons to text descriptions at the top on each page to help users easier control where they are.

Project Feedback

Lesson Learned

Going through the whole process, the most challenging lesson I learned this time is how important we should have user research to back up our design. I found this is harder to stand firmly when designing without data-driven research. Though I tested my prototype several times and revised it afterward. I learned that even we could still design products without prior research, but it would be difficult for designers to give themselves the reasons why they generate specific things when designing. Therefore, my next step for this project is:

  • Build product personas -- Because this project our goal is to design MVP, I should focus on specific user group and help this group of people reach their goals. Personas could help me define my target audience clearly and assure $mart is a good fit for this user group.


  • Conduct A/B testing -- I brought up another idea in the final presentation and received positive feedback from my professor and peers, so I would like to do an A/B testing to see if I could revise my product and make it more user-friendly and intriguing for my target audience.