Gaming equipment

An app and responsive eCommerce website that focuses on comparing different products and tracking shipments.

Roles

  • UX Designer

  • UX Researcher

  • Product Designer

  • Graphic Designer

Duration Feb 16th 2024 - Mar 5th 2024

Tools

  • Figma

  • Clip Studio Paint

  • Pencil and Paper

When I started this project…

As a user I thought I knew what the majority of the users wanted. However, as soon as I started the interviews, I was made quickly aware that I had some personal biases on it and put them to the side.

“Easy price comparison, better product details/compatibility and 360° pictures of products”
— NewEgg user
“Quick and efficient mailing/ potential refunds in a timely manner!”
— Amazon user
“Sections of equipment such as web cams/camera options, headsets, monitors etc so that people who may not know what a piece of equipment may be called but can See a picture with brief description and browse/search those sections for something specific or just sift through the results.”
— Razr User

After doing some secondary research, I saw the same complaints from other users on these websites. From here I was able to understand the users pain points easier.

To make an app and responsive eCommerce site that allows users to compare what they want not only specification wise but size wise as well. Also, allowing users to more easily track the shipment of their orders.

User interviews

I first prepared for the user interviews by narrowing down a few people from surveys but keeping the user pool wide enough to have variety.

 Name:

Age:

Gender:

Hometown:

Family:

Education:

Occupation:

Do you buy gaming equipment online and if so where do you usually buy your equipment?

(Can be anything from chairs, headsets, mouse, controllers, etc.)

Why do you normally use that/those websites to purchase your gaming equipment?

What are some problems you normally run into when purchasing gaming equipment online?

What would you like to see as far as a layout and usability for purchasing equipment through an app or a website?

Pain Points

After going over the interviews and looking through both app stores I came up with a few points of discomfort in the users journey.

1

I found that most users would like to be able to compare prices of products.

2

I found that most users have a problem with unclear delivery times.

3

I found that some users would like to be able to see if the products would fit in their room/office area.

4

I found that a few of the users would like to have either a better return policy or better delivery times incase a product gets damaged in transit.

PErsona

I wanted to create a persona to best combine all of the people I interviewed. Combining equal parts of all of the interviewees I came up with Jeremy.

Jeremy

Age: 30

Education: Highschool

Hometown: Guthrie

Family: Married with 1 child

Occupation: Tradesman

Jeremy sits down to play video games after he puts his kid to bed only to realize his mouse had died on him. He pulls out his phone to order a new one only to realize he has many options and no way to compare. When he finally does order a new mouse he has to use a third party website to attempt to track it.

Taking the user’s journey

In order to better understand the pain points and what I could do to fix them before they arose.

Create and REiterate

From grouping to designing the ideation process took me the longest.

After going through several iterations on paper and asking the users which one they preferred, I was able to come up with a few designs that the users could agree on.

Using the paper wireframes, I was able to create a few lo-fi mockups to show to some of the users.

After working out the way the app would look I decided to start working on the website.

After getting the basic outline done I added the color and stock images for a more real feel.

I chose to design this app and website to look a little bit like a retro video game. Keeping with the high-contrast accents with a muted background that the 80’s and 90’s were known for, I went through the process of keeping up with the WebAIM guidelines for accessibility purposes.

Using Figma, I created the mockups that I though the users would want to look at most based on their issues with other apps and websites.

Lo-fi

There were a few iterations that were thought up but ultimately only one flow really worked.

Hi-fi

Once I began to add the stock images and functions, the app and website began to come to life.

Usability study

While going through the functions of the prototypes, I began to plan how I was going to do the usability study. I wanted to make sure the app and website did exactly what the user wanted to do in an easy to use and accessible way.

I decided to do an unmoderated study as I would be able to have the interviewees record what they went through so I could go back through and catch anything they might have said that I would miss in the initial interview. I only had them run through a few tasks that I thought were the most important to the users and their original pain points.

  • Open app. From the home screen select the mouse. From there please select product 1. Has this been easy for you? What would you change?

  • Select compare. Compare with product 2. Is there anything on the compare screen you would do differently?

  • Please select 1-click buy on product 2. Select confirm the “OK!’. Finally Home. Is there anything more you would like to see as far as tracking or comparing?

Having previously chosen the candidates for the usability study during the initial interviews, I contacted them and had them run through and record the usability study on their own time. I wanted to run the usability study this way because I had the idea that the users were going to be using the app and website probably by themselves anyway. Very rarely is the situation where someone is guiding you through your purchase.

In the end, all of the users liked the app. One user went so far as to say, “ It’s like Amazon, just more refined.”

Usability Study

Throughout the project I managed to complete put aside the original design I had in mind and using the actual interviews I learned what the users actually wanted. Doing this made me realize that my original design was based solely on my biases and what I wanted. I now know how to properly build an app and eCommerce website that users will love.