COMP

A PC E-commerce company case study

Overview

Role

Product Design (UX/UI)

Timeline

9 weeks/80 + hours

Tools Used

Miro/Figma/Photoshop

Background

Personal computers, also known as “PCs,” are the largest growing gaming platforms for players and developers alike. Between 2008 and 2018, the number of PC users worldwide rose by 41.27%, with a current market value for hardware and graphics worth approximately 38 billion U.S. dollars. The PC industry releases about 35% more video games than its console counterparts (PlayStation 5 and Xbox X/S) year over year. While the PC is becoming the most popular and preferred platform for gamers, game developers also seem to have picked the PC as their platform of choice. According to the Game Developers Conference and the DFC Intelligence, 65% of developers prefer creating and releasing games for the PC rather than for consoles. With the recent boom in PC games and users, the gaming PC graphics software revenue is predicted to reach 40 billion U.S. dollars by 2025.

Problem

With many people shifting toward owning a PC, there are many potential problems users encounter before they’re even able to play any games. Getting started in PC gaming can be very stressful and overwhelming for both beginner and experienced gamers. Usually, there are only two options:

  1. Buy a pre-built PC

  2. Build your own PC

Buying a pre-built PC may seem like the easier option, but it also tends to be the more expensive and suboptimal option. Those who are on a budget may opt to build their own PC, but it can be hard to know where to start, what to buy, and how to configure numerous parts into a working computer.

COMP is looking to launch their company as a way to solve both of these problems and reinvent PC shopping. The company has asked for a feature that will help improve the PC shopping experience.

Project Goals

Create a responsive website that improves and “revolutionizes” the PC shopping experience.

THE PROCESS

THE PROCESS

Empathize ➜ Define ➜ Ideate ➜ Prototype ➜ Test

01/Empathize- Exploring the Users Needs

  • To understand what pain points and unmet needs users experience when shopping for PC products, I decided to conduct surveys.

    Goal for research process:

    • Explore and identify patterns of how users shop for PC parts.

    • Identify pain points and unmet needs that users face during their shopping experience.

  • I recruited 10 participants who shopped for PC parts in the last month. In addition to learning about how they shopped for PC parts, I integrated open-ended response questions within the survey to garner an idea of what their frustrations are while shopping, and what they think companies should improve upon.

Customer Survey Results

Shopping Behaviors

Majority of participants (85%) reported they shopped for PC parts online as opposed to shopping in store due to the convenience. Although participants said that online shopping was more convenient, 71% said they must shop from at least two different sites to obtain all the PC parts necessary for a complete build.

The most consistent frustration that shoppers had was not being able to tell what parts were compatible with each other when shopping for a build. A majority 7 out of 10 participants reported that their major pain point was the lack of information sites offer when shopping for hardware and software. Participants stated that their shopping experience would improve if they knew what parts were the best value in terms of price, performance, and compatibility in comparison to parts they already own or parts they don’t own that could serve as alternative options.

Concerns & Frustrations

All survey participants reported building their PCs themselves because it was most cost effective relative to pre-built PCs. Every participant reported using tutorials on platforms like Youtube and Reddit to help configure their builds. Survey responses showed that researching which parts were most compatible with each other was time consuming for the shoppers. Overall, participants found the research portion of their builds to be the most stressful part of the process.

Research & Resources

02/Define - The Users Needs

& Problems

Persona Development

Throughout my research I noticed multiple patterns among study participants. The major pain points consisted of price, compatibility, and convenience needs. To further explore user needs and problems, I created two personas, Aaron and Jenn.

Aaron is a sensible and involved shopper. While he loves to modify and upgrade his PC, he knows he needs to stay within his budget and new products must be compatible with his own build.

Though he likes PC building and is willing to create builds for his friends, Aaron finds the process to be overwhelming and tedious when searching for parts. In the rural area he resides in, there are very few physical stores that specialize in PC parts so Aaron usually shops at Best Buy and multiple online stores. He finds that the Best Buy in his area does not offer much PC expertise, but prefers getting information first hand which is hard to find on online sites.

Jenn is a busy person with no extra time on her hands to research and build her own PC. Like many of the participants in the study, Jenn values convenience and functionality. Jenn has never owned a PC before, but heard it would be a more reliable computer for her photography business than her current laptop. Intrigued by both its ability to store huge volumes of data (i.e., photos from her business) and compatibility with editing softwares, as well as wanting to work on a larger screen, Jenn is interested in a PC with components suitable to her, no more or less than needed.

Although she has no knowledge on a PC’s infrastructure, she wants a computer that is reliable and prebuilt.

Problem Statements

Considering the problems and needs addressed by participants in the user survey, I created 3 problem statements using the “How Might We?” method to better conceptualize the tools needed to create a better shopping experience for users.

  1. How might we help users make educated decisions when making product selections?

  2. How might we simplify the research process so that it is not overwhelming and confusing?

  3. How might we show users what products work best for their budget and compatibility needs?

03/ Ideate - Creating the Framework

User and Task Flow Charts

I created two user task flow charts for the two key aspects of the site’s functionality. The first flow chart depicts a user purchasing a single product, while the second flow chart follows the user as they navigate through the PC building tool.

04/Prototype - Designing

Concept Sketches & Wireframes

Continuing the ideation process, I sketched out lo-fi wireframes for the website to appeal to the user in both appearance and functionality. My goal was to create a simplistic layout and to utilize white space.

I looked at competitor sites, Razer and HyperX, for design patterns that current PC shoppers are acquainted with. I noticed that Razers’ website utilized their core colors of black, grey, and green, but with the lack of contrast the site looked too busy. To avoid this, I designed my wireframes to utilize white space so customers would be drawn to key features and be able to navigate the site efficiently.

Lo-fi Usability Study

I tested the low fidelity prototype on five participants. My goals for this study were to observe the desired flow path and uncover user expectations. As participants completed the flow path, I spoke with them to gauge their feelings, pain points, and expectations.

  • Compatibility Search: Participants liked the specific function to shop for compatible products.

  • PC Builder: Participants liked the idea of the PC builder, but they were interested in dedicated places to find more information about each product in order to make more educated purchases.

Final Design

I reworked my designs following the lo-fi prototype usability study to consider the participants’ concerns and needs.

I revised both product screens and PC building pages so users could opt for more information if needed. I also included back arrow buttons for each page in case users did not want to commit to the task flow, and had an option to go back a step, instead of restarting at the home page.

05/Test - Testing the Final Prototype

Hi-fi Usability Test

I tested the high fidelity prototype on five participants. Two participants had taken the lo-fi usability test, while the other three did not. The task I provided for this study was to shop for a PC case compatible with a pre-owned CORSAIR iCUE AR120 fan.

  • Overall Experience: Participants stated that the flow was simple and they knew where to start right away.

  • Compatibility Search: Participants liked the function but stated that results should be listed from most compatible to least compatible. They also said a function to filter price ranges, colors, brands, etc. would be optimal for the search feature.

  • Recommended Options: Participants thought recommended options should be displayed alongside selected products, and that they would be interested in a specific section with other compatible products to the selected item.

Priority Revisions

For the final revisions, I accounted for the participants concerns from the hi-fi usability test and implemented them into the fully revised final design.

View Final Prototype

Reflections, Take Aways, & Next Steps

The users who participated in my study showed that small changes can impact a user’s shopping experience entirely. The overall goal of this project was to remove the user’s need for prior research before purchasing a product. The usability test made me realize I had underestimated the amount of information users desire when purchasing PC-related products. It was extremely rewarding to see positive feedback on the PC-building feature that was aimed to fix a real problem many PC users have.

Although this was a personal project, observing the participants’ real concerns and needs makes me hope that this design could be implemented on an existing company’s platform.

This project concluded after the second round of testing, but if I were to continue, I would integrate specific pages dedicated to educating the user as well as expand on the search compatibilities filter and sort function. I would also explore additional features, such as a 24/7 chat in which professionals could give advice and feedback in real time.