OVERVIEW
Users struggle to find gaming products and are often overwhelmed and frustrated with the current website user path to completing a purchase.
How might we help users efficiently select, customize a product with a quick checkout process?
Dell Gaming is a microsite that immerses users into the world of gaming while showcasing the product in an approachable way.
BACKGROUND
This project was for a UX Bootcamp in fall 2020. The ask was to design a microsite for an eCommerce platform that showcased their products in a new and innovative way.
ROLE
Product Designer
User Research
Visual Design
Prototyping
Copywriting
Testing
TIMELINE
4 weeks, December 2020
DESIGN PROCESS
We implemented the double diamond theory and lean UX process to guide our decision making and timeline. The goal was to incorporate discovery, definition, ideation, and implementation for this project.
UNDERSTANDING THE PROBLEM
Why gaming?
The video game industry brings in more revenue than the global movie and North American sports industries combined. So, our group decided that a microsite dedicated to Dell's gaming products would not only benefit the company's sales, but also create an all-inclusive shopping experience for their gaming audience.
First, we conducted a Heuristic Analysis on Dell's current gaming product section. We then tested it with users to see what their frustrations are. We found that their main frustration was with the checkout process. They often got confused and lost, unable to navigate back home if needed.
GATHERING INSIGHTS
Of the 90 users surveyed, we found
-
96% spend money on gaming products annually
-
53% said they game daily
-
73% considered themselves "casual gamers"
-
55 of the 90 spend up to $300 on gaming annually
We interviewed 3 users who consider themselves active gamers and found that they care most about
-
Having an overall simple shopping experience
-
Being able to compare products
-
Having a quick checkout process
Taking what we learned from our interviews and survey, we created an affinity diagram and an empathy map to define what our users needs are. We used these to create our user persona.
PRIORITIZING ISSUES
As a group, we compiled our user's pain points and gain creators to then plot on a Feature Prioritization Matrix. We decided on the features that would go in the initial prototype by assessing how frequent a feature was mentioned, as well as how realistic it was for us to build that feature. We concluded that the site must have:
-
Product Reviews
-
Search Bar
-
Compare Multiple Items
-
Build Your Own Bundle
WIREFRAMING
Information Architecture
First, we completed a card sort of Dell's current gaming section. We then reorganized it to create a navigation that would work well for the gaming microsite, while also adding the features we brainstormed, such as "Compare" and "Build Your Own Bundle". The goals of this sitemap was to make the navigation simpler, more focused on gaming, and ultimately cost effective with easy maintenance.
Pictured here are the low-fidelity wireframes for our first iteration of this microsite. Based on features and information architecture, we came up with a simple layout with the goal of easy navigation, highlighting gaming products, not over-crowding the page with specs, and a quick checkout process. We worked toward these goals by adding multiple tabs on the navbar and buttons to reduce the amount of text.
VALIDATING
The tasks we asked users to perform
-
Create an account
-
Find two items to add to "Compare" list
-
Build your own PC system
-
Add items to the cart and check out
User pain points with these tasks
-
Users wanted to see recommended items
-
They had a hard time navigating back home
-
They were confused between the "products" and "shop" tabs in the navigation bar
HIGH FIDELITY, DEVELOPMENT & ITERATIONS
In our hi-fidelity prototype, we resolved the user’s pain points from the lo-fi testing, aiming to make experience more intuitive.
-
We added recommended items in the "view product" pages
-
We added multiple paths back to the home page
-
We differentiated "products" and "shop" tabs by renaming them to "product brands" and "hardware"
We then tested our high-fidelity prototype with users to see how we could improve our next iteration
The tasks we asked users to perform
-
Create an account
-
Find two items to add to "Compare" list
-
Build your own PC system
-
Add items to the cart and check out
User pain points with these tasks
-
Users had a hard time finding the "Build your own PC System" tab and also found the naming of that feature confusing- they were sure if they were customizing a laptop or assembling a group of items
-
They found the design "boring and unoriginal"
After our high-fidelity test, we built a coded version of our site, making the following iterations:
-
Renaming “build your own pc” to “build your own bundle” and suggesting different item categories for the user to add to their customized bundle. Also added it to the “hardware” tab so it was easier to find.
-
Creating a new hero image that was more compelling and adding more areas with bright colors on a dark background to create “gaming feel”
We then tested the coded version and found that the users were confused with the sizing of items on the page, the call to action on certain buttons, and they found some bugs that we didn’t catch originally. So we made these iterations, which resulted in our final version demonstrated in this video.
RESULTS & TAKEAWAYS
Summary
We created this microsite to be a more streamlined version of the gaming products section of the original Dell website.
Our site is Dell’s version of a gaming product site - keeping their branding and functionality but adding those gaming site components. We drew inspiration from sites like Playstation & EA.
Although limited by our coding knowledge at the time of the sites creation, we were able to build something that is easy for users to navigate and gave the site more gaming character than the original Dell gaming section.
Future iterations
Continue to test and iterate the current design to improve interactions and experience for the users.
Add more complex animations
Implement backend coding - primarily focusing on
-
Use a database to display all dell gaming products
-
Keep track of the items added to cart and display the number of item in cart
-
Sign-in Authentication
-
Saving contact, shipping, and billing information for future purchases