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 … 💜
