Skillset

Flip to see the main skills used in this project

 

UI/UX Design

UX Research

Gamification

Design Thinking

Overview

The Problem:

Gamers need a convenient, one-stop shopping platform for purchasing gaming equipment.

The Goal:

Design a mobile app that offers an immersive online shopping experience tailored to gamers.

My Role:

UI/UX Designer

Information Architecture

Pain Points

Decentralized

Gaming equipment are scattered across many different vendors.

Unspecialized

Selection of products from a vendor are either too general or too brand-specific.

Out of place

Sense of disconnection when browsing for gaming-specific equipment.

Personas

Journey Maps

Wireframes

Mockups

HOME

HOME

MENU

MENU

PROFILE

PROFILE

PRODUCT1

PRODUCT1

PRODUCT2

PRODUCT2

CART

CART

PAYMENT

PAYMENT

CONFIRMATION

CONFIRMATION

Design Kit

Gaming Gears Design Kit

Prototype

Insights & Conclusion

Usability testing for this project uncovered key areas for improvement. In the first round, users expressed the need for an additional review page before finalizing their purchase, leading to its implementation in the next iteration of the design. They also sought clearer explanations of character stats in their profiles, which I addressed with detailed tooltips. Two users encountered difficulties during the payment process, in response to which I introduced a stepper at the top of the screen to help users track their progress. I also defined over a dozen local variables for the shopping cart so users can play around with it to their heart’s content.

In the second round of testing, one user remarked, “I really enjoyed the shopping experience; the gamified aspect was fun and I was able to learn about it in more detail as I explored the app.” This feedback validated our design approach. Additionally, accessibility was a priority, with a fly-out navigation menu being designed for better readability and color contrast ratios meeting WCAG standards.

In conclusion, this project managed to successfully balance user enjoyment with functional improvements to the online shopping experience. The next steps will involve a bottom-up (progressive enhancement) approach for compatibility with more devices, improved metrics for personalized recommendations, and continuing to optimize for accessibility and inclusivity.

Chris Chen Design footer logo with black calligraphy over pink paint-like background
Divider between footer logo and social media icons

Christopher Chen © 2024. All rights reserved.