For Figma link, click here.

This was a solo project. I completed each stage of the project from concept through design phases.

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.

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.

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:

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

1. 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!

2. 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.

3. 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.

4. 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.

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