The Last Bookstore

Website redesign and E-commerce

Roles UX / UI Designer
Platform Web / E-Commerce

Overview

INTRO

The Last Bookstore is California’s largest used and new book and record store, with large selections of vinyl, graphic novels, DVDs, and more.

CHALLENGES

The site lacks the structure to represent the complexity of the store, and doesn’t support an online shopping experience.

GOALS

Create a fully responsive and modern-looking online bookstore with a friendly navigation between website pages.

ROLES

UX / UI Designer

PLATFORM

Web / E-Commerce

DELIVERABLES

User Research, Competitor Analysis, User Flow, User Testing, Sketches, Wireframes, Animated Prototype

TOOLS

Whiteboard, Pen and Paper, Photoshop, Gliffy, InVision

Contextual Inquiry

There are various stages involved in the research process. I started with a Contextual Inquiry by observing users in the natural environment at the store followed by user interviews.

“Such a cool bookstore. Tons of books for whatever you are looking for. Good choice of vinyl’s too. All in a nicely and strangely decorated mood, it’s a must seen.” – Customer.

User Persona

A persona representing real users helped me to focus on the user goals and needs. I was able to better understand the world of my user to come up with a definitive problem and a solution.

User Pain Points

Our user loves stores like The Last Bookstore, but sometimes doesn’t have the time to go in person. The online shopping experiences are often hard to navigate or non-existent.

Competitor Analysis

I used this method to compare other e-commerce websites in the market. The analysis helped me to come up with the most important features to add and change on the existing site.

Layout Comparison

As I studied the different layout designs, it becomes clear which would be the starting point of the information architecture and wireframing process for the new version — a simpler navigation and more meaningful interactions.

Design Objectives

Once I understood user behaviors, I defined the project scope based on needs and research results:

Branding: Establishing The Identity

Visually, key observations from the store included:

– Natural textures.
– Pops of bright color.
– Illustrations and graphics.
– Friendly and warm.
– Unique.

User Flow

I also created a user flow for the key tasks within the site. By going through the flow it helped to see how the user will interact with the site to achieve his goal.

Card Sorting & Sitemap

To ensure that the site’s structure matches the user’s thinking. I asked users to group items into predetermined categories. This helped me form a site map for the website displaying the layout of the categories on the homepage.

Site Map

Low Fidelity Wireframes

To improve the overall experience, when looking for a book, an easy and accessible search system will show up at all times, providing results filtered by books or authors.

The user can discover new books by browsing through related content, which improves a reader’s experience and allows them to ultimately create their own wish lists.

Product Mockup Screens

After the several rounds of user testing on the lo-fi wireframes I created the final visual design of the website.

Interface Details

I emulated the look and feel of The Last Bookstore by using the brand’s colors, focusing on clean and easy to navigate interface, enhancing what is most important: the books.

Minimal Performance Load

An emphasis was placed on minimizing the amount of effort required to complete a task and improve system efficiency. For example, it is possible to quick-read, add to cart, like, and check price directly from the same page.

Error Recovery

Error messages have been designed to clearly communicate what went wrong and how to recover from it. Use of conversational language reduces frustration by taking the blame away from users.

User Testing

User testing with a clickable prototype helped identify user frustrations to address how to improve the page designs, navigation and flow. Here is some of the feedback and observations received from user testing:

USER 1:

– He did not know how many items he added to the cart.

USER 2:

– She had a hard time finding about books she browsed and wanted to keep an eye on.

Prototype

A video of the digital prototype of The Last Bookstore website redesigns built in Invision.

Continuing Work

A next step would be to conduct more research on how people use the website, and how the interface should change based on their behaviors.

Business Pivot: Moving Into Mobile Platforms

To change is to grow. As The Last Bookstore is scaling, they may face a lot of challenges. With people switching to mobile devices and apps, it became increasingly important to prioritize development efforts and focus on strong points. As a result, a mobile app should be considered.