INTRO
This hypothetical E-commerce platform was designed as part of the Google UX Design program.
ROLE
Sole UX/UI Designer
DURATION
5 weeks
This case study is divided into four primary sections:
intro, research, design, and mockups.
A reflection is presented at the end.
Narrated walkthrough of the mobile prototype for RetroInfinite
Narrated walkthrough of the desktop prototype for RetroInfinite
Problem
Retro gaming is a niche hobby that can be difficult to get into. Existing enthusiasts source their hobby from two different marketplaces:
physical retailers and third-party online sellers.
​
Physical retailers - while verified sellers - have limited inventory, no online storefront, and customers must be within proximity to them to shop.
​
Third-party online sellers on sites like eBay are not always verified/reliable, which can lead to frustrating experiences with inaccurate product descriptions, poor delivery, or damaged goods.
​
Both options can negatively impact satisfaction and retention for existing enthusiasts and the barrier to entry for new users.
Solution
RetroInfinite will be designed for both marketplaces.
It will connect users to their local retro gaming retailers while also offering its own online inventory. This will make shopping for the hobby user-friendly, trustworthy, and more discoverable for newcomers, filling a gap in the market.
RESEARCH
Due to a lack of market data on retro video games, I chose a qualitative research approach over a quantitative one. I then conducted interviews to gauge prospective user’s pain points and needs.
Participants
8
Demographic
Ages 19 - 44
Retro Gamer
New - Enthusiast
Following the interviews, I created two user personas, interviewed a subject matter expert (SME), and conducted a competitive audit of one direct and one indirect competitor to wrap up my initial research.
Interview Questions
Findings
1. Familiarity with retro games
2. Online vs In-store
3. Preferred Sites/Retailers
4. When browsing hardware online, the primary difficulties expressed were a lack of seller verification, product integrity, and discoverability.
5. When browsing in-store, pros included the in-store experience/atmosphere and asking staff questions.
​
Cons included the lack of online convenience, time spent traveling, and sub-optimal inventory.
6. Regarding the hobby's barrier to entry, primary themes included the discoverability of retro hardware, access to information on retro hardware, and trustworthy marketplaces.
1. How familiar are you with retro video games? 2. In general, do you prefer shopping online or in-store, and why? 3. Which site/physical retailer, if any, do you currently prefer for browsing retro gaming hardware? 4. What difficulties do you experience when browsing retro gaming hardware online? 5. What do you like/dislike about browsing a physical retro gaming retailer? â—¦ If not applicable, what deters you from or prevents you from shopping at a physical retailer? 6. With this hobby, what would you consider the greatest barrier to entry?
After organizing my findings, I determined that implementing an option to browse in-store inventory online was worth consideration.
​
I asked a follow-up question to each interviewee regarding this, and their responses confirmed that an option to browse and order pickup for physical retailers online would effectively bridge the gap between both marketplaces.
User Personas
I placed emphasis on constructing user personas and context scenarios in order to identify users' goals before any lasting design efforts were made. In this section, I identify two primary personas, both essential to building an intuitive experience.
Context Scenario
Chase enjoys visiting his local retro gaming store to browse games and consoles, chat with employees, and to feel like a kid in a candy store again. He has been hunting for a special edition Nintendo 64 console for some time, but does not have the luxury of checking frequently enough to catch updates to their inventory. On his most recent visit, an employee mentioned the store would be using a site called RetroInfinite to host their inventory online and offer in-store pickup. Weeks later, on his lunch break, Chase finds the console he's been looking for listed on RetroInfinite by his local retailer. He wastes no time in purchasing it online, reserving the console for pickup on the weekend.
Context Scenario
Lexi enjoys playing video games as a means of relaxation. Lately, she has been curious about getting into retro video games, but she is daunted by the sheer number of consoles and games and the lack of decent options to browse them online. After discovering RetroInfinite, her worries are dispersed as the site makes browsing its inventory easy and fully customizable. Furthermore, she discovers game retailers that are local to her area and finds the site's relevant recommendations helpful in gathering the hardware she needs. Pleased, she embarks on a new journey into retro gaming.
SME Interview
I believed that the in-store experience for retro games warranted further research. To this end, I contacted and arranged an interview with the manager of Another Castle, a local retro gaming store in Lynnwood, WA.
Q: You’ve been in business since 2014 and have since opened other locations across the state. Is there a particular driver for your continued growth?
​
A: Indirectly, I’d say the internet. It keeps retro gaming cemented in popular culture, and what with all of the streamers and discord communities nowadays, more and more people are exposed to these games and consoles.
​
Q: Is there anything in particular you think should be avoided on a website like RetroInfinite?
​
A: The format of sites like eBay or garage-sale style marketplaces like OfferUp. No auctions, no unverified sellers. I’d also be wary of knockoff products and third-party controllers, cables, etc. If you sell those, it needs to be clear they’re not OEM (original equipment manufacturer).
Q: Do you believe your business could benefit from an online storefront?
​
A: Managing an online inventory is a big undertaking, and as a business we’re not there yet. But if we had one, yes, I think we could reach more people and grow the business.
​
Q: What do you think is a common way to get people who are unfamiliar with the hobby into it?
​
A: Just show them different games from older systems. Everyone knows who Donkey Kong is, but a lot of kids have never played his solo games, like Donkey Kong64 or Donkey Kong Country. The games may be old graphically, but their quality easily holds up today.
Competitive Audit
8-Bit Legacy - Direct Competitor
-
Information architecture (IA) is unclear; browsing by a brand only shows the games associated with it, not the consoles. Consoles are relegated to their own section and lack filtering by brand.
-
UI is lackluster, user control and freedom is minimal.
-
Minimal to no product information for a majority of products.
-
Checkout is straightforward.
-
Lacks accessibility options.
eBay - Indirect Competitor
-
Many unverified sellers. User is always dealing with anonymous individuals, not retailers.
-
Retro gaming hardware is often sold in a bundle/lot, not individually.
-
Visibility of system status on all pages.
-
Plethora of filter options when browsing products.
-
Easy to navigate, straightforward UI.
-
Checkout is aesthetic and straightforward.
-
Has some accessibility options.
Takeaways
​1. Ensuring IA is clear and site content easily traversable will provide a seamless and satisfying shopping experience. ◦ Visibility of system status will further contribute to this.​ 2. Strong and universal UI will help maximize user control and freedom. 3. Incorporating relevant and customizable filter options will improve the user journey. 4. Implementing seller verification will directly address a user pain point. 5. A secure and simple checkout will contribute to a satisfying shopping experience. 6. Incorporating accessibility options may address future user pain points.
DESIGN
Per the Google UX Design program's instructions, I followed a desktop-first approach in designing RetroInfinite's screens.
My design process consisted of creating a sitemap, keypath scenarios, wireframes, a low-fidelity prototype for both desktop and mobile, usability testing, and two high-fidelity prototypes.
Sitemap
My first step in the project's design phase was creating a sitemap. This ensured I had nailed the site’s information architecture and prioritized user-focused flows before beginning wireframes and prototyping.
Keypath Scenarios
Wireframes
Lo-Fidelity Prototype
Both prototypes allow the user to follow either keypath scenario outlined prior.
Usability Study
Using the same interviewees from my initial research, I had participants complete both keypath scenarios on the desktop and mobile prototypes.
​
My goal was to receive feedback on the user flow, understand how participants interacted differently between the prototypes, and learn if pain points had been addressed so far.
Participants
8
Methodology
Unmoderated
Location
Remote
Findings
Participants noted that seller name and verification were absent, which was a pain point established previously during research.
While participants found browsing a local retro gaming store’s inventory online appealing, they expressed frustration that its functionality was restricted to the homepage on both mobile and desktop.
On mobile, browsing by category was relegated to the hamburger menu, which participants noted was confusing and not intuitive.
MOCKUPS
For the project’s mockups, a few things needed to happen:​​
​
-
The site’s brand identity had to be developed. My choice of color was most important in this step, as it would reinforce the brand identity and impact the user experience.
-
I needed to incorporate feedback from my usability study.
-
Accessibility options needed to be implemented. I added a dark mode as it is a popular and beneficial option for users.
1. Brand Identity
Throughout the 1990s and early 2000s, the standard for a controller’s primary button scheme consisted of red, yellow, green, and blue. This scheme was so widespread that some modern gaming controllers still use it today.
​
Knowing this, I decided RetroInfinite's color palette would consist of these four colors. They would signify various functions or states on the site to the user, reinforcing the brand identity.
2. Revisions
First, I addressed the lack of seller verification for products.
Under product descriptions, a verification symbol followed by the seller's name is now displayed.
Second, the browse local function was added across screens to improve visibility.
A small banner version of the function appears at the top of every search page and updates to reflect the title of the shop whose inventory you are browsing.
Mobile appearance
Lastly, on mobile I added an option to browse categories on the homepage, increasing its visibility to users.
Originally, categories were only browsable via the hamburger menu, as shown on the left. Now they are additionally browsable via the homepage, beneath "Best Sellers".
3. Accessibility
I ensured all screens complied with the WCAG AA for color and contrast. Alt-text was also added to images across every screen using the Stark plugin for Figma.
Finally, I added a dark mode.
An example of the mobile app's toggle for dark mode.
An example of the alt-text added to mobile app's Browse Consoles screen.
Desktop Gallery
Mobile Gallery
Reflection
While this project was a beneficial step in furthering my understanding of UX design and its principles, if I could do it again, I would change several things in my approach.
First, I would gather a more diverse and unbiased set of research participants. My original participants were sourced through acquaintances, and while they were incredibly helpful, they were primarily already into the retro gaming hobby. As a result, I don't believe those new to the hobby were represented as well as they could be.
Second, I did not have time to conduct a second usability study after completing my high-fidelity prototypes. I believe this would have been valuable in confirming whether the project's user-focused goals - such as user-friendliness, discoverability, and accessibility - had been addressed, as well as establishing the next steps for the project.
Third, I would have liked to flesh out my prototypes further, such as allowing users to filter the products shown on screen, browse by other categories, and fully customize their cart. If implemented, these prototype improvements would better simulate RetroInfinite's intended functionality.