Greenlight Bookstore
Reading between the lines - Modernizing the online bookstore experience
Overview
To many people, books give the ability to escape the real world. To others, they offer a way to better understand the world around them. To do both, you need a resource that allows you to find and get these books as efficiently as possible. Greenlight Bookstore is an independent bookstore that focuses both on catering to a diverse audience of shoppers and on hosting in-person literary events for the community. However, the experience of visiting the bookstore’s website doesn’t reflect the same care and intention put into the in-store offerings. Our full redesign of their website revolved around three specific goals.
- Improving the experience of finding and buying books on the website
- Optimizing the mobile version of the site
- Reordering the hierarchy of information on the website to better support users in finding what they need
My contribution
UX Researcher UX Designer
The team
2 additional UX Researcher/Designers
Year
August 2024 - December 2024
Process
Context and Deliverables
From brief to the published design
I worked on this project in a team of three UX researcher/designers, all of us with our own strengths. I had the most experience with conducting UX research, so I led that portion of the redesign. My contributions included designing research studies (the card sort and tree test), taking the lead on the research insight slide decks, sketching the user flow for adding a book to the cart, wireframing the search results page, building the mid-fidelity component library, prototyping pages (including navigation and overlay states), and writing design annotations.
Our final design of the website supports two distinct user flows through both a desktop and mobile interface. These are the most important flows a user will encounter using the Greenlight Bookstore website, and address the need for a efficient book browsing and checkout experience.
1. Add “Harry Potter and the Goblet of Fire” in paperback format to your shopping cart
2. Purchase the products in the shopping cart
Back to the drawing board - Who are the Greenlight Bookstore website’s users?
In order to determine our website redesign approach, we needed to go back to basics to understand the target audience: people who find and purchase books online. Our research was conducted to understand 3 factors.
- The users - Why do they buy books?
- Their needs - What motivates them to buy online vs in-store? What do they look for when shopping for books online?
- Their pain points - What do they struggle with when buying books online?
We determined that user interviews would be an ideal research method because it would reveal both generative and qualitative insights. Users that shop at independent bookstores and online for physical books were our primary target; they are the people that are typical audiences of the Greenlight Bookstore website. We conducted interviews with 6 people about specific experiences and their motivations behind book-buying decisions.
Persona
Presenting... the representative Greenlight Bookstore website user
Competitive Analysis
Other best sellers - Learning from competing retailers
Bookstore e-commerce is a multi-million dollar industry and companies like Amazon and Barnes & Noble have set the standard for the online book-buying experience. We conducted a competitive analysis of these larger retailers and competing independent bookstore sites to understand what a successful e-commerce interface looks like.
The most successful competitors had sites that:
- Gained the user’s trust through intuitive navigation and a visually appealing homepage
- Made the book buying experience simple
- Had responsive and accessible mobile versions
Sitemap
Reading the room - Designing information architecture for user needs
We knew going in that undergoing this project would require us to reshape the DNA of Greenlight Bookstore’s site: aka the information architecture. Through both user interviews and competitive analysis, we knew that people wanted a website that was easy to navigate and grouped information in intuitive categories. We conducted a card sort to understand how users instinctively associated the content currently hosted on the Greenlight Bookstore website.
We used these insights to develop a new information architecture draft, but we wanted more confidence that the way our draft ordered information would make sense to the users. We conducted a tree test that evaluated its ability to help users find relevant information. We discovered the following findings of the IA draft:
- Confusion for locations of “school” related items.
- “Help” category is viewed as the first choice for finding information.
- Need for additional categories related to different types of user journeys.
Usability Testing
The reviews are in - Evaluating the prototype
After completing mid-fidelity wireframes and turning them into a functional prototype, we needed to put it to the test by putting it in front of representative users. We asked participants to complete the first user flow of our website (Add “Harry Potter and the Goblet of Fire” in paperback format to your shopping cart) using both the desktop and mobile prototypes. Through moderating the user tests, we identified numerous needs for the prototype that were iterated upon for the final version of our design.
Greater confirmation of “add to cart” action
Greater flexibility in viewing and choosing product options
Users expected greater visual cues that they had fulfilled the intended action. We created a pop-up overlay confirming the completed action with option to check out (consistent with other online stores).
Users commented on the difficulty of swiping the mobile carousel component to find different versions of a product and view prices. We decided to wrap elements to show all actions the user could take without the need for additional searching.
Clearer layout of product page
We redesigned the product page to emphasize components that are part of task flow (add to cart button) while moving less essential components down the page. Eg. On mobile prototype, the “add to cart” button was moved above the fold.
Outcome
Future Opportunities
Turning the page - takeaways and future avenues for website optimization
While this project demonstrates the capability of essential user flows of the Greenlight Bookstore website, there are still opportunities to improve the experience of using the site.
- Prototype the tertiary user flow for users interested in attending events - In our interviews we identified events as another interest for users using the website. This allows us to further explore how we can design an additional flow that makes the Greenlight Bookstore website experience consistent no matter what the user’s goal is.
- Develop high-fidelity visual designs and publish the final site - When we publish the final design, we will gain real user metrics that show how real users interact with the site. We can leverage this data to find areas of improvement, whether it is in creating a better search experience or further streamlining the checkout process.