Tokens is a mobile web app designed to help gamers identify their spending habits and build a monthly budget for video game content.
Role
lead product designer
Platform
ios and android
Timeline
2022
Highlights
Fig.01
Onboarding screens
Fig.02
Budget tracker
Fig.03
Shop screens
Fig.04
Social tabs
Problem
A generational issue
According to a survey conducted by AT&T in 2022, Gen Z gamers spend an average of $80 per month on video games/video game services. That’s more than $60,000 for their lifetime.
My personal user research verified that many gamers find it difficult to keep track of their spending and budget, leading to overspending and financial stress.
how might we:
encourage gamers to budget their monthly expenses
help gamers save money on video game content
gamify the budgeting experience for the end user
Solution
An app that educates and gamifies the budgeting experience
Creating an immersive all-in-one experience means focusing on seamless budget management. Tokens helps users create a monthly budget based on their income and suggests a spending allowance for video game content. The budget remains visible throughout the app, ensuring informed shopping decisions.
Application
A one stop shop
So how does this all work? During the onboarding process, users are able to select a variety of digital game shops and connect them all to Tokens for a seamless shopping experience. The shop homepage is tailored to a user’s preference of genres and games that they would most likely enjoy.
When a user purchases content from the shop, Tokens tracks how much they have spent and automatically deducts that amount from their monthly budget. Locking their budget ensures that the user won’t edit or update their monthly allowance until the following month.
Fig.05
Connect game accounts
Challenges
An already stressful subject
During the usability research, the hi-fi prototype used caused some users to feel uneasy due to it’s visual design which felt too much like other finance apps.
Fig.06
Before and after | medals screen
Flow
Build awareness along the way
Tackling each goal for this project meant that awareness was a key priority for the target demographic. gamers need to know upfront how much they were able to spend and how their budget would be affected with each purchase in the shop.
Fig.07
User onboarding flow
Design
UI a gamer would want
A certain theory of game UI/UX design borrowed for this project was visual awareness. This was importantly translated to the visual hierarchy of tokens.
The visual design language calls on themes of retrofuturism and cyberpunk aesthetics. My aim was to create an experience that was immersive and applicable to real life.
Fig.08
Various screen shots
Impact
A gamer's budgeting multi-tool
By allowing the user to build a customized budget, shop through their favorite online stores, and earn medals along the way, Tokens is able to keep users engaged and aware of how much they can spend each month on video game content.
The majority of usability study participants navigated throughout the app seamlessly and found the features applicable to what they may need in today’s video game economy.
