Case study 05 · Financial literacy game · MSc 2025
Storybank
Learning credit, interest and risk by playing a 1980s bank clerk.
My MSc final project: a financial literacy game for young adults, where each level brings a new client and a new loan decision.
Role
Lead Experience Designer
Context
MSc final project, The University of Edinburgh
Year
2025
Tools
Figma, Playset
Challenge
Financial education fades fast when it comes as lectures and quizzes. Could young adults learn credit, interest and risk by playing instead?
What I did
Surveyed the audience, used the Octalysis framework to plan four game phases and built Playset, a retro design system. Then I prototyped onboarding, a full level and the core loop: you are a 1980s bank clerk reviewing loan requests.
Outcome
A playable Figma prototype and a narrated walkthrough, submitted as my MSc final project at The University of Edinburgh (graduated with Distinction).
Skills and tools
Survey research
Octalysis framework
Game design
Design system
Figma prototyping
Playtesting
Game design
Four phases of play
The Octalysis framework structured the game around what motivates people, with no quizzes or lectures. Real financial topics become decisions you make at the counter.
Phase 01
Discovery
Phase 02
Onboarding
Phase 03
Scaffolding
Phase 04
Endgame
Core loop
Every level, a new client at the counter
Players cross-check the ID, credit report and utility bill, then approve or decline the loan.
5
applicants
15
documents to cross-check
4
game phases
Onboarding.
Reading the mail and the bank rules.
A loan decision.
Five applicants, fifteen documents: ID cards, credit bureau reports and electric bills.
Design system
Playset, a retro design system
I built Playset in Figma: color tokens, typography, iconography, animation guidelines and a full component library, rooted in 1980s retro computing. Playset now also runs this website.
100
#fefeff
K 20.8:1
200
#f3f3fb
K 19.0:1
300
#e6e6f7
K 17.0:1
400
#d5d5f1
K 14.6:1
500
#c3c2eb
K 12.2:1
600
#adade4
K 9.9:1
700
#9998dd
K 7.9:1
800
#8584d6
K 6.3:1
900
#7372d0
K 5.0:1
1000
#6260ca
W 5.2:1
1100
#514fc4
W 6.4:1
1200
#403fbf
W 7.8:1
1300
#302eb9
W 9.5:1
1400
#1b1ab3
W 11.4:1
1500
#02008f
W 15.0:1
100
#fefefe
K 20.8:1
200
#f2f5f5
K 19.2:1
300
#e2e9e9
K 17.1:1
400
#ccdada
K 14.6:1
500
#b3c9c9
K 12.1:1
600
#97b8b7
K 9.9:1
700
#79a6a6
K 7.8:1
800
#599696
K 6.2:1
900
#338887
K 5.0:1
1000
#0e7979
W 5.2:1
1100
#1e6868
W 6.5:1
1200
#225959
W 8.0:1
1300
#224c4b
W 9.5:1
1400
#203f3e
W 11.4:1
1500
#192929
W 15.1:1
100
#fefefe
K 20.8:1
200
#f6f2f3
K 18.9:1
300
#eee6e9
K 17.1:1
400
#e4d3d9
K 14.6:1
500
#d9bec8
K 12.1:1
600
#cfa7b5
K 9.8:1
700
#c590a3
K 7.9:1
800
#bb7992
K 6.3:1
900
#b26482
K 5.0:1
1000
#a84f73
W 5.2:1
1100
#9f3a66
W 6.4:1
1200
#922959
W 7.8:1
1300
#78284b
W 9.5:1
1400
#61253e
W 11.4:1
1500
#3d1c29
W 15.0:1
100
#fefefe
K 20.8:1
200
#f4f4f8
K 19.1:1
300
#e7e7ef
K 17.1:1
400
#d6d6e3
K 14.6:1
500
#c4c4d8
K 12.2:1
600
#afafca
K 9.8:1
700
#9c9cbd
K 7.9:1
800
#8989b1
K 6.3:1
900
#7878a5
K 5.0:1
1000
#68689b
W 5.2:1
1100
#5a5a88
W 6.5:1
1200
#4e4e76
W 7.8:1
1300
#424264
W 9.6:1
1400
#383853
W 11.3:1
1500
#252538
W 15.0:1
Live prototype
Try the prototype
The full playable demo: onboarding, one level and the core loop, sized for a standard iPhone.
01
Start the game and follow the short onboarding.
02
Read your mail and check the bank rules in your notebook.
03
Review a client’s loan appraisal form, then approve or decline it.
Next case study · 06
NEK Logistics Website
Read case study 06