Project Overview

 

Two-week solo design sprint while at General Assembly.

I took on the challenge of redesigning an outdated website for an independent bookstore located in Cambridge, Massachusetts. Rodney's bookstore is a charming neighborhood-centric place that managed to stay in business despite the industry takeover by E-commerce giants such as Barnes & Nobles, Amazon and Borders. The web design required balancing an efficient and contemporary E-commerce practice while conveying Rodney’s Bookstore’s competitive advantages. 

Project Type: Ecommerce Website

Design Toolkit: Paper & Marker | Post its | Sketch | Invision

Deliverables: Interviews & Affinity Mapping | Competitive Analysis Matrices | Card Sorting | Contextual Inquiry / Observation | Usability Testing | Site Map | User Flows


Research Phase

User Interviews

I kicked off the research by interviewing 10 customers from Rodney’s Bookstore and The Harvard Bookstore (another independent bookstore in Cambridge) to better understand their psyche when purchasing a book. I was particularly interested in pinpointing behavioral differences between shopping from a “mom & pop” business vs. larger retailers like Barnes & Nobles or Amazon as well as the differences between their in-person shopping experience vs. the online experience.

  • People want to browse bookstores when they don’t know what they want: When users were not sure what they wanted to read next, they preferred to browse books in person. Users found that seeing the books in context with other books, reading parts of books and touching the books were effective browsing experiences.
 
 
I’m hoping to stumble upon on a book for leisure.
— Larson
 
  • However, when people know what they want to purchase, they prefer to shop online: With the vast library of books that E-commerce sites provide and the virtually instant shop and deliver process, people prefer to shop online if they already know what they want/need to purchase.
 
You can’t beat the delivery time on Amazon. Plus, they have everything
— Kim
 
 
Affinity Diagram
 
 

Competitive Analysis

As the website is a means of business as well as a powerful marketing tool, it was mission critical to understand Rodney’s Bookstore’s business and its place in the market, identifying competitive advantages and best practices of the competition that can be communicated via the website design. I conducted a business and website feature analysis of primary competitors as well as contextual inquiry/observation of participants navigating Rodney’s Bookstore’s current website. Below highlights my key findings:

  • Personable and Approachable Business: Rodney’s Bookstore’s competitive advantage is its charming community-centric environment where people can go to “kill time”/ “hang out” and browse the expansive and eclectic inventory of books and posters. It is a place where the owner/employee knows the regulars and are very knowledgable about most of the books.
  • Outdated Website: Rodney’s Bookstore’s website was created decades ago and has been maintained but not updated to today’s conventions, which are at the root of users’ challenges and frustrations when using the current site. 
  • Cumbersome Book Index: The Browse By Category option leads you to an overwhelming category/subject index. Competitive sites lead users through a hierarchy of information.
  • No Filters or Sort By Options: The category/subject page has no filter or sort options while all competitors offer such options.
 
 
 
  • Atypical Taxonomy: The in-place categorization of books and posters reflect its expansive and eclectic inventory. Though the categorization aligns with the personality of the business, it makes looking for items difficult for people who are accustomed to a conventional way of organizing the inventory (I.E. Library and Barnes & Nobles). Below are examples from the Taxonomy Research exercises:

Problem

As someone looking for a book or poster, I want to browse and find what I want efficiently and effectively so that I can consider all the relevant options before  choosing an item to purchase


Solution

Rodney's Bookstore's Website is an E-commerce site designed to

(1) Enable patrons to quickly find & purchase what they are looking for

(2) Provide staff curated recommendations based on patron's interest and the category they are browsing at the moment 


Ideation, Sketching & Prototyping

Since e-commerce is a well established means of business, the ideation for Rodney’s Bookstore’s site sprouted from a thorough understanding of best practices from competitive sites. I conducted a competitor layout analysis in order to discern the successful features that can fulfill the solution strategy.

Once I converged on a design solution through few whiteboard iterations, I moved the designs into an interactive wireframe to conduct basic tests for usability and flow. After addressing the major pain points that were discovered from testing, the wireframes were moved into a hi-fidelity prototype.

Homepage Comparison

Category Page Comparison

Product Page Comparison

 
 

Retrospective & Next Steps

As an E-commerce platform the prototype was a success but the distinctiveness of Rodney's bookstore was not apparent, at least not just by looking through the website.

My solution to provide curated staff picks for each book category based on what a user searches proved to not be a compelling value proposition and not very different from general top picks or bestsellers list that most other bookstores provide. I actually started out with many out-of-the-box ideas such as an interactive bookshelf that mimics the way you would pull a book off the shelf or a book query that finds books based on qualities like your mood, lifestyle and/or personality but these were tested out of the final wireframes as it confused users rather than delight them. But in the end, users were not sure why they would use Rodney's site over Amazon.

Lesson learned: If an idea tests out of the prototype, it does not always indicate that users do not want/need it. It could mean that it was not the right solution or it was not tested correctly

Below are key next steps:

  • Address a Different Problem (In Progress)Upon reflection, users truly wanted the website to mimic the unique in-store shopping experience that only Rodney's Bookstore provides
  • Test the Information Architecture(IA) of the poster collection: Validating the effectiveness of my revised poster IA is important because poster sales is a considerable portion of Rodney's Bookstore's business