Bringing the Brick-and-Mortar Experience Online

Gleebooks

Using UX research, analysis, usability testing and iteration to redesign an eCommerce website.

Project Type

Concept project

Duration

2-week design sprint

Tools

  • Figma

  • Mural

  • Pen and paper

My role

I was the sole UX/ UI Designer

Methods

  • Business analysis

  • Heuristic evaluation

  • User flow

  • Journey mapping

  • Competitor and comparator analysis

  • Wireframing

  • Prototyping

  • Usability Testing

Summary

Project Overview

Gleebooks is an independent bookseller located in the middle of Sydney. For over 40 years they have prided themselves on excellent in-person shopping experiences and conducting literary events.

In light of Covid, Gleebooks is looking to improve its current e-commerce store to remain accessible outside of its opening hours. They hope to achieve this by mirroring their in-store experience and providing their “Careful Critic” archetype customers with the information they need.

The Problem

The current Gleebooks’ website navigation is confusing and makes it hard for customers to find books. Additionally, the website doesn’t provide its customers with the right information to help them compare books and make a purchase.

The Solution

The solution incorporated a redesign of the current desktop website and key recommendations which include:

  • Introducing “bookmark” functionality to save and return to books.

  • “Add to bag” and “bookmark” access on product category pages to allow seamless site navigation.

  • Providing access to relevant information through book reviews, consistent descriptions and author information.

  • Incorporating breadcrumbs and search filters to give customers more control and site orientation.

Keep scrolling to read the full case study

What’s hindering the user?

In order to measure the current capability of the website I conducted a heuristic evaluation. The evaluation revealed Gleebooks’ ability to present their customers with valuable content and feedback through the form of company written articles, as well as having an in-place inventory system. It also revealed that the current website lacked:

  • A clear navigation system with minimal pages

  • A space for customers to compare and review books

  • Consistent product information

Full case study

1. Conducting research to understand the current website and the market

What are our competitors doing well?

 The competitor research revealed several patterns users are familiar with which can be incorporated into the redesign of the navigation and product detail pages. The key insights which ultimately influenced the redesign were:

Home page

  • A clear and unobtrusive navigation system

  • Top banner presenting business content (sales/ events/ physical storefront)

  • Profile icon (top right quadrant)

  • Shopping bag icon (top right quadrant)

Product Detail Page

  • Breadcrumb navigation

  • Product image

  • Wishlist functionality

  • Review feature / write a review with a 5-star scale rating

  • “About the Author” information

  • Other book suggestions

2. Generating ideas and getting feedback

How do we improve?

Gleebooks’ current interface doesn’t allow customers a private space where they can read and compare the books they’re interested in. The idea is to incorporate a separate “bookmark” page to encourage customers to refer back to products that they had a previous interest in. Additionally, the solution should include streamlining the user flow and navigation to present books to customers with fewer clicks.

Inviting users into the process

Five usability tests were conducted using the initial wireframe sketches to test the ease of navigation and primary functionalities. The sketches were iterated on between testing sessions and participants were encouraged to draw out and highlight how they saw certain interfaces. The feedback and insights received were:

  1. Simplify the “Product” page

  2. The navigation system is too confusing

  3. Re-asses the homepage hierarchy- Books are the customers’ priority followed by ‘articles’ then ‘events’

  4. The “review” function and “suggestions” section was deemed highly beneficial

This feedback encouraged iteration on the initial sketches and the wireframes were reworked to incorporate the new insights.

3. The solution

Where we started and where we finished

Homepage

Changes that were made:

  • Incorporate a banner on the home page to allow customers to instantly recognise the site's content.

  • Bring high-quality products to the top of the page to achieve the Careful Critic’s goals of choosing and purchasing a high-quality book.

  • Blend together the capabilities of both the physical and online store by showcasing in-store events and community articles.

  • Access to the customer’s account, cart and bookmarks at the top of the page in the primary navigation system.

Category Page

Changes that were made:

  • Introduce breadcrumbs to aid in customer navigation.

  • Minimise category flow- Single category per page

  • Filter search by ratings to ensure customers have easy access to high-quality books.

  • Remove side navigation to present more books

Product Page

  • The product page will be simplified to suit the hierarchy of information (from most to least important) based on the customer's needs. 

  • The “add to bag” and “bookmark” buttons will be the same size as they hold the same value to the Careful Critic.

  • Review and 5-star rating indicator will be displayed at the top of the page to display book quality.

  • Further review information will be accessible through the link next to the rating system and will be anchored to further down the page to find in-depth written reviews.

  • “About Author” information.

Bookmarks

Create a space where customers can compare books of interest and provide them with the right information to select and purchase a book.

  • Provide relevant information to compare and make a decision.

  • Can “Add to bag” to complete conversion

4. Great first steps but challenges remain

I am confident, based on the research, that implementing these functionalities on the site will help meet the expectations and needs of Gleebooks customers, whilst simultaneously making Gleebooks accessible to the community outside of store opening hours. The main functionalities addressed in this solution should withstand time as they should be deemed the minimum requirements for the customer, only requiring slight alterations with future trends. 

Although these are positive first steps, there’s still a lot that needs to be done. My suggestion to the client regarding the next steps include:

1. More research - It's important to conduct more research regarding the navigation and sorting of navigation content.

2. Evaluate content strategy - Be realistic about which features and functionalities are manageable for the company to maintain, and adjust designs accordingly.

3. Begin customer profile flow and usability testing - Map out the limitations and features of the customer profile flow and conduct usability testing for the new flow.

5. My key takeaways

As a junior UX/UI designer, I learned many valuable lessons throughout this project which I’ll take with me into my future career. My main learnings were: 

  1. Functionality over visual appearance- No matter how visually appealing a website may be. If it doesn’t meet the user's needs and expectations, it won’t be used.

  2. Necessary and consumable- The presentation of content still matters. After deciding what is necessary you must also decide how best to present it so it is not overwhelming for the user.

  3. Neutral and aware- it’s important to remain unbiased in usability tests and not just hear what you want to hear. Whilst doing so, it’s important to be aware of the participant's body language as it can reveal more than what they’re saying and might prompt questions to dig a bit deeper.