Gamify

Overview

Assumption

When investing in gaming equipment, users can often make big purchases that don't end up meeting their standards, which results in a loss of time, money, and effort.

Problem

Gaming ecommerce websites often make it difficult to truly find what you want at a reasonable price. Because of this, users tend to spend time searching extensively on different websites to compare options.

Solution

Gamify is a desktop and mobile solution that looks to provide users with the information and product specs they need while providing a workflow that allows for easy comparison.

Project Context

Affiliation: Google UX Certification on Coursera

My role: This project was an individual graduate-level project, and I took on the role as a UX designer and researcher. My responsibilities involved conducting surveys, defining user problems, iterating on ideas, building interactive prototypes, and usability testing.

Tools used: Figma, Adobe Photoshop

Duration: 11 weeks

Research and Social Proof

Gathering Data

In order to better empathize with users based on research, I conducted a survey with individuals who actively play video games and purchase gaming equipment. I asked each of them the following questions:

How do you currently shop for gaming equipment?
What are the most important things to you when you shop for gaming equipment?
What kind of information are you looking for when you shop for gaming equipment?
What makes a good or bad experience for you when you shop for gaming equipment?
Any specific examples of a good/bad experience shopping for gaming equipment?
If you shop for gaming equipment online, which sites do you use?
Any additional information to share about how you shop for gaming equipment?

User Personas and Journey Map

Using the information from the responses I got, I created personas to represent the needs of my users and made a user journey map to show what the customer experience might look like as users interacted with my app. By gathering testimonials, I felt that my understanding of the product users was better informed.

Journey Map

Conducting Competitive Analysis

To find gaps in the market that my app could fill, I created a competitive audit, where I evaluated the first impressions, interactions, visual design, and content of both direct and indirect competitors. These websites included Game Stop, Best Buy, Slick Deals, and Target.

Some opportunites I found were:

Making information like pricing, ratings, specs, and warranty front and center
Allowing users to save items they're interested in to compare later
Using consistent navigation, page structure, and visuals

Content and Design

Information Architecture

I outlined the pages of my website using a sitemap and then established a user flow to strengthen my understanding of my app's information architecture.

Sketching Initial Concepts

Through paper wireframes, I was able to rapidly iterate between different versions of a specific screen and choose different features that would address user needs. Then, I refined my wireframes and brought them into Figma.

Digital Wireframes

Digital Wireframes for Mobile

Digital Wireframes for Desktop

Usability Testing

The kind of study I chose to conduct was unmoderated usability testing, which differs from its moderated counterpart. This is where participants get to perform tasks and provide feedback on their own time. Some of the main strengths of unmoderated usability testing include:

Respecting a participant's time
Gathering data in a natural environment
Avoiding biases introduced from the moderator
High flexibility

I tested a low fidelity prototype with 5 individuals. To structure participant feedback, I divided the study into prompts and encouraged users to share their first impressions, pain points, and recommendations:

Sign into the app
Search for a product
Add 6 potential candidates to your saved list
Access your saved list
Select the first saved item, view its details, and add it to your cart
Go back to your saved list, select a second saved item, and purchase immediately to go directly to your cart
Proceed to checkout and confirm order (assume that you've used this app once before)
Any final thoughts about the whole experience?

Then, I created an affinity map to organize the data and find patterns. I found that users wanted more visual feedback while checking out, more organization options for saved items, and more sign-in methods.

Low Fidelity Prototype

Taking the feedback from my usability tests, I made the following changes:

Added the ability to sign in with Apple
Renamed "saved items" to "favorited items" to better match the mental model for the heart icon
Added the ability to organize favorited (previously called "saved") items into lists for easier product comparison
Added a badge to indicate the quantity of items users are about to purchase and prototyped toasts to appear as confirmation for adding an item to the cart

High Fidelity Wireframes

High Fidelity Wireframes for Mobile

High Fidelity Wireframes for Desktop

Testing the Product

Similarly to my first round of unmoderated usability testing, I wrote prompts to structure user feedback. Since I was testing a high fidelity prototype this time, I had to make adjustments to account for the increased level of detail.

Ordered List of Tasks:

Sign into the app
Search for a gaming laptop
Add 3 potential candidates to your favorites list:
- ROG Strix G16
- Acer Nitro V
- Acer Predator Helios
Access your favorites list. Pretend that you favorited a headset some time prior to looking for a laptop
Select the ROG Strix G16, view its details, and add it to your cart
Go back to your saved list, select the headset, and purchase immediately to go directly to your cart
Let's say you would like to have a favorites list for laptop recommendations. Create a new list called Laptop Recommendations
Add the 3 laptops into this list
View your new list and then navigate back to the cart
Proceed to checkout and confirm order (assume that you've used this app once before)
Any final thoughts about the whole experience?

The feedback was much more positive the second time testing. My prototype was recognized for its visual aesthetic and streamlined purchasing process. Of course, there was a consensus of feedback about the new features I added to the favorites page, which was making lists and organizing items into those lists.

Prototype 1

Prototype 2

Reorganizing the favorites page

In my first prototype, uncategorized items were located at the top of the page, and items that were organized into lists were grouped at the bottom. This unfortunately meant that a single item couldn't be placed in multiple lists.

The solution was moving lists to the top of the page and placing each individual item underneath. This way, lists were still easily accessible, and an individual item could be categorized into multiple lists if needed.

Clearer CTA for editing a new list

After users created a new list, the original prototype would place the empty list towards the bottom of the screen. Users expressed confusion, as they weren't immediately sure how to organize items into that list.

In my second prototype, I made sure to place the new list at the top of the page with a placeholder to add new items. This would give a better visual cue of where users can click to add items to an empty list.