Responsive E-Commerce Design
Current Homepage (Before)
Redesigned Homepage (AFTER)
Bros Game Shop
Timeline: One Month
Tools: Sketch, Invision, Miro, Zoom
Responsive E-Commerce Design
My Role: UX Research & Design
*all research was conducted remotely through zoom due to Covid-19
[Concept Project]
Scroll ↓
Project Overview
During this project, I was able to update and redesign Bros Game Shop’s e-commerce user experience. Through vast user research, I was able to hypothesize problems and solutions to form a modern day responsive web experience, while still preserving their vintage small shop vibes.
Problem
Bros Game shop currently has an e-commerce website with plenty of visitors yet few completed orders. They want to keep their “small shop” brand image while showcasing their products online more efficiently.
Hypothesis
By creating an updated and modern user-centered e-commerce website that allows a quick and simple way to find and then purchase new games and accessories online, Bros Game Shop will see an increase in online sales and repeat e-commerce customers.
Solution
Highlight best sellers on homepage
Built trust with users through updated and maintained in stock alerts via product listing
Create a streamlined check out process in order to not lose customers due to a time consuming check out process
Allow users a way to save their payment info for future purchases
But how did I get there?
RESEARCH METHODS:
User Interviews
Comparative and Competitive Analysis
Customer Journey Mapping
Task Analysis
Developing User Persona
Affinity Mapping
User Testing
INITIAL RESEARCH
When starting my research I conducted several remote users interviews. These interviews helped me formulate a baseline for where the website currently was at. By observing the interviewees during contextual inquiries and user tasks, I was able to gain a better understanding of what the users current frustrations were and was able to empathize more with their pain points. I also completed an in-depth comparative and competitive analysis, looking at both direct and indirect competitors, to learn more about what features they were currently implementing successfully.
I wondered- what was causing their users to currently fail on the Bros Game Shop site? Post interviews and analysis, I was now able to pin point several glaring issues within the current Bros Game Shop e-commerce experience such as the inability to fully check out, out of date stock lists, confusing navigation menus and more.
User Interview Insights
“ I wish there were images to go with product and price information ”
“ Not specific enough information to know what they currently have in stock ”
“ I read reviews before purchasing”
Key User Interview Findings
users consistently mentioned that they want a way to save their information for future check outs
highlighted the need for several payment types to be available
(Paypal, Credit Card, etc.)
users expressed content when describing current user check out flows on platforms like amazon and highlighted the need for a seamless and short check out experience
After organizing the users quotes and responses into groups by user habits and frustrations, I was able to formulate a primary user persona to help drive my design decisions moving forward.
Synthesizing the user research also helped me hypothesize several key questions:
How might we design a way for users to save their information for future check outs?
How might we create an online check out experience with options for method of payment?
How might we create an online check out experience with options for method of payment?
Competitive Analysis
A common comment I heard when users were initially introduced to Bros Game Shop’s current website was that it looked like it hadn’t been updated since the 90’s. While nostalgic, it was time to bring Bros Game Shop into the 21st century!
To gain a better picture of what was market standard for a gaming e-commerce website, I analyzed the site features from two big box gaming stores and a local small shop that was similar to Bros Game Shop.
It was interesting to see the main areas that Bros Game Shop was lacking:
ability to create a customer account
search bar
no shopping cart/check out
Design
Rough sketches of possible home page and product page layouts focusing on the highlighted areas of need from user research.
Redesigned elements:
search bar
ability to create user account
bread crumb navigation on product pages
calls to action on homepage
Mobile Wireframes
customers are now able to create an account for quick check out during future purchases
ability to shop via homepage by concise categories
the added search bar affords the user several routes to find their desired product
Prototype
Usability Testing Key Takeaways
3 usability tests were conducted remotely via zoom due to Covid-19
User Prompt: You want to purchase the newest animal crossing release for your Nintendo Switch and check out as a guest.
all three users searched for products in different ways (search bar, category image, & products drop down menu) which highlighted the need for multiple, simple, user flows to quickly navigate to their desire product of choice.
users responded well to games being listed by gaming system vs. in a shop all section
several customers mentioned they would like addition of youtube or video links reviewing the games so they could have more information about each game before selecting which one to purchase
Learning Opportunities & Next Steps
After completing user testing, I discovered the need for a few updates within the check out process.
The current redesign was lacking a back navigation button during the check out process which provided another layer of confusion if a user made a mistake during check out.
Due to the short nature of this design sprint, I was also only able to conduct one round of usability testing.
If provided more time, my next steps would be to iterate on these designs to include updates from the second round of usability testing, as well as bring the prototype to full scale mock ups.