Gaming Hub Microsite | A case study 🎮

The Brief

This project is a case study for the UX/UI immersive course at Misk Academy. Applying all that we learned so far to design a microsite for a local retailer that would focus on very specific users with 75–100 highly curated products from their current inventory. The goal of this project to working with the information architecture and interface design to produce a site that is easily navigable by the user and conveys the brand’s image.

The Team: Reham Alsuhaimi, Lamia Al beeybe, Omar Alharbi

Project Duration: 2 weeks

Tools: Miro, Figma, Google Forms, and Adobe illustrator

Project Phases

Problem Statement

First, I and my team started with brainstorming and desk research and we found that problem “Nowadays, the gaming equipment online market increased significantly since gamers are looking into enhancing their gaming experience regularly. However, our client is a local retailer (Noon) suffering from drop-down in gaming equipment sales due to the website being over-crowded with other products, and sellers incomplete product’s information.”

User Research & Insights

First, We did Screener to search for gamers they interest in our study and we found 47 responses, Twenty-seven of them are gamers. Then, we ask them Some questions:

What is your favorite gaming equipment?

Where do you buy your gaming equipments? Why do you prefer this website? or Why do you prefer this store?

Tell me about your experience buying gamers equipment online?

Do you prefer signing up in your favorite online store?

What customer service (live chat, email, phone) usually prefer?

Do you usually check for coupon/discount code before purchasing?

Do you like to share your moments on social media?

So, we drew some below insights from these answers:

  • Users want honest reviews with images
  • Users do not like sharing on Social Media Websites
  • Users will always look for discounts

Persona

Storyboards

Aziz’ controller broken that makes him so sad, and he was thinking he must order a new controller to continue his game so he searches on google about PS equipment and he found many websites he decided to goes Noon.com because it the best but he overwhelms by crowded things he doesn’t find what he wanted.

Business Analysis

Later on, it was time to learn about our competitors and do an analysis of them. We performed different methodologies for this part, including a leaf diagram, comparative and competitive table, market position, and layout comparison.

Noon’s Competitors

Insights:

Most of our customers will be using these websites/applications, and our product will hopefully provide them with similar features that can be found in competitors.

Based on our persona, our users are most likely social media users, which means sharing on SNS such as Twitter and Snapchat a huge factor to them.

Insights:

Some of our competitors are more of a mass-market than exclusive. However, after interviewing our users, many suffered from the website being over-crowded with products irrelevant to their interests. Therefore, our website will focus on a certain category.

Users Needs

  • Enhance browsing activity by re-defining the navigation
  • Enhancing purchasing by reading honest reviews
  • Quick check-out process (Guest Account)
  • Get discounts and promotions to redeem it on the website.

Business Needs

  • Increase its revenue from selling gaming equipment online.
  • Build customer loyalty with the user.
  • Increase brand reputation by social media sharing

Information Architecture

Once we knew what we wanted to include in the solution, we moved to create a sitemap. Information Architecture (IA) is a way of organizing a website or mobile application content to make it easier for users to find what they want.

Card Sorting

We gave the users some of the equipment products' names to classify them under the categories to know our users better.

Sitemap

After that, when we tested card sorting with the users we found this better sorting and the best way to nav.

The solution

Gaming Hub (by Noon)

Main Features:

  • Social Media Sharing.
  • Quick Checkout as a guest.
  • Points System when sharing products, first order, and leaving a review.
  • Enhanced Product Review.
  • Influencer’s Discount directly from influencer’s page.

Wireframe:

Task Flow:

Usability Testing

Once we designed the wireframe, we selected a number of users to test and provide us with their feedback. Below were common suggestions from the users:

  • Add additional information under the overview section
  • The user found the font way too small and asked to increase the font of the navigation menu

Prototype

After the wireframes and usability testing, we started working on the design and prototype using Figma. We decided to keep the dominating color of the website black, and we used yellow for the buttons. This way we were able to come up with a slightly changed design while keeping the brand’s identity.

The video below shows the journey of the user purchasing a product while highlighting the main features of our prototype.

Usability Testing

  • Users tried to access the Wishlist while they were in the cart.
  • The user enjoyed the points system and wanted to interact with the website more.

Note: you can definitely enjoy the prototype on your own by clicking 🎮!

Thank you for reading … 💜

--

--

--

UX/UI designer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Working @Fandom.com: SiteX

IronHack UX.UI: Final Project Ordotype

Make Content Part of Your Design Process for More Intuitive, Usable Digital Experiences

Underground Home for Birds

The Design W.R.A.P

10 Types of Aesthetics for 2021

10 Hidden Gems In Dropbox Paper

Image result for dropbox

Moving and Storage Gallery

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Reham Alsuhaimi

Reham Alsuhaimi

UX/UI designer.

More from Medium

How I managed to hack User accounts of a billion-dollar sport platform

2021 Firelight Year-in-Review: Program Highlights

Dual-boot Pop_OS! and Windows 11

Second year in Individual study: Web Development Edition