6 weeks - Dylan is an iOS app designed to help 20 year olds gain financial confidence by helping them track and plan their finances.

Skills: user testing, paper prototyping, data visualization, storyboarding, on-boarding, applying Apple's Human Interface Guideline

* Project at a Glance

Goal: Develop an insight into a product

Users: in their early 20s trying to gain financial confidence

Constraints: 6 weeks, and no budget

Deliverables: Hi fidelity clickable prototype

Skills: user testing, paper prototyping, data visualization, storyboarding, on-boarding, applying Apple's Human Interface Guideline


With Venmo gaining traction in the US and WeChat Pay in China, 2018 continues to be a great year for FinTech. At its heart, it is about questioning how technology improve the way we use and think about money.

Under the tutelage of Jason Early from General Assembly, I developed an insight from the client, Adrian To, into a clickable prototype and pitch deck in 6 weeks. Both branding, UI, and UX design fell within the scope of the work.

This is the story of how the app came to be.

1. Insight

Why are we collecting paper receipts to claim business expenses, when everybody is paying digitally with WeChat Pay and AliPay [in China]? - Client, Adrian To

2. Interviews

10 people age 18-45, M/F

I discovered how different people cope with the current problem of paper receipts, and created 3 personas

3. Problem Statement

Millennials (users) need a way to better track expenses and budget (need), because there are too many methods of payment (obstacle).

This puts the app in the category of finances. In particular, personal finances to avoid features involving taxation, and project management.

4. Competitive Analysis

These are the features of some of the companies that help users track their income and expenses (2018).


  • Budget for specified categories
  • Add past/ future/ recurring spending


  • Add past/ future/ recurring spending
  • Track income + expenses
  • Adjust the spending items by currency

Clarity Money

  • Help cancel subscriptions
  • Chart spending
  • Find new credit cards
  • Make direct deposit to a user's bank account at specified intervals
  • Create financial goals for motivation

5. Brand Audit



  • Colourful, joyous, reliable
  • Illustrative
  • Predominantly blue and green colour palettes
  • Targeting millennials



  • More extreme, filled with illustrations (Dave) or no illustrations at all (Robinhood)
  • Predominantly blue and purple

6. Brand Persona

Dylan is designed to be your reliable friend, to make the process of building financial habits seem more approachable.

Dylan is in his early 20s.

He loves to travel, read, eat, and the occasional party, but he is on a tight budget.

Having heard stories of financial nightmares, he knows it pays dividends to build healthy financial habits. He just needs a little help to get started - after all, it is not easy to track expenses.

As a tech-savvy millennial, he went to the app store to search for a solution.

7. Storyboard - Question

With so many methods of payment, how canwe better understand where we are spending our money?

8. Storyboard - Answer


Connect to Apple Pay, WeChat Pay, or mobile banks eg. Monzo, and Chime.


Spend as usual


A native pop-up box will appear when a purchase is made to let your easily categorize your expenses


Use the app to go through all your incomes and expenses

9. Sitemap

10. User Flow

Sketch of user flow

Paper prototype with annotations of feedback from 3 users tests. I conducted the tests by asking users what they notice, what actions they would take, and changed screens based on their actions.

11. Wireframe

Wireframe of key screens

12. Diagram Study

These are some of the diagrams I designed to represent spending in each category.


  • Represent relationship of part to whole
  • Explore the possibility of having a stand-alone diagram
  • Show money left in each category
  • Clear and readable
  • Aesthetic

13. Diagram Study - After Interviews

After testing the diagrams, I realized a lot of the needs are unnecessary. I then drafted three new diagrams.

  • (Unnecessary) Represent relationship of part to whole
  • (Unnecessary) Explore the possibility of having a stand-alone diagram
  • Show money left in each category
  • Clear and readable
  • Aesthetic

14. Art Style Study

I revisited some of the assets I created earlier and refined their art styles. With this exploration, I was trying to find a balance between what is friendly and what is trustworthy. I asked 5 participants to rate the art style of each based on the two metric. The light blue coloured one ranked the highest in both.

15. Typography Study

The chosen font combination provides enough contrast, quirkiness without being odd.

16. On-boarding

The process was designed based on Luke Wroblewski's findings. The most efficient on-boarding process requests as little information, and begins the app experience as early as possible. All orientation elements after the 3rd side are optional.

17. Hi Fidelity Screens

Linking Accounts

  1. Select from a list of supported payment methods
  2. Link accounts with username and password
  3. Authorize with fingerprint

Viewing Balance and Adding Income or Expenses

  1. Pay as usual
  2. Group with native pop-ups
  3. Review spending in each category, with the option to add income and expenses manually

Adding and Editing Goals

  1. Add your financial goals
  2. Consider the amount you need to put aside to achieve a goal within a desired timeframe
  3. Save and the app will visualize how your money is allocated (without making bank transfers)

18. Final Thoughts

Some possibilities to explore in the future

  • Pay directly from the app (link to Venmo for example)
  • Automatically include tax for each item based on location
  • Algorithm to automatically categorize your items
  • Alert for suspicious activities
  • Tracker for value of non-liquid assets
  • Tax planning
  • Building the app for a secondary persona, focusing on catering for freelancers
  • Allow users to share an expense item

Other projects: 

New York / Hong Kong