A responsive website that enables gamers to purchase and compare gaming equipment.
.png)
The problem
Hypothesis
Objectives
Gamers often need to purchase costly equipment, yet many products on the market offer limited user feedback or products comparisons on product pages, making informed decisions challenging.
To understand users feelings and design a responsive website that enables users to easily compare similar products, displaying customer ratings for more informed decision-making
I hypothesize that by gathering data on users' feelings on current products, we can gain valuable insights to create a responsive design that addresses the problems found.
Methods
-
Emphatizing users and opinions about current products: 1-on-1 interviews
-
Designing a prototype that solves the issues found: wireframing and prototyping
-
Testing the prototype: usability studies
Empathizing and defining
User interviews
I conducted interviews to users ranging from 16 to 40 years old to gather information about their experience and main problems encountered when buying new gaming equipment.
The results showed that, although some users don't find difficulties when acquiring new products due to their technical knowledge, most of them doubt when comparing similar products and end up choosing one randomly. Half of them disclaim that in some websites costumers opinions aren't shown, so they must collect them from other websites or forums to get real feedback.
Similarity between products
Not being able to easily compare similar products. The view of a table comparing similar products could be very helpful for users without a robust technical knowledge.
Lack of costumers' opinions
Not being able to read costumers' opinions on the same webpage. The view of an "Opinions" section could help them gain trust and knowledge about how products work.
Ideating and prototyping
Paper wireframes: When designing the Home Screen wireframe, I focused on creating a simple but an aesthetic design, focusing on showcasing some of the best products that the website offers. I really likedthe main image displaying a main product with a call-to-action button in it and the images of different products with their ratings according to costumers.
Digital wireframes: The objective was to create a curated and user-friendly Home page.
Hero image displaying the newest product released with a call-to-action button to buy it.
The best-sellers are shown including costumers' ratings.
Usability studies: I conducted two unmonitored usability studies using the low-fidelity prototype to assess whether users have difficulties on adding items to the cart and comparing technical details between some products.
The main insights that I found that resulted in some iterations were:
-
Users disliked seeing the costumers' ratings in the homepage. Some commented that although this is an important factor when choosing a product, it distracts them. Instead, a good clarifying name for each product would be enough.
After the usability study
-
Users disclaimed the lack of additional products that could be offered in a pack after selecting one product. Given the technical complexity of gamers equipment, it is helpful to see which products are used in combination to guide users.
Before the usability study
After the usability study
Main mockups
Testing
Prompts to test the hi-fi prototype
1
We want to buy the EchoStrike headphones. Click on "Buy now".
2
Clink on "Compare" to overview technical differences between products.
3
We still want to buy the EchoStrike headphones. Click "Add to the cart".
4
Click "Pay" on the two following pages, carefully checking the detail
5
Return to the Home page.
Try the hi-fi prototype here