A Shop Called Quest
OVERVIEW
A Shop Called Quest™ has been an independent retailer focusing on presenting a personal curation of comic books, graphic novels, gaming, apparel, and collectibles for the last 25 years. I redesigned their website to improve navigation and user flow efficiency by creating a new sitemap and interface design.
Project Focus
Redesigning ecommerce website
Role
UX Designer, UI Designer, Research, Digital Wireframing, Interviews
Platform
Desktop
Duration
Two Weeks
The Challenge
Users had difficulty navigating throughout the website and filtering the search to find what they needed. The overall design of the website was overwhelming to users.
Tools
Real time board, Sketch, InVision, Adobe Illustrator, Whiteboard
The Solution
To create a quick, easy and efficient online shopping experience for customers by redesigning the website to improve navigation, information architecture and checkout flow.
PROCESS
Research
Synthesis
Ideation
Iterative Design
RESEARCH
Heuristic Evaluation
I started researching the issues of current website by running a heuristic evaluation from current website to understand issues, violations and severity. I found 18 violations in the website and some of the important issues were lack of quantity box on the product page, dysfunctional language menu and highlighting sold out items which violate efficiency, learnability, satisfaction and error management.
C&C Analysis
In order to understand opportunities and standards that other websites have, I created a C&C analysis of competitor websites. Some of the features that were important in other e-commerce websites were product review, best seller, coupon code, closeout/sale section and wish list.
Task Analysis
I conducted 3 task analysis and interviews of checkout process from their current website to understand user’s pain points and goals. All users had the same issue with navigating through the website and finding products.
“Good experience of purchasing is when it goes quickly”
Current Website Screens
Here are home page, product’s page and checkout screen from A Shop Called Quest current website.
SYNTHESIS
Affinity Mapping
I applied affinity mapping to the data I gathered from the task analysis. This process allowed me to find similar insights. Here are some of my key findings.
Persona
After researching users, I pulled insights from the users interviews and identified the common issues within all users to create a persona; Sara who enjoys games and comic books ever since she was a kid, likes to shop online because she doesn’t have enough time to shop in person at the store.
Scenario
It’s Jason’s birthday next week and Sara wants to surprise him with a video game themed birthday party. She feels stressed because it’s during her finals and she has to find a good website to buy some posters, stickers and a nice gift for Jason.
Problem Statement
Sara has a final math exam tomorrow and she doesn’t have enough time but she wants to order a gift and some stickers for Jason’s birthday. She goes to A Shop Called Quest website but She can’t find an easier way to add multiple quantities of the same item to her cart. Most of the items shows as sold out after she proceed to checkout.
How can we make Sara’s search and purchase process easier?
User Journey Map
I created a user journey map for Sara going through A Shop Called Quest to identify her pain points and goal.
IDEATION
Feature prioritization:
I used this method to prioritize features categorized from low effort/expense to high effort/expense and from essential to nice to have. This method allows us to find the features that we want to focus on based off of the stakeholder’s budget and time. For this project I focused on low effort/expense and essential area to redesign A Shop Called Quest website.
Card Sorting
I did four open and close card sorting with different users as a research tool for information architecture. Also to understand how others organize information. Here are some of the key findings.
-
Location shouldn’t be in the main top navigation bar
-
Collection should be on separate category than product
-
Sale items and what's new shouldn’t be mix with other categories
-
Organizing filter by creating different categories
Site Map
Bases on the card sorting, I redesigned the site map for A Shop Called Quest so the users can navigate through it easier.
User Flow
I reduced five steps from the user flow by adding a pop-up window to give the option of staying on the same page to users if they want to add another item to their cart.
Sketching Wireframes
After developing new sitemap and user flow for redesigning A Shop Called Quest, I started the redesign process by sketching early wireframes to visualize the user flow.
Digitizing Wireframes
I digitized these sketches to medium fidelity wireframes.
NEXT STEPS
-
Testing and iterating the filter option
-
Creating a coupon code for people when they sign up with email
-
Clear way of showing the sold out items and update the data daily
-
Testing the search feature on the website to find items easier