Crafting the Digital Soul of Chop Suey Books
How thoughtful UX design transformed Chop Suey Books’ website into a seamless, engaging shopping experience that reflects its unique identity and values
Role
UI Designer
Team
Chris Harley
(Solo)
Duration
Oct 2024
(1 wk. total)
OVERVIEW
Chop Suey Books Online: A Redesign to Connect Community and Convenience
Chop Suey Books is a quirky, independent bookstore in Richmond, Virginia’s Carytown district, known for its carefully curated selection of new and used books, literary events, and welcoming atmosphere. Despite being well-regarded in the community and frequented by loyal customers, the store’s eCommerce site was struggling to convert visitors into online customers. Chop Suey sought a website redesign that would maintain its small-shop appeal while providing a modern, seamless shopping experience.
PROBLEM STATEMENT
Turning Browsers into Buyers: Solving Chop Suey’s eCommerce Conversion Challenge
While Chop Suey Books’ website had a steady stream of visitors, few converted into paying customers. Users weren’t getting the detailed information they needed or experiencing the "local business" feel that sets Chop Suey apart. The goal was to redesign the eCommerce platform to better showcase Chop Suey’s unique brand and curated inventory, ultimately increasing online sales and capturing the in-store experience online.
USERS
Meet the Readers: Understanding Chop Suey’s Online Book Lovers
The primary users of Chop Suey Books’ eCommerce site were local and regional customers who valued the convenience of online shopping but still wanted to support a small, independent business. Two key personas emerged from research: the Careful Critic, a detail-oriented and patient shopper who seeks quality and well-curated selections to make informed purchases, and the Deal Diver, a budget-conscious shopper who enjoys finding the best value and is driven by discounts and special offer
ROLE
Crafting the Experience as the Sole UI Designer
I served as the sole UI designer for this one-week sprint. While I didn’t conduct the initial user research, I was responsible for empathizing with the provided data and user insights to fully understand the target audience’s needs. From there, I led the ideate, prototype, and test phases, independently handling competitive analysis, user flow development, and key design decisions.
CONSTRAINTS
Designing for Ease While Preserving Brand in a week
This project was completed within a one-week design sprint, with resources limited to the initial research and persona insights provided by the research team. The focus was clear: to create impactful eCommerce improvements that could boost conversions while preserving Chop Suey Books' unique, independent brand identity.
DESIGN PROCESS
Deep Diving into User Insights: Building Empathy from Data
I started by reviewing Chop Suey’s goals and analyzing the user research provided by the research team. From there, I identified key areas of improvement to help balance the store’s unique brand with users’ need for a better online experience. I performed a competitive analysis, looking at both large bookstores like Barnes & Noble and smaller independent sites like Powell’s, to gather ideas on effective eCommerce patterns.
Careful Critic Chris
- Takes time to make well-informed decisions, valuing detailed product descriptions and reviews.
- Motivated by high-quality selections and a desire to support local businesses
- Frustrated when they can't easily compare products or access detailed information
Deal Diver Diana
- Plans purchases, always seeking the best value and willing to wait for deals.
- Committed to saving for larger goals while still wanting to support local businesses.
- Unexpected fees and difficult-to-apply discounts hinder their shopping experience
Mapping the Path: Defining a Seamless Journey from Browse to Buy
Armed with clear insights into user needs and goals, I crafted user flows that would transform the shopping journey into a seamless experience from browsing to checkout. This process was all about uncovering the ideal path to showcase promotions, enrich product details, and streamline checkout, ensuring every click and scroll felt intuitive and satisfying.
From Ideas to Wireframes: Shaping the Vision for Chop Suey’s Online Experience
I began sketching initial layout ideas on paper to visualize ways to incorporate product details, deals, and a strong brand presence without overwhelming the user. After refining these sketches, I moved to digital wireframes in Figma, laying out the structure for a clean, user-centered design.
Bringing It to Life: Crafting a Polished, Brand-Driven Design
The final high-fidelity design effectively balanced Chop Suey’s unique brand with a smooth eCommerce experience. Visual elements, such as type and colors, reflected the cozy, indie bookstore feel, while streamlined functionality allowed users to browse, shop, and check out effortlessly.
