Mobius

Shop smarter, not harder

Shop any time, from any device, from home

Overview

Background

Role

Product Design (UX/UI)

Role

Role

12 weeks - 110+ hours

Figma/Photoshop

The e-commerce segment of the computer gaming hardware industry is experiencing significant growth, driven by increasing demand for high-performance gaming equipment and the convenience of online shopping. Expected to grow from $59 billion in 2024 to $62 billion in 2025, indicating a steady increase in consumer spending on gaming desktops and laptops.

Problem

E-commerce and online shopping have revolutionized retail, but consumers still encounter various challenges when buying products or services online. Product quality and authenticity issues are common with computer hardware.

Project Goals

Build a successful e-commerce website catered towards the online gaming community. This can be achieved by several factors which include: Ensuring the platform can handle growth in traffic and inventory as well as ensuring the website works seamlessly on all devices.

Empathize - Understanding the User

Overview

Background

• Research Proposal

To better understand user frustration, needs, and requirements that gamers and the online community face when purchasing merchandise and accessories online, I conducted research through interviews and user surveys for my project. My goal was to gain insights to understand the processes users go through to find and purchase their products online through their mobile and web devices.
Because of the limited time frame I had to work with, I chose to conduct qualitative research rather than quantitative.
The research process had the following goals:

• Explore and identify patterns of how users shop for gaming-related products.

• Identify key consumer needs and motivations when purchasing gaming-related products online.

• Test prototype concepts for a gamer-centric e-commerce experience (UX, branding, and community features).

• Customer Interviews

Customer Interviews

I recruited 3 participants who need to purchase gaming accessories and merchandise within the last several weeks. Along with gaining insight about how they shopped for the products, I also inquired about their experiences searching and purchasing these items -- what process they go through to select certain peripherals, their frustrations throughout the process, and what factors they take into account. The following is a summary of their experiences:

Counterfeit or Low-quality Items

All the participants purchased their items online or through a mobile application these days. All of the participants said they worry about knock-off brands, especially for popular peripherals. Many of them preferred seeing merchandise that were officially endorsed by game studios or esports teams to instill trust and authenticity.

Incomplete technical specs

A majority of the participants mentioned that they often struggle to confirm if an accessory works with their system. Furthermore, they mentioned many products missing key details on features such as switch type, latency, and other hardware related issues left them confused and hesitant to make purchases.

User Experience and Checkout Issues

All the participants agreed that a large hurdle with certain outdated websites is the poor navigation, too many pop-ups and ads, and “non-gamer” aesthetics break the immersion and authenticity of the website. In addition, having too many steps or a complicated checkout flow created confusion and hesitancy in the check-out process. Also, making sure there aren’t slow load times.

The biggest takeaway from all the participants is that shoppers want the experience to reflect that of their identity and not just another tech store. They want the market to work with brands that both understand them, their community, and their culture.

Define - Substantiating User Needs

Overview

• Persona Development

• Problem Statements

Developing Persona

Based on my observations, I noticed some trends among my participants. They showed an interest in purchasing new merchandise, yet many felt uneasy about the authenticity of branded items available online. A major concern was that numerous websites lacked detailed product descriptions, which would assist in determining compatibility with newer hardware. Furthermore, my research revealed that products featuring verified-brand partnerships and “official partner” tags instilled a sense of confidence and trust among users. This insight inspired me to create a persona named Alex Martinez.

Alex is a college student who likes to stream on Twitch in his free time. As a professional streamer, he looks to wear gear that looks stylish and professional on camera.

Alex being a professional streamer often finds himself trying to update his peripherals and gadgets to stay up to date with the latest tech trends. He finds it hard sometimes to verify the authenticity of branded gear online. He wants accessories that are both functional and aesthetic. In order to compete with other popular streamers he’s always reading reviews on the best products that are currently out and trending. He appreciates websites that offer verified brands and transparent specs. He also likes having personalized recommendations for gamers.

Ideate - Creating the Framework

Overview

• Ideation

• Storyboarding

Developing Persona

To build on my brainstorming, I began by first taking the ideas that were forming in my research phase. I did rough sketches with interval breaks in between each drawing.

• User flow

Storyboarding

During my Storyboarding process, I continued to sketch drawings with design layout and functionality aspects into consideration.

Userflow

Prototyping - Creating the Design

Overview

• Wireframes

• Branding

• UI Components

• Final Design

Wireframes

While creating my wireframes, I wanted to see what type of products and components users felt the most drawn to and familiar with. I noticed a majority of the merchandise had a filtering system so users can simplify their search and make the process more efficient and seamless.

After going through several iteractions and pinpointing repetitive issues I began working on making a clear navigation so users don’t waste time struggling to find specific items. Also, making sure the check-out process is quick and painless to limit user and customer drop-offs and abandoned carts.

Low Fidelity Prototype Testing

I ran a test with the low-fidelity prototype, involving several participants. Many of the ideas I developed during brainstorming didn’t quite come out as I had anticipated. During the testing sessions, I encouraged participants to share their expectations. After they experienced the prototype, I presented a variety of concepts I had considered during its development, hoping to receive more insightful feedback.

I had a wealth of ideas I wanted to weave into my design. Testing the prototype was incredibly helpful, enabling me to refine my concepts and focus on the most important aspects.

• Avoiding Sensory Overload - Many of the participants mentioned they enjoyed the simplicity of the layout and not having too many images and texts all over the homepage.

• Search Bar - All participants felt that having the search bar at the top of the homepage made it easy and efficient to quickly search for products and accessories they were interested in at the time.

• Frequently Asked Questions - One of the most popular feature which all participants unanimously agreed on was the frequently asked questions. With a lot of the same questions always being asked, many of the users felt that having a section dedicated to a lot of these inquiries helped build efficacy and trust.

Branding, Style, and Aesthetics

For this project, I aimed to create a brand and aesthetic that resonates with today’s computer and online gaming fans. To achieve this, I chose a monochromatic color palette featuring shades of blue and navy, which convey a sense of trustworthiness and expertise.

Final Design

Filter Selection Screen

Product Specifications

Filter Selection

When I was developing the site I wanted it to be as efficient as possible. In order to do so, I decided to add a filter selection with specific criteria to help users filter their desired specs.

Furthermore, I added clear photos with no background to ensure perfect visibility and clear transparency.

Users have the option to select through hardware type, media type, colors, etc.

Product Specification Screen

The purpose of having a product specification screen is to allow complete transparency.

I wanted to empower users to be able to see specific product details regarding size, color, hardware, and software compatibility.

Having this transparency creates trust and increases efficiency for users so there isn’t any confusion regarding software and hard compatibility issues down the line.

High-Fidelity Prototype

Testing - Testing the Prototype

Overview

• Usability Test Findings

• Priority Revisions

• Next Steps

• Final Design

Usability Test Findings

I conducted tests with my high-fidelity prototype involving five different participants. Out of these, three approached the application for the first time, as they hadn't engaged during the low-fidelity prototype testing. The objective of this prototype was to allow users to search for and purchase gaming equipment through the app. Everyone completed the task.

• Overall Experience - The participants said they enjoyed using the application and had no issues checking out from start to finish.

• Customer Support - Two participants mentioned that they would’ve liked a detailed customer support page with a search bar for questions.

• Firmware Updates - Three participant said they would’ve preferred having firmware and software updates available for all the merchandise sold on the website.

• Community Page - All participants mentioned the need for a community page to help foster the online gaming community. They felt that seeing available partnerships and upcoming events helped bring more the community together and users would feel more inclusive with a wider audience.

Revisions