top of page
Slide 23.png

Cognitive-based design to influence structured financial planning and money management for young people


Head of UX and Design
Head of Engineer
UX/UI Designer
Product team

My Contribution 

UX research
Design strategy
Interaction design
​User interface design
UX evaluation


5 months


Blackbullion is an education-focused fintech company that supports financial wellness for all students and is trusted by 40+ institutions in the United Kingdom, Australia, and New Zealand.


​How might we help young people manage their money regularly and motivate them to put their financial knowledge to practise?

​Research approach

Adopting the notion of cognitive theories in metal budgeting to design

Cognitive theories

Design process

​User-centered design

Understanding problems

User Behaviors Analytics
Literature review
Competitor research
Stakeholders interview

Ideating, prototype & design

Paper prototype
Hi-fi prototype
UI Design

User Experience

Guerilla testing
In-lab Usability testing
Eye-gaze tracking analytics
System Usability Scale

Who are the users?

More than 60% of users are between the ages of 18 and 34. They live in the big city and use the site mostly via mobile and desktop devices*

*Data collected from Blackbullion (Google Analytics) during January to April 2022

What are they doing?

I synthesized data from students’ interviews, stakeholder interviews, and ~10.000 user data records of Blackbullion about the budget calculator tools.

How we manage budget mentally?

 I created a model based on ​Mental Budgeting theory and Budget Intention theory


Budget setting

We label money as relevant to a certain class of products

Design Strategy

When someone begins managing their money, they must first evaluate their financial situation and income-to-expense ratio.

Design Strategy

Understanding the situation helps them formulate a strategy and take right actions to reach their goals

pink piggy bank.png

Design Improvement 

From onboarding to engaging with users once they make plans, the user experience was enhanced



Design Improvement 

Goal-oriented approach


Lack of engagement
Hard to find and create a plan


Positive effect
Good attitude

Design Improvement 

Make the design more human


Device - Macbook Pro 3.png

Process seems difficult
Cognitive overload


Device - Macbook Pro  4.png

1-1 discussion
Cognitive ease

Design Improvement 

New interactive patterns

Comparing two versions using gaze plot analysis. The bubbles show where people look and how long they stay there.


Device - Macbook Pro 5.png

High number of fixations
Long fixation duration


Device - Macbook Pro 6.png

Reduce time and cognitive load
Simple and easy

Emotional Design

​UX Evaluation

Adapting eye-gaze tracking metrics to usability testing

Areas of interest to analyze the users' attention to various visual components.

Gaze plots to understand the visual hierarchy of interfaces to optimize the placement of screen elements

Heat-map to understand user's visual search experience

bottom of page