The Biggest little Bookshop

E- commerce website | UX Design

This project is a two–week design challenge I did as part of the UX Design Immersive Course at General Assembly. I was tasked to design a new e-commerce website for an imaginary local, independent bookshop — Bookworm Books. Some of the initial stages of the project, in particular the competitive analysis and site visits, were done as a group, but most of it was a solo effort.

The Brief

Bookworm books has been Bethnal Green’s neighbourhood book shop since 1982.

Brand values

Their business model is based on customer service, reasonable pricing and keeping it local. They employ local staff and support the diverse community that they serve.

Objectives

Build a new e-commerce website for Bookworm Books that allows the company to showcase its products, allow people to order some products online and have them shipped to their home or work, or picked up in store. Achieve this while maintaining its brand image and ‘small shop’ appeal.

The Research

I conducted a site visit to see what the in-store experience was offering customers that the online space was lacking.

Site visit

My team and I decided to explore the local area to get a feel of the local bookshops. We visited Freedom bookshop, a small anarchist bookstore. This store was tucked down a small alleyway, quite hard to find. It seems they have never felt the need to advertise themselves. Word of mouth seems to be enough to keep new customers coming through.

Stock was organised and displayed in real-life situations, prices were not visible, you were never pressured into making purchases and you could test out products.

Jason — customer

“I live nearby, interested in niche books hard to find them online.I use kindle but prefer to read books.”

Competitive analysis

Doing an in-depth investigation and analysis of Bookworm book’s competition was key if they wanted to enter the ecommerce market.

I considered Daunt Books, Waterstones and Freedom Press for the competitive analysis because they had a local, physical presence and also had websites where a customer could buy and pay for a book.

Waterstone is a British book retailer that operates 283 shops, mainly in the UK and also other nearby countries.

Daunt books is a chain of bookshops in London, founded by James Daunt. It traditionally specialised in travel books.

Freedom Press is an anarchist publishing house in Whitechapel.

I wanted to analyse what features are important to them, what is working and not working.

I began looking at how the competitors websites are currently running and I wanted to analyse what features are important to them, what is working and not working.

My Focuses

• Enhance the online browsing experience
• Loyalty
• Customer service
• Clear store location
• Keep a local feel

Understanding the users

Bookworm books had provided a persona they had identified as a key customer they wanted to appeal to online.

Combining my findings, I created the persona: Gabe.

The journey begins

So after having a good understanding of the brief, the users and the market competition, it was time to look at Gabe’s journey.

User Flow

The brief also included a specific scenario:

Gabe has a book club meeting next week and wants to purchase the book to read over the weekend.

So I created a user flow to reflect the different steps and actions Gabe would take in order to achieve his goal.

Card-sorting

The first step would see Gabe browsing the homepage, where navigation is key. With a selection of products the book shop would sell, I carried out an open card sorting exercise of 75 inventory items with 12 users.

My main takeaway from this is that our users created flat hierarchies.

The categories selected were very generic.

I returned to my competitor analysis to see how other stationery brands organised their Information Architecture.

Organising the site

Now that that all the products were organised into separate pots, it was time to work on the website navigation. I put together a sitemap containing all the categories and subcategories revealed by the card sorting results, and introduced a ‘rewards’ tab.

The second step was determining the site navigation (i.e. the system that tells the user where they are and guides them to where they want to go):

Design and Testing

I tested my wireframes with 10 users in total at different stages of the design process.

I increased the fidelity to mid fidelity and began some more testing.

Scenario: Find the Louis Theroux biography, check out the preview and purchase.

Task1: Find the Louis Theroux book and look at the preview.

Task 2: Add to basket and continue with the checkout process.

Navigation

The objective of the navigation was to be less overwhelming than the usual bookshop website.

Check-out process

When designing the check-out process, the objective was once again to make it shorter than the usual bookshop website.

The first iteration presented a one-page check-out:

Test…Test…Test…

Next Steps

• Users who tested version 2 of the digital prototype generally described that it was easy to find inspiration and purchase a book.
• Despite the improvements I made to the check-out flow, there remained a smattering of complaints about isolated issues. If this continued with further testing, I would probably re-think the check-out flow entirely.
• I would also like to go back to the beginning and conduct user interviews with individuals who are members of book clubs.
• Although a satisfactory result so far, it is not the end of the road.

What I learned

• Doing a site visit and speaking to knowledgeable staff is a fascinating and highly useful process.
• Card-sorting is time-consuming and more variable and subjective than I anticipated.

Thank you for reading! :)