Home2.jpg

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-1.png
Ideation-1.png

Research

Synthesis

Synthesis-1.png
Design-1.png

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.

HeuristicEvaluation-01.jpg

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.

C&C-FeatureAnalysis-new-01.jpg

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.

website1-01-01.jpg
 
website2-01.jpg

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.

Affinity-Mapping.png

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.

ashopcalledquest-P2-04.jpg

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. 

UserJourneyMap-01.jpg
 

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.

FeaturePrioritization-01-01.jpg

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

CARD-SORTING-OPEN.png

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.  

New-SiteMap1
New-SiteMap1

press to zoom
Current-SiteMap
Current-SiteMap

press to zoom
New-SiteMap1
New-SiteMap1

press to zoom
1/2

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.

New-UserFlow
New-UserFlow

press to zoom
Current-UserFlow
Current-UserFlow

press to zoom
New-UserFlow
New-UserFlow

press to zoom
1/2

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.

Wireframes-Sketches-01.jpg

Digitizing Wireframes

I digitized these sketches to medium fidelity wireframes.

 
MediumFi-Wireframes.jpg

ITERATIVE DESIGN

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.

Home-HiFi.jpg
Filter-HiFi.jpg
AddItem-HiFi.jpg
Payment-HiFi.jpg

Here is our clickable prototype

 

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