Chop Suey Books
Creating community, curation, and convenience for book buyers
For Figma link, click here.
Project Context:
2 Week Design Sprint
Web Redesign Project
Solo Project
Responsibilities
UX Research
UX Design
This was a solo project. I completed each stage of the project from concept through design phases.
PRIMARY PROBLEM
Chop Suey Books, a popular new and used bookstore in Richmond, VA, has no e-commerce function of its own. It is primarily a brick and mortar store that sells new books through a third party site. Its large and diverse selection of books are not available for purchase directly from the shop’s website.
This limits the business’ revenue stream mostly to those who can shop in person.
SECONDARY PROBLEM
The problem of independent booksellers getting edged out by big, online retailers is a familiar story. Besides the solving a problem for the client and the user and creating a functional e-commerce website, I considered the question:
How can Chop Suey Books continue to grow its business in a crowded marketplace of big retailers and book sellers?
THE SOLUTION
Adding a checkout process and inventory to create a reason why buyers would shop a local, independent book store over a major online retailer.
Capturing Chop Suey Books’ unique strength of knowledgeable staff recommendations and retaining the personality that makes books buyers shop there over big book sellers.
WHITE PAPER RESEARCH
By tapping into a larger social movement that promotes the value of shopping local and a desire to cultivate community, successful independent booksellers have been able to differentiate themselves from online and big box competitors.
Customers have come to recognize independent bookstores as a valuable form of brick-and-mortar retail in their communities.
Independent bookstore owners have also benefited from the tireless commitment of their employees, many of whom could find higher paying jobs elsewhere, but continue to work in bookstores because of their love of literature.
Calendar based events page helps buyers engage with the literary atmosphere that they value from independent booksellers
Shoppers can reserve events tickets ahead and socialize the event
Book shop buyers buy books based on the curated selection of books the local shop has to offer, rather than best selling lists.
A curated selection of subscription boxes that package new or used books from Chop Suey’s collection at a monthly rate.
Home screen features multiple points of interest for different types of users
Best of lists and book clubs for popular lit lovers
Staff recommendations for buyers of non-mainstream tastes
Access to genres and search functions for buyers with more specific searches
Options for in-store pick up or ship by mail purchases
Save and select favorite items to user account
COMPETITIVE ANALYSIS + THE GAP
These independent book sellers have similar offerings, but they don’t provide the recommendations of book store staff on their sites. Buyers have to go in to talk with them.
Because buyers value these recommendations, I decided to feature them prominently on the home screen with links to their recommendations.
Chop Suey Competitors
USER INTERVIEWS
Here’s what I learned from talking to 5 book shoppers:
RESEARCH QUESTIONS
I asked these questions to 20 book buyers:
Where do you buy books?
Why do you buy them from that place?
What kind of books do you like to buy?
Do you shop at small book stores? Why or why not?
What do you like or dislike about small books stores?
Do you shop at small bookstore websites?
MAIN INSIGHT
Customers have come to recognize independent bookstores as a valuable form of brick-and-mortar retail in their communities.
In addition to offering e-commerce features on par with competitors, Chop Suey Books’ business goals can include research and user findings into their brick and mortar business.
CONCLUSION
By tapping into a larger social movement that promotes the value of shopping local and a desire to cultivate community, successful independent booksellers have been able to differentiate themselves from online and big box competitors.
DESIGN
Starting with Lo-Fi wireframes, I built out the basics of Chop Suey Books. Here are some key screens:
Color adjustment to existing logo
Product Page
Staff Recommendation Page
Shopping Cart Wireframe
TESTING + IMPROVEMENTS
The biggest takeaway from user testing was understanding how differently people saw book categories and the variety of merchandise available from a book shop. I did a card sort to understand more about the lexicon of users and their mental maps. Understanding the information architecture was an important part of the planning for this product.
For example:
Some looked for best sellers under “Books”, other looked under Top Picks”
Users looked for information about location under the “About” page and others looked for it under “Contact”
THE FINAL PRODUCT
Original Website (left) and Redesigned Website (Right)
STYLE GUIDE
The biggest challenge in designing for Chop Suey Books was including their signature take out container logo and vivid color pallet of bright red, screaming yellow and black, with touches of blue.
I based my design on the shop’s quirky, retro personality. I was inspired by colors in pop art and the pulp fiction style (including the movie). I toned down the yellow color of the original logo to create a complementary yellow color to pair with the deep undertones of the red.
The brand’s advertisements have featured cartoon illustrations, so I used that theme to create a portrait of the shop’s mascot, Won Ton the cat. I also added a fun touch to the order confirmation screen by using their signature red and a yellow fortune cookie.
Ultimately, I dropped the color blue from my initial designs because the book covers created their own pallet of competing colors. I used a modern, white background to balance a variety of colors and help the user find CTA buttons more easier. I also dropped many of the CTA buttons from my original oval design to help the user find buttons among the many shapes and colors of the site. I also adjusted colors for accessibility.
FIGMA
CONCLUSIONS + LESSONS LEARNED
Information architecture can be a challenge. Learning how users thought about categories of books and other items like comic books was a puzzle. Do users think comic books will be under children’s books, graphic novels, art? It depends!
The merchandise is another piece of the product design. I was concerned that a white background would not hold up against bold the red and yellow brand colors. Once I added the images of the books, hero images, and banners, the white was really necessary to keep from overwhelming the user. I eliminated many buttons, and chose to have clickable images instead. I changed the buttons to square with clipped corners to keep them consistent with the many rectangles in the design. Clipped corners set them apart slightly.
Bold colors are tricky! I inherited a color scheme I probably wouldn't have chosen personally. Using them strategically to retain the brand personality took some trial and error. As with all things I do, research is key. I found inspiration that helped me envision how to make the colors work.
Check for accessibility in the planning phase. To cut down on adjustments, it would have been more efficient to evaluate the accessibility of the design before moving into prototyping.
NEXT STEPS
A curated selection of subscription boxes that package new or used books from Chop Suey’s collection at a monthly rate.
A buyer loyalty program for book shoppers to encourage purchases
Link to ratings database so buyers can benefit from the reach of larger retailers
A more extensive merchandise filter and inventory system to help buyers find new and used books faster
Based on the research and user comments, Chop Suey Books can also:
Create programming for children to build community
Create partnerships with local schools for to create lifetime engagement
Create event programming in partnership with local artists as an exhibition space