GameGlimpse

Empowering gamers with financial transparency in the era of rising microtransactions.

| Overview

A platform where Millennial and Gen Z gamers can track their game spending across multiple games as more games incorporate in-game purchases (microtransactions).

Deliverables

User research, quantitative survey, qualitative interviews, competitive analysis, personas, feature prioritization, wireframes, usability testing, and hi-fidelity prototypes.
View prototype
View prototype

Role

Product Designer

Timeline

Sep 2024 - Dec 2024

Industry

Finance and Gaming
You can navigate to each section from this side navigation menu.

Problem

Gamers needs a way to track their spending on each game, helping them become aware of their habits and make informed financial decisions.

Constraints

Due to time constraints, product focus on mobile games, and more research is needed to evaluate its ability to gather data from games on other platforms.

Goal

Design an app that address the users demographics and their pain points to develop key features to tracks in-game purchases across multiple games.

Impact

Users are able to track their game spending automatically across all their mobile games. They can set monthly budgets and customize reminders to fit the users needs. Additionally, they can evaluate their spending over time alongside their gaming hours to make inform financial decisions.
28%
Improved efficiency
12%
Increased satisfactions
17%
Optimized navigation

| Discovery

I conducted preliminary research to understand the target users and key focus areas for developing a minimal viable product. In addition to primary research, data shows that 58% of gamers to played mobile games in 2024, with mobile gaming generating the highest revenue in 2023, accounting for 49% of total game spending across all platforms.

Quantitative Surveys

24 gamers of mix genders who have made in-games purchases, ranging from 18-35 years old, have completed the survey.
Pie chart data from 6 questions that was used in the quantitative survey.
“I honesty don’t remember the exact amount I spent on this games, probably like $300.”
“It is too much to work to track how much I spent overall, but I would mentally set a rough monthly budget.”

Qualitative Interviews

4 gamers of mix genders ranging from 20-40 years old were interviewed. Focus on their game spending habits and motivations for tracking expenses.

Pain Points

No Transparency

Many games do not display in-game purchases, making it difficult for users to track their spending unless they do so manually.

Forgetting over time

Gamers often struggle on recalling their exact spending amount on each game, relying on rough estimates that may lead to overestimation.

Tedious to track

Gamers often find it too difficult to track their in-game spending as they are mainly focused on playing their games.

Personas

After conducting primary and secondary research, I created personas to consolidate my findings and guide the user experience design. Users consistently sought transparent insights into their gaming finances.

Persona of Emily Chen containing detail of his background, pain points, and needs.
Persona 2: Emily, a 23-year-old, female causal gamer who mainly play one game, needs a way to view how much she have spent over time to make upcoming financial decisions.

How might we...

Bridge the gap between finance and gaming to make spending insights easily digestible for gamers?

| Ideation

I created low-fidelity wireframes after identifying and prioritizing key features using MoSCoW and the Eisenhower method.

Low-Fidelity Wireframes

Paper sketches helped determine the first steps of creating the structure. I worked on having each portion as card section to provide long-term scalability when more features are added to the app. This is beneficial for users as they can customize their dashboard to their preference in future versions of the product.

Low fidelity paper sketches translates into digital version for one of the task flow.

Data Visualization

A key component of this product was transforming raw data into visually appealing and easily digestible formats. I focused on developing iterations to enhance user understanding. Later, I polished the design in the the high-fidelity prototype.

Iterations of six data card sections, leading up to their high fidelity version.
Digital mid-fidelity mock-up of Task 3, where users aimed to set a new budget.

Mid-Fidelity Mock-Ups

Detailed body copy was added to the mid-fidelity prototype to help users better understand their tasks. This will also help me determine whether the confusion came from the body copy or the structural design.
View mid-fid prototype
View mid-fid prototype

| Testing

Two rounds of usability testing were conduct. First was to determine the flows in the functional design. After each testing the design were refined after hearing the feedback from users and the results on the key.

Usability Testing Findings

Round 1 testing

  1. Users were confused on the the third home tab as it was too similar to downloading the app.
  2. Users found it hard to understand some icons at first glance as it is not a common use for the tab.
  3. Users found key buttons difficult to find right away.

Round 2 testing

  1. Some users were not to familiar with the sort and filter buttons.
  2. Users were now using the third tab more effectively to search purchases information.
  3. Users completed tasks more quickly, though some minor adjustments were still needed.

Usability Testing Parameters

1. Study type

Moderated usability study

2. Location

United States, Remote

3. Length

30 - 45 minutes

4. Participants

3 users of mixed genders ranging from 20–40 years old were tested in each testing.

5. Participants demographics

  • Mobile gamers who spend money on games
  • Users aged 18 and older
  • Users with an income
  • Users who want to track their spending
  • Excludes children under 18 years old

Sample Questions

  1. You want to view all transactions for one game. How would you do that?
  2. You want to start budgeting that notified you when you playing a games. How would you do that?
  3. Walk me through on how you would find the first transaction you made of a game.

| Refining

Actionable recommendations were made between each usability testing to improve the functionality of the design and be align with the users.

Increase Findability

After the first testing feedback, I repositioned key buttons to make them more visible. This helps users spend less time active searching.
Before and after comparison of improved button visibility, making actions easier to find compared to the first iteration, where all actions were condensed into a single small button.

Revised Third Home Tab

I completely revised the third home tab because users believed it served a similar function to the App Store. I transformed it into an activity tab where users can view and search their transactions, to realign with our scope of work.
Revision of the third tab, changing it from an Explore page to an Activity page.
Updated the active state of the search button by replacing the cancel option with filter and sort buttons for improved search optimization.

Optimized The Search Function

In the second iteration, I focused on enhancing the search function, as it plays a pivotal role in helping users find specific information quicker. To improve this, I added sort and filter buttons.

Added More Route Options

I added more ways for users to complete the same task. . This helps identify the most frequently used pathways, while offering users greater flexibility.

| Design

Highlights of my design process include selecting colors, fonts, and creating the overall visual feel, while ensuring inclusivity to enhance user experience.

Color Iterations

I explored gaming-inspired colors for the theme but found them too somber and busy. Instead, I simplified the design, creating a modern and lively aesthetic with color focused on buttons and data visualizations.

Color iterations of a page, transitioning from blue-purple and orange-pink themes to a more simplified design with a dark gray background and focused color usage on buttons.

Accessibility Considerations

Reduce eye-strain

Most gamers prefer a dark mode to reduce eye strain. I adjusted the contrast and saturation accordingly, while meeting the WCAG standards.

Color blindness

I added shapes into the button's active state to support users with color vision impairments and promote inclusivity.

Readability

Font choice and data visualization were prioritized to ensure gamers can easily digest and understand heavy data-driven content.

Accessibility Implementation

Hand Off

I created design systems and components to help engineers develop the app efficiently.

A preview of the colors and components designed for a seamless handoff to developers.

| Conclusion

The final high-fidelity prototype showed a smooth user flow for completing actions the app and design to have a modern yet fun design to attract gamers from different backgrounds.

View high-fid prototype
View high-fid prototype
High-fidelity game profile page.
High-fidelity game home tab page displaying all of the user's games.
High-fidelity budget page featuring a budget summary and games with active budgets.

Results

Users showed strong interest in the product for tracking their spending. They found the design modern and easy to use.

Key improvements from testing include:
  • 28% boost in time efficiency
  • 12% increase in user satisfaction
  • 17% improvement in navigation efficiency

Reflection

I learned that user research methods vary based on user needs and the type of information needed for testing.

I should have conducted a card sorting exercise to gain a better understanding of how users categorize and prioritize information. This would help structured organization of the product better.

Next Steps

Research new features

Conduct more user research to identify new features in increase users engagement.

Optimize user flow

Perform additional testing to find areas for improvements to enhance user experience.

Establish stakeholders

Create a deck to showcase and explain the product's value to these users.

| Other Projects

Better School Choice

GameGlimpse