GamerVault
Budgeting platform for video gamers
OVERVIEW
What's our problem?
One night, my friends and I were playing video games and talking about buying new cosmetic skins for our characters and then it dawned on us......we spend way too much money on video games.
So what do we do to solve this issue?
Well, we decided to make a budgeting platform specifically for gamers called GamerVault of course! We also landed on the name GamerVault as it's a metaphor for a vault that keeps our users' money from being spent unnecessarily.
Dedicated to gamers to help manage gaming expenses
Offers robust and comprehensive budgeting process
Offers more specific gaming related features compared to other budgeting apps
Users can set a budget amount for certain categories such as gaming subscriptions, hardware, merchandise.
​
They can also set a budget for specific games for things like in-game purchases.
Budgeting
Users can add items to a wishlist and see if it's within their budget for that time period.
​
Doing so can help them visualize the costs and organize gaming-related items to avoid overspending.
Wishlist
A dedicated transactions tab helps inform users of all gaming-related expenses.
​
A recurring transaction section helps users stay on top of spending and avoid unnecessary payments on inactive accounts.
Tracking Transactions
Web Version
GamerVault is also designed with web users in mind. This allows for people to be able to access the budgeting service from any device, creating a seamless experience.
STRUCTURING THE PRODUCT
Comparative Analysis
We did some research to learn more about budgeting services on the market and compare them to our idea. Based on the following criteria, we identified how GamerVault may differentiate itself from existing platforms.
Information Architecture
We mapped out our information architecture to better visualize the different paths to get to certain tabs and features within GamerVault. This is our finalized flow of our information architecture.
ITERATIONS & TESTING
Wireframes & Low-Fidelity Prototype
We determined that there are 4 main flows that users will go through and created wireframes for those flows. We then prototyped it to conduct a round of usability testing to identify areas of improvements.
Budgeting Flow
This is a part of the wishlist and transaction flows from the low-fidelity prototype that was used during the first usability test.
​
In this instance, users are being asked to add and remove items from their wishlist.
Wishlist & Transaction Flow
This is a part of the budgeting flow from the same prototype. In this particular example, users are asked to add a new game to their budget.
Testing Prototype Examples
Examples of After Test Changes
There were many key areas of our product that needed to be redesigned after our user testing. Some were usability related issues while others fell more into the area of user flow logic. Below are some examples of the changes that we made going from our wireframes to our high-fidelity mockups.
Budget Screen Layout
Test particpants experienced confusion and difficulty navigating this screen. Some changes we made were:
​
- Redesigning the Categories & Game sections
- Making the edit button more visible
- Reordering elements to create better hierarchy
Rethinking the Budget Editing Logic
One area that also had many questions were the logic of the budget editing flow. Our way of displaying amounts and percentages of each category relative to the total was a point of confusion. How the total budget interacts with the sub-categories after a chnage was also a head scratcher.
​
In the end, we decided to not have the total budget amount be editable. Instead, it is there only as a point of information. Users will just add individual items to their budget.
Replacing Gaming with Wishlist
Before, we had a Gaming tab and Wishlist was nestled under this tab. However, this proved to be a not useful. People failed to locate Wishlist and wanted a better way to do so.
​
We decided to remove Gaming as a tab within the nav bar all together and replace it with Wishlist for easier access.
WEB CONSIDERATIONS
We also did some explorations on the web version of GamerVault. Many components are reused to maximize the efficient use of our design system. A vital aspect of this exploration was to retain the design consistency across devices.
Dashboard Page
Dashboard Page with minimized navigation sidebar
DESIGN SYSTEM
Since there where 2 of us that were working on this project together, we wanted to create a well organized design system to make our workflow be more efficient and maintain consistency between our work.
​
We used an atomic design approach, building components from the smallest elements up. We adhered to industry best practices as well as ensuring that our designs met WCAG level AAA standards in terms of accessibility.
​
We crafted standard components such as navigation bar or buttons before starting to create the mockups. Components such as transaction cards, wishlish cards, or other budgeting items are created along the way as we continue to finalize the functionality requirements.
TAKEAWAYS
1
Be open to change when something isn't turning out as you expected originally. There are multiple ways to achieve a goal.
2
A design system is a living organism and not immune to change. Sometime it's more important to adapt to fit the needs of the feature.
3
No matter how 'common' you think a UI element or user flow is, you should not assume that everyone will be able to know what to do.