GamerVault
Designed a finance tracker for gamers from 0→1, including a full design system and usability-tested budgeting flows.
Overview
GamerVault was a 0-to-1 design project built in collaboration with another designer. I led user research, information architecture, and the budgeting and wishlist flows, while co-establishing the design system used across the entire product.
The Challenge
How can we empower gamers to effectively manage and optimize their gaming expenses, ensuring financial well-being while enhancing their overall gaming experience?
Process
Conducted usability testing and competitive analysis to understand how gamers currently track spending and where existing tools fall short.
Mapped core user needs around visibility, control, and trust, particularly around linking bank accounts and setting budgets by category or game.
Designed the IA around four core pages: Dashboard, Transactions, Gaming, and Budget. Built an 80+ component design system to ensure consistency across both designers' work.
Ran usability testing on the budgeting flow and wishlist, identifying navigation issues with the initial budget interface that were fixed before final handoff.
Outcomes
Design
Budgeting
The budgeting screens enable users to set a budget for a desired time period. They can then set up specific budgets based on category or by game. Users can also view their spending trends to help make better financial decisions.
Transactions
Users can track all of their gaming related transactions in one location. These transactions are separated into one time payments and recurring payments.
Wishlist
The wishlist enables users to determine whether their wanted products fit in their current budget. This helps them make informed decisions on their next purchase.
Competitive Analysis
We analyzed four competing tools across nine feature dimensions to identify the gap GamerVault could fill. Rocket Money and Mint offered strong financial foundations but lacked any gaming-specific context. Steam and Mana had gaming orientation but no budgeting depth. GamerVault was designed to be the only product that checked every box.
Information Architecture
Establishing a clear and intuitive IA was crucial in the early stages. By organizing the app around Dashboard, Transactions, Gaming, and Budget, I ensured users could easily navigate and manage their gaming finances.
Design System
An 80+ component design system was built before any high-fidelity work began. Using a dark theme with green accents, the system covered typography, color tokens, form elements, navigation patterns, and data visualization components, ensuring both designers worked from the same foundation throughout the project.
Testing: Budgeting Changes
Users had difficulty navigating the initial budget interface. By creating clearer buttons and budgeting cards on a single page, users could now easily navigate through the budgeting screen.
Bank Linking and User Trust
Users raised concerns about linking credit cards. We implemented Plaid integration, which users said they trust, resolving the key trust barrier.
Key Learnings
Functionality we thought was intuitive didn't work for some users. It was important to change these to more recognizable patterns rather than forcing users to adapt.
Setting up a complete design system before high-fidelity design saves significant time and keeps two designers perfectly in sync.
When designing a product simultaneously with another designer, setting standards and timelines up front is essential for a cohesive, fleshed-out result.