UX/UI Design | April 2022
Chop Suey Bookstore
Redesigning the eCommerce Bookshop experience while still maintaining the "small shop" appeal.
Overview
Creating A Seamless Experience For All
Chop Suey is a local bookstore that is located in Richmond, VA with a host of books ranging from art to philosophy. They found an opportunity to help their local community by offering their products online via their eCommerce bookstore, however, they did not see an increase in online sales.
This conceptual redesign of Chop Suey explores the challenges the company is facing and implements different features that allow users to make purchases online.
Project Details
Role:
UX/UI designer on a solo conceptual project
Tools:
Pen & Paper, Figma, Optimal Sorts, Google Suite, Maze
Timeline:
Two-Week Design Sprint
Problem Statement
At the onset of the pandemic, many businesses found an opportunity to support their customers online and enhance the shopping experience when users could not leave the house. Despite big names like Amazon and Barnes & Noble, Chop Suey wants to maintain the “small shop” appeal while continuing to build their online shopping experience.
Customers need a way to research and browse for books through the eCommerce bookshop in order to successfully make a purchase.
Hypothesis
I believe that if I redesign the organizational experience of the website by allowing users to research and browse products, then the company will see an increase in completed purchases.
The Why
According to Top Design Firms in 2021, 42% of people would leave a website due to poor accessibility of the web design. Despite Chop Suey’s efforts to build an online bookshop and garner many visitors to the site, they are not seeing any positive impact on their sales due to the design of their website.
Current Website
Business Goals
Redesigning the website would give individuals the opportunity to seamlessly navigate through the website and in turn drive overall sales for Chop Suey.
Research & Insights
Analyzing How Chop Suey Ranks Against Others
Before jumping into any solutions, I conducted research to identify:
-
areas of improvement for the company
-
how people are shopping online
-
what aspects are intuitive or difficult to understand
The following research methods helped me understand the playing field more:
1
C&C Analysis
Digging deeper into competitors and comparators in the space, I looked into how companies are simplifying the browsing process, providing clear product details, and using specific features to enhance the browsing and purchasing experience
2
Heuristic Analysis
To understand how Chop Suey's website complies with basic design usability principles and found their site had 9 violations
3
Card Sorting Analysis
Users were having trouble navigating through the current site, so I conducted two card sorting tests against 44 users to understand how they categorize and prioritize book topics and genres
Key Takeaways
After completing this analysis of Chop Suey's website, I identified the 4 pain points to be addressed in the final product:
UNCLEAR NAVIGATION
Users want an updated navigation including key elements such as "Best Sellers" and "Recommendations" to enhance their browsing experience
DESCRIPTION & REVIEWS
Displaying the product details above the fold and incorporating a feature that allows users to write and view other people's reviews are helpful to users when making a purchase decision
RECOMMENDATIONS
There were no recommendations based on what was relevant to users while browsing (such as viewing by author or topic), which in turn decreased user engagement on the site
RECENTLY VIEWED ITEMS
Allowing users to see their previously viewed items enables them to expand on their product search and overall decreases cart abandonment for the company
Persona
Putting It Into Perspective: Understanding Our User & Their Frustrations
Our target users were provided by the client which identified their characteristics and shopping behaviors.
CJ
"Careful Critic"
.jpg)
CJ takes the time to browse and research products to make well-informed purchase decisions
Sofia
"Spontaneous Selector"
Sofia loves to spend time looking for the most unique product to build her personal library
To dig a little deeper into their motivations and frustrations, I created a journey map for each persona based on details provided by the client.
.png)
.png)
Click to see more.
Key Takeaways
#1
These personas are mainly online shoppers and love to support local businesses, so this redesign is important to retain them
#2
They need expansive details on the products before making a purchase online
#3
Ability to easily find products through special recommendations are important in improving the browsing experience for our users
Concept & Design
Designing With Our Users In Mind
After analyzing all the website research and understanding the users, I proceeded to create pages in Figma with the following goals in mind:
Homepage
1. Improved Navigation
Navigation is organized in a way that makes sense to the user
2. Special Recommendations (Homepage)
Recommendations on the homepage allow users to see relevant topics to enhance their browsing experience (i.e. New Releases, Best Sellers, and Staff Picks)
Product Gallery Page
3. Browsing Options
Filters allow the user to view the products based on their preferences (i.e. list or grid view, price, ratings, etc.)
4. Faceted Navigation
Adding this feature allows users to navigate through different topics more efficiently
4. Special Recommendations (Product Page)
Intercepting users with recommendations related to the product they are currently viewing will keep the user engaged on the website
5. Product Details & Customer Reviews
Allowing users to see this information above the fold can allow them to make informed decisions when looking at a product
Checkout Page
6. Recently Viewed Items
Incorporating this feature gives users the ability to see previously viewed items that they can add to their cart at checkout
Testing
How Does It Work & What Can We Improve?
I conducted usability tests on the following tasks to understand how well the design works:
Task #1
Find a specific book through browsing by genre
Task #2
Find a specific book through search and filters
Task #3
Select a book to purchase after reading through product details and reviews
Task #4
Add an item to cart and complete the checkout process
75%
completed the search process with the use of filters
100%
found reading through the product details and customer reviews helpful
75%
successfully added an item to their cart and completed the checkout process
From Low-Fidelity To High-Fidelity
Performing these tests helped inform my next steps and where I had to make revisions.
Unclear Faceted Navigation
-
Problem: Users were finding it difficult to navigate to the product gallery page as the links did not look clickable
-
Solution: I included a hover/underline feature to show system status and allow users to see that these were clickable
1
Add To Cart Status
-
Problem: Users found it confusing when an item was added to cart, as there was no clear confirmation in the overlay
-
Solution: A callout was included when the overlay appears as a user adds an item
2
Final Prototype
A Deeper Look Into The Final Product
After some revisions, the high-fidelity prototype was created merging Chop Suey's goals with our target users' needs that redefines the online bookshop experience.
Future Roadmap
Reflections On My Journey
This solo project really allowed me to strengthen my skills across each step in the process. From research to design, I was able to see the story from the client and users’ perspectives and create a final product that I am proud of.
Needless to say, the journey was not perfect and there were definitely road bumps that I learned from that led me to the final product:
-
Time-Blocking Is Important: It was hard to know where to start from a design perspective because I wanted things to be perfect. I kept looking for inspiration to make Chop Suey's website different, but it took me forever to just get pen to paper and start sketching. I realized that I needed to give myself deadlines to keep myself on schedule and not overthink little things.
-
Test Early & Often: I know it's cliché to say this as a learning, but I wish I tested more in the beginning to really address those revisions in the final product.