The Last Bookstore
UX DESIGN
UX RESEARCH
WEBSITE
context
Role: UX Designer & Researcher
Tools: Sketch, Invision, Miro
Duration: 2 Week Sprint
Overview
The Last Bookstore is an independent bookstore located in Downtown Los Angeles. Currently the largest bookstore of its kind in California, the space consists of two floors worth of over 250,000 new and used books. In addition to books, The Last Bookstore also buys, sells, and trades vinyl records and graphic novels. The bookstore is also notable for its local art and inventive book sculptures, and has been featured in everything from newspapers to radio shows. I was faced with the challenge of redesigning their website to enhance the book-buying user experience.
The Process
Researching the Site
I began my research by conducting a heuristic evaluation of the site to discover what usability problems present themselves. I assessed the site according to the five quality components of usability (e.g. learnability, efficiency, memorability, errors, and satisfaction). The violation that impacted usability the most was lack of efficiency:
doesn’t allow filtering while browsing
doesn’t allow sorting while browsing
book genres not easily discoverable
Researching Comp.
I conducted a competitive analysis of 5 other booksellers--including independent bookstores like Powell’s and larger, corporate competitors like Barnes & Noble--and found that these other popular booksellers offered features solely dedicated to helping users find and assess the books they’re looking for, features The Last Bookstore didn’t offer. They include:
filtering
sorting
customer ratings and reviews
Researching User Needs
To better understand who I was designing for, I conducted 3 interviews with people who shop for books online. I asked questions about:
habits (ex. can you describe your reading habits?)
preferences (ex. can you describe your favorite type of thing to read?)
experience (ex. can you describe your most recent online shopping experience?)
I synthesized this data by conducting an affinity mapping session with 2 iterations. The themes that emerged were:
wanting the most affordable option
wanting book recommendations
not having a particular book in mind while browsing
preferring to read print books
preferring fast and free shipping
Researching Pain Points
I needed to test the usability of the website in real time so I conducted a task analysis with 3 users. I asked them to find and check out some books, and included constraints such as:
Browse only (no searching)
$50 budget
One must be a horror book
The goal was to have users engage with the browsing feature and learn how efficiently they can perform the tasks. User frustrations included:
not being able to filter by genre or sort by price in order to find a book that satisfied the task constraints
not being able to find the genres at all because they were hidden from view and unlabeled
overwhelming amount of text in checkout page
distracting visual layout
Understanding the User (User Persona)
Michelle is a socially aware student who’s looking to support independent bookstores. She wants to purchase a book on the Last Bookstore’s website, but has difficulty navigating the site’s inventory.
How might we provide Michelle with a more streamlined browsing experience in order to help her find the book she needs?
Prioritizing Features (MoSCoW)
I used the MoSCow method to determine which features needed to be prioritized for this particular project. This helped keep me on task throughout the design process by reminding me to hit the most valuable features first given my limited timeframe.
Because Michelle’s main goal is to find and purchase a book (ideally for an affordable price), the features the product “must have” are all meant to improve the efficiency of the browsing and searching process.
Understanding the Information Architecture (Site Maps & Card Sorting)
Part of understanding the site involved analyzing its information architecture, so I crafted an existing site map for reference. Then I conducted 3 open card sorts of the genre categories because this was an area of confusion for users during the task analysis. Every user had a different mental model for their classifications, so I researched genres on sites like Barnes & Noble to discover what best practices are at popular bookstores. I arrived at 4 top-level book categories and used this to construct a new site map.
Understanding the User Flow
To convey exactly what Michelle does on the website, I created an existing user flow. Aside from adding certain features, in order to make Michelle’s task less overwhelming, I created a second user flow where the checkout process is segmented.
Sketching & Wireframing—Testing & Iterating
I began my design process by sketching preliminary ideas on paper. This helped define my visual direction moving forward. I then created a paper prototype with these ideas and conducted 3 usability tests. User feedback included:
add directions and distance to store
add shipment tracker
add estimated delivery time/availability to pick up in store
I then created more detailed digital wireframes that implemented priorities like a faceted navigation feature. Using these designs, I created a clickable prototype and conducted 3 usability tests. User feedback included:
Incorporate the order # in the confirmation page after checkout
Include pagination and indication of how many results per page
Add breadcrumb feature to product details page
Designing the Final Mockup
Once I was satisfied with the foundation of my design, I started adding color and products. My hi-fidelity design utilizes accent colors from The Last Bookstore logo because I wanted to maintain brand authenticity as much as possible. I chose a white background because books come in a range of hues and white is the most unobtrusive color. My typography is a simple sans-serif font so as to maintain readability. I also made sure to follow standard UI heuristics of e-commerce sites, like having the cart icon on the top-right and having a segmented checkout process.
Homepage
Product Details
Menu
Order Details
Search Results
Confirmation
Future Considerations
Throughout this project, time was my biggest resource and, as it turns out, I didn’t have a whole lot of it. There were certain features, perspectives, and research methods I had to prioritize over others given the limited scope of my project. If I had more time available to me however, I’d consider the following:
Features
I’d incorporate some of the feedback from users that weren’t prioritized in the final product, such as:
pagination on the search results page
estimated delivery/pickup time during checkout
Perspectives
I’d conduct more interviews and usability tests with users whose perspectives I didn’t capture the first time around, like
users under 21 years old
users who live outside of LA
Research
Lastly, I’d conduct a contextual inquiry of the physical bookstore. This would help me:
capture the store’s brand more effectively in my redesign
conduct stakeholder interviews with the store owner and employees