Case study: Bring the in-store experience online

Find exactly what you are looking for

Ivy Liang
Bootcamp

--

Metropolis Bookshop

The in-store Metropolis Bookshop

Problem: People can't find the book they want online.

Process: Building a preference for books recommendation. The system will generate a user recommendation list according to your preference.

Outcome: Users are more likely to find the book they want. The book recommender help users to find the book they like efficiently, improving users' satisfaction.

Project synopsis

Overview: Metropolis Bookshop is an independent bookshop that focuses on architecture, design and counterculture books. Their primary users were spontaneous customers. The bookstore wants to profit more from the online shop, but the online bookshop is confusing. So, my goal was to redesign the current website to help spontaneous customers find their favourite books and increase the cart conversion rate.

How might we help the spontaneous customer find the book they might look for? And How might we surprise the spontaneous customer?

Duration: A 2 weeks sprint

Role: The project was created and executed by me.

Methods: Secondary research, user interview, competitive and comparative analysis, heuristic evaluation, archetype and scenario creation, User flow, problem statement, hypothesis, sketching, wire-framing, prototyping, usability testing

Tools: Miro, Paper and pencil, Figma

Research:

Target audience:

My target audience is spontaneous buyers. They don't have a clear purchase goal. They like the new and exciting things and love the setting with plenty of social interaction. They make their decisions fast, according to their feelings about the service and the products.

Scenario

To understand the spontaneous buyers better, I created a scenario with a user called Mark. Mark is an architecture student, and he is looking for an architecture book for inspiration. Still, he has no idea which book he should buy, and he also wants some interesting books besides architecture.

What are the common objectives between business and user?

Based on what we discussed about spontaneous buyers, I found out efficiency, ease to use, joyful experience and customer service are the common denominators between business and spontaneous buyers.

Balancing the business's goal and the customers' needs

Competitive & comparative analysis

To understand better how to improve the current online store, I did some heuristic evaluation and competitive and comparative analysis between different online bookstores.

Heuristic evaluation of the independence bookshops

Personal recommendation & rating, and review

None many independent bookshops have rating and review systems. Only the Paperback Bookshop has personal recommendations, and their book recommendations are sent to the user by the staff through email. It was great, but getting help from the team and the system would be better because it could reduce the staff's workload. So I keep thinking about how the system works for book recommendations. Then I got inspiration from apple music.

Preferent questionnaire from Paperback Bookshop
Preference selection from Apple Music

Check out

The checkout process on the current website is a little bit confusing. There are too many options on the delivery method page. And the checkout process can be quicker.

There are too many options on the current checkout page.

Search for help

Metropolis encourages the customers to email them if customers can't find what they want. When customers contact them, they are already frustrated because they have struggled for a while. So I want to move this service to when users first need help.

Problem:

"I have no idea what to buy?"

One of the biggest challenges with the Metropolis eCommerce bookshop is that spontaneous buyers don't know what books to buy. And they can't get any advice from the staff as in the physical bookstore. Also, because there are no ratings, sorts or filters in Metropolis online bookstore, it's hard for customers to find a quality book. So, the customers often leave the Metropolis's online bookshop without buying anything. Our big design challenge was to bring the personal book advice experience to their online store and to help customers to find the book they want.

The solutions:

Adding personal book recommendations, ratings, and random books function

Spontaneous buyers want something exciting, but they also want an efficient way to narrow down the books they want. I realised that a match between the system and the real world is the solution's key. We can help spontaneous customers find their favourite books by providing personal book recommendations like a physical store.

The big idea was to support spontaneous customers choosing a book they might like by connecting the e-commerce bookshop with the database. Customers can get their book recommendations by entering their preferences online or contacting the staff. Also, they can find books according to ratings and reviews. Book reviews can come from "Worms Book Club," co-hosted by Metropolis Bookshop. Also, customers can find some random books for fun.

Design:

Personal recommender

Inspired by apple music, I designed a personal book recommender based on the customers' favourite styles, books and authors. As you enter more information, you can narrow it down the more likely it is what you want.

Preference for book's style
Preference for books
Preference for authors

Random book function

Customers can select random books according to category or emotion. For example, I want a random literacy book or a humour/sad random book.

Having random books according to category and emotional type

Team recommendation

To bring the online shop back to life, I recommend that all staff briefly introduce themselves. Such as their interest, the style they like, and their favourite author so that the customers can know which staff have common interests with them. The customers are more likely to buy the books recommended by shop assistants who share hobbies.

Team recommendation and team members' introduction

Check out process

The system will choose the cheapest way to ship for the users after entering their address instead of asking them to select delivery within the Melbourne metro area or outside the metro area on the shipping method page. I also put the shipping details and shipping method on the same page.

Check out step 1- shipping bag.
Check out step 2- shipping detail.
Check out step 2- Click & Collect.
Check out step 3- payment details.
Check out step 4- confirmation of the information
Informing of order success

How did I get here (Usability test)

Before I designed these prototypes above, I did the usability test with my first version of the prototype with five users. Here is some main feedback on the first version of the prototype:

  • They think the personal recommender is helpful.
  • They like the random books function.

However,

  • The main feedback I've got is about the checkout process. I didn't consider that the person who bought the book is not necessarily the person who received the book. So I made some changes to the shipment page. And I also add the shipping method so the customer can have more choices.
Add contact information before the delivery method and add the shipping method.

The personal recommender in the first version requires users to answer all the questions to get their book recommendation. This process is too long. So I break the questions down. Users don't need to answer all these questions. Also, after the users select any of these options, the system will give them some book recommendations immediately.

Reducing the process by breaking down the questions

Result

The personal recommender, the random book function and the rating can help users find the book they want earlier. Also, users can get help from the staff beginning instead of after they are frustrated. Moreover, customers can change their shipping details on the confirmation page.

This is the user flow for the current website. The blue tag is "email the bookstore". The red colour is the pain point that users must go back to the shipping detail page when they make mistakes on their shipping detail.
This is the purpose of user flow.

Next steps

I plan to develop it into a responsive design. And I do some UI design for this project.

Reflection

  • Learn to think from the user's perspective and the business perspective.
  • Learn to design an experience based on business capability and resources.

However, I made some mistakes too.

Spending too much time developing the filter page in Figma is not essential for spontaneous buyers.

--

--