A Shop Called Quest
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.
Redesigning ecommerce website
UX Designer, UI Designer, Research, Digital Wireframing, Interviews
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.
Real time board, Sketch, InVision, Adobe Illustrator, Whiteboard
To create a quick, easy and efficient online shopping experience for customers by redesigning the website to improve navigation, information architecture and checkout flow.
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.
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.
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.
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.
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.
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.
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.
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.
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
Bases on the card sorting, I redesigned the site map for A Shop Called Quest so the users can navigate through it easier.
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.
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.
I digitized these sketches to medium fidelity wireframes.
Hi Fidelity Wireframing
I continued this process by adding colors, images and font style to create high fidelity mockups. I conducted usability tests at this stage and made small changes based on the feedback I received from users.
Here is our clickable prototype
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