The Last Bookstore Project Overview

I conducted a website audit for The Last Bookstore. I proposed a 1.5 week redesign that would improve the book shopping experience for e-commerce users. The design met the needs of users and sales by reducing visual clutter and providing fewer steps between browsing and cart checkout

Problem

Book shoppers need a simple way to locate books and checkout based on their preferences. The current process is confusing, overstimulating, and time consuming.

Solution

Pull all information on one site, eliminate distracting stimuli, and showcase familiar features so that book shoppers can purchase items.

Research

I assessed the website’s design via heuristics evaluation, competitive analysis, and accessibility testing which helped me uncover issues with consistency, efficiency, and accessibility.

Poor contrast and competing visuals made it difficult to view the content. I conducted an accessibility test through a software system called Wave which revealed 49 contrast issues on the homepage alone. This is significant because individuals with visual impairments will not be able to access the material on the site and it will be difficult for all users to digest.

The website violated design norms such as consistency. For example, the shopping cart was not on every page. When it did appear it was always in a different place. Sometimes it was represented as a word other times it was shown as an icon.

The shopping carts were inconsistent and didn’t sync between sites. This caused confusion and missed sales opportunities.

  • The carts between the two The Last Bookstore were not linked. Users had to move through two separate checkouts and pay two shipping fees.

  • Only half of the users were able to identify the problem and complete the checkout process.

  • All users verbalized frustration in the process.

I conducted usability tests to see how shoppers would interact with the site. Users had trouble completing tasks and found the visuals overstimulating.

Users did not like the overall site navigation and visuals.

The site sent users to other websites to find and purchase books. This created frustration and distrust resulting in users abandoning the shopping process.

  • While some individuals liked the homepage visuals, the majority of users said the introduction video made them sick.

  • Every user said that the visuals were distracting, overwhelming, or overstimulating at some point during the test.

  • No users were able to find specialty items like rare books.

  • If users wanted a used book they would be sent to eBay.

  • If users wanted a rare book they would be sent to Instagram and must DM the store for each individual book purchase.

  • New books were on a separate The Last Bookstore site (same company but different style guide) which opened as a new browser window. 

Users have a specific book in mind when they shop online. They find books with the search feature.

I developed three personas to represent the major themes and nuances of user needs based on testing and interviews.

My personas were most interested in locating specific books with the search feature.

  • The search bar was the first thing every user said they looked for when they opened the browser.

  • Ben and Roseann said they would consider browse a little online but it wasn’t their main goal when they visited the online store.

  • Each individual had specific ideas about how they wanted to receive their books.

    • Lena wouldn’t even use the site if she couldn’t select same day pick up. These personas honed the project focus on the book buying and check out process. 

I created a mid-fidelity prototype in Figma to highlight a few main features of the redesign.

The website should be easier to view with less competing visuals and higher contrast. Users should be able to…

  1. Find the search without thinking on each page.

  2. Locate popular book categories like best sellers with ease.

  3. view the product detail page of specific book and access the book descriptions, author information, and reviews.

  4. Seamlessly move through the checkout process. 

Design

I combined two separate navigations into one.

Simplifying the global navigation was a top priority. The Last Bookstore had two separate sites that needed to be combined.

  • I took inventory of all of the categories and keywords from both sites.

  • Users grouped the terms into categories and labeled the categories. Users simplified the navigation. For example, by they took separate terms like Staff Picks, Best Sellers, and New Releases and put them under the same category of Books or Shop.

  • Based on those results I created tasks to test if users could find specific information based on the new organization systems.

  • With my research results validated I finalized my new navigation and sketched a Site Map to clarify the plan. 

I reduced visual clutter and designed for simplicity and accessibility.

With my global navigation clarified I could start to plan the site. I drafted a homepage, product listing, and product detail view with pen and paper. I conducted testing then moved to digital wireframes to incorporate the recent feedback. I simplified my global navigation design, opted for a clean and simple background to draw attention to the books, and adjusted the margins keeping responsive design in mind. 

I replaced unconventional icons and layouts with recognizable visuals to help users complete tasks with automaticity.

For example I added a predictable search bar and shopping cart that appear on every page in the top right hand corner of the navigation bar.

I created a direct user flow so that users could select in store pick up and delivery options during the checkout process.

I also revisited the research and data to consider specific necessary features. For example, when I moved through the checkout flow I found that the Last Bookstore site did not have a in store pick up prompt. I located detailed instructions in the FAQs on the second Last Bookstore website. The multi step instructions were complicated and the process would take several days of waiting.

It was available but also unlikely that users like Elena would take the time to stumble through the website to find this information. I made sure that the in store pick up feature would be clear and easy to locate in my new design

Usability Testing

Last, I conducted usability tests with the prototype. Generally, the navigation, layout, and flows behaved the way users were expecting. I walked away with two action items.

First, two users wanted to click on the author’s name to learn more. There is a section on each page to learn about the author. But it would be a quick fix to also make the author’s name clickable for users with that instinct.

Second, three users said they wanted a more clear view of the checkout confirmation page. They could not go back to check their address and payment details without clicking on the next section. They wished the review page allowed an automatic view so they could scan their details before clicking confirm.

Reflections

  • This was one of my first design projects. Since then I have grown in my design process, ability to keep track of details, and prototype in Figma. For example, I didn’t keep detailed records of usability testing metrics. This was a mistake. Now my design overviews always include data on what users enjoyed, failed to complete, and didn’t enjoy.

  • If I were to present my findings again I would create a journey map to really show how the user moved through the site. A simple visual like a journey map would communicate a lot about user pain points in this particular challenge.