Create an easier and quicker book-shopping experience for Greenlight Bookstore
Overview
Greenlight Bookstore is an indie bookstore in Brooklyn, New York. While it offers various community events and programs, the online experience is not as pleasant as the offline one. Our team redesigned its website and optimized the navigation structure to improve readers’ experience.
Info
- Timeline: Aug 2024 - Dec 2024
- Team: Iris Sun, Sophia Liu, Claire Paisley, Zhen Chu
- My Role: User research, wireframing, prototyping
Desktop Prototype
Mobile Prototype
What do you think of when mentioned “indie bookstore”?
Niche? Fancy?
But this is what the Greenlight bookstore looks like, as an indie bookstore in Brooklyn:
Disappointed? This is how we fixed it:
① Get a deeper insight from the readers
What do we want to know from people?
-What is their book-shopping behavior?
-What are their expectations for online book shopping?
Who are our target people for the research?
Screener Survey
-People who read
-People who use online bookstore websites
-People who visit independent bookstores (preferred)
Research Process
User Interview Script
Focus: Reading habits; Book shopping behaviors; Independent Bookstore Shopping.
Structure: Introduction; Reading & Shopping habits for books; Wrap-up.
Key Findings
Key Insights & Recommendations
-Only a few people know the existence of independent bookstore websites
-Price is a significant factor that user considers
-Navigation and classification matters
-People always regard independent bookstores as unique and special
-People run into frustrations when using bigger platforms such as Amazon-More promotional plans for the online shopping
-Show offers and deals at the salient position
-A clear searching and navigation system is crucial
-Take advantage of its uniqueness
-Improve those bad experiences (UI design, previews and reviews, recommendations, etc)
Persona
② Make everything on Greenlight Bookstore organized
We found the three major information architecture issues, which were duplicate information, unspecific tabs, and too much content in one group.
After the card sorting which consisted of 26 participants, we got the data of the similarity matrix and formed some insights
Similarity Matrix
Insights
#1: Task-based approach for buying books
Participants grouped book-buying-related actions together, such as bulk sales and preordering books, whereas the current website keeps them separate.
#2: Subscriptions are often grouped exclusively together
Subscription programs are often grouped exclusively together. This might be due to two reasons: 1) unfamiliarity with subscription programs offered by bookstores or 2) different mental models of buying books.
#3: Gifts? Discounts? Wishlists?
Although many participants did not create meaningful categories for the following cards, we found a pattern that suggests a mental model surrounding gifts and affordability.
Based on the data of the card sorting, we drafted a new Information Architecture and finished 8 tree testing.
Tested Information Architecture & Destinations
Insights & Solutions
#1 Shipping: Although most people found shipping correctly, only 50% of participants found it on the first click.
#2: Podcasts: Zero participants found the podcasts, low discoverability.
#3: Personalized Autographs and Signed Copies: Most participants confused “Personalized Copies” with “Signed Copies”
#4: Student and Educator Discounts: While most people found discounts successfully, the path is not direct.
#1 Shipping: Renamed it as “Shipping and Pick up”
Placed it under both “Buy books” and “Policies and FAQs”
#2: Podcasts: Delete the tab (they’ve stopped producing it for a year)
Add a podcast icon as a footer for easier discoverability.
#3: Personalized Autographs and Signed Copies: Created a “Signed Copies” subcategory including both signed copies and personalized autographs to make the options more discoverable.
#4: Student and Educator Discounts: Put student and educator discounts in the gifts and deals section, as well as make it into a pop-up on the page to improve discoverability
Final Site Map
③ Made the information alive on the website
Once we finished the sitemap, we started to work on the overall redesign, focusing on the user experience of browsing reviews and prices, which was the feedback from the user interview.
We divided the design goal into 3 tasks:
1. You are interested in purchasing a newly released book that is under 25 dollars
2. You are interested in reading staff reviews
3. You are looking for Intermezzo and want to purchase the cheapest option
After doing the user testing, I realized the 3 major problems of the current prototypes
Then, I recognized 3 major issues with the prototypes
-
Unreasonable section sequence on the homepage Optimize the sequence and layout on the homepage
-
Lack of description of events Add a heading & increase the hierarchy of eye-catching info
-
Confusing staff review user flow Clarify the “staff picks” heading & add quotes from the reviews
Prototype problems
Based on the feedback and the competitive analysis, we restructured and redesigned the homepage, fixed the current problems, and made the overall flow smoother. We also added the check-out process to make the book-shopping experience more complete and satisfying.
Desktop Prototype Mobile Prototype Whole File
Reflection
What we did well
-
A thorough user research
-
An organized and logical navigation system
-
A clear user flow
What we could do better
-
More efficient and frequent team coomunication (e.g. weekly meeting, clear due date, work division)
-
Home page design (hero images, categories, etc.)
- Add an event page