Bringing the book store experience online

Anubooks is Lalitpur’s largest retail and wholesale bookseller. They have been selling books for almost 35 years. They started by selling textbooks to schools and colleges and now have expanded their products to fictional and non-fictional books as well.

My role in this project

• Conducting User research.
• Facilitating the design sprint.
• Designing an online experience for the book store.

Problems

• They had no online presence.
• Their customers needed to visit the physical store or message them to check for the availability of a particular book.
• They were only known for selling academic books.

Goals

• Create a way for different kinds of readers to get the books they are looking for.
• Help increase Anubooks’ online presence.

Research and Inspiration

Due to the pandemic, many people had started to build the habit of reading books as they had plenty of time to spare.

Right after the first lockdown had ended, Anubooks started getting personal calls from mutual friends and regular customers for books. This is when, they thought it would be nice to have an online platform where users can search, browse and request books.

User Research

I interviewed 5 users who liked to read. The goal of this interview was to categorize different types of customers based on the books they read and how they searched for books. Based on their reading habits the two main categories they fall under are:

1. The Searcher: This user knows exactly what they want to buy. They already know the title as well as the author’s name of the book they are going to purchase.
2. The Browser: This user just wants to explore different types of books. This user usually browses popular books, newly released, on sale, or the ones falling under a particular genre.

Based on the type of books they read, users fall into the following categories:

1. Fictional Reader: This user mostly reads fictional novels and stories. They usually read the blurb of the book before making their purchase. If they like books, they will usually search for books falling under a similar genre.
2. Non-fictional Reader: This user likes to read books that would help them grow. They read the blurb and skim through the table of contents before making the purchase. If they like a book, they will search for books from the same author for their next purchase.

The Design Process

5 days Design sprint was used to validate our ideas and come up with a solution. It was used because of the following reasons:

• Since the team had never worked together before, I wanted everyone to be on the same page.
• Rather than being the only one working on an idea, I wanted others to give suggestions as well.
• Wanted to give everyone a voice.
• Since we were given the freedom to experiment, I wanted to check how effective conducting a design sprint would be.

Day 1: Understand

• I introduced the team to the design sprint process.
• We started by setting the long-term goal for the project and listing every bit of ideas we had on our minds.

Long term goal: In 5 years time, Anubooks will be the go to place for readers to get their books.

• Then we made a list of things that might go wrong.
• By listing the customer as a key player, we made a simple map about how our customers would complete their current goal of buying a book.

Map with the customer as the key player

• We then proceeded to interview one of the shop’s workers to learn more about the types of customers that visited and how they interacted with them and suggested books for them.
• Then we reframed our list of problems to “How might we” questions and organized them and voted for the problem we were going to solve for the first phase.

How Might We notes

Result: The first day ended with us having a map that gave a rough idea of what needed to be created.

Day 2: Ideate

• We started by looking for inspirations and then each one of us created our own inspiration boards. While looking for inspirations we were also looking at other products that weren’t directly related to our industry but had a similar flow that we wanted to use. We also listed the reasons for adding the particular image to the inspiration board.

Inspiration board for Anubooks Website

• Everyone observed each other’s boards and made notes of things they liked along with some new ideas.
• After that, we did an exercise known as Crazy 8’s where we sketched variations of 3 pages 8 times by spending one minute on each. For this, the home page, products page, and the products details page were chosen as it was the main focus looking at our map.

Crazy 8’s for Home, Product Listing, and Product Details page

• Then each one of us proceeded to make our own solution sketches.

Results: The second day ended with everyone creating a three-panel storyboard of the product.

Day 3: Decide

• We taped all the solution sketches to a wall arranging them side by side. Then began our voting session where everyone had unlimited votes.
• After the voting session, I explained everyone’s ideas while focusing on the areas with higher votes. If I had missed something, the sketchers would add on to it.
• Another voting session was conducted, where everyone only had one vote and had to choose a single favorite idea.

Winning Solution Sketch

• After the winning sketch was chosen, we moved on to making the User test Flow where each member wrote 6 action steps from customers discovering the website to buying a book from the website. Then we conducted a voting session.

User Test Flow

• The winning flow was used as a reference to create the storyboard.

Storyboard for Anubooks Website

Result: The third day ended with making the storyboard for the prototype.

Day 4, 5: Prototype

• Adobe Xd was chosen as the prototyping tool as our team was familiar with using it.
• I started dividing the tasks for creating prototypes, gathering content, writing scripts for the interview, and collecting participants for the interview.
• Since most of the participants we contacted weren’t free on Friday, we decided to conduct the user testing on Saturday. Due to this, we had an additional day to refine our prototype.
• I along with a colleague of mine started building the prototype. Another colleague of ours assisted us with the contents. While building the prototype we had referred to various articles related to building an e-commerce site by Baymard Institute and Nielsen Norman Group.

Some of the articles we referred to were:

• Always Use Thumbnails to Represent Additional Product Images
• E-Commerce Usability: The Main Navigation Should Display Product Categories
• Consider ‘Promoting’ Important Product Filters
• Footer Links Should be Divided into Distinct Semantic Sections
• Adding an Item to a Shopping Cart: Provide Clear, Persistent Feedback

Prototype for Anubooks

Result: The prototype was ready to be tested and all the participants were informed about the user testing.

Day 6: Testing

Interview with Keyur

• All of the participants were in their early to mid-20s.
• Initially, we had planned to have five participants for testing but due to some unforeseen circumstance, one of the participants couldn’t make it.
• The script for the interview followed the Five Act Interview process where the participants are welcomed first, then they are asked some context questions, then the prototype would be introduced, then they are given some tasks, and finally, they are asked to give a quick summary.

Tasks

• Scenario 1: A friend of yours recommended a book to you. So you want to know more about that particular book, how would you do this?
• Scenario 2: You want to get a book. How would you do it?
• Scenario 3: You want to get a particular book but the book doesn’t seem to be available in the store. What would you do?

First Interview Feedback Grid

Result: We successfully tested our prototype with our target audience and got a list of things we had to update.

Iteration

After the first interview, we compiled user feedbacks and started to make changes to the prototype.

Home Page

Home page before(left) and after(right)

Adding a way to request unavailable books directly from the search results page

Changes:

• Illustrations were removed as some users told that it was way too colorful and illustrations didn’t resonate with them. We also didn’t have the proper resource and time to make illustrations from scratch.
• Each book was added in a container as it displayed the book in a much more clear way. It also gave the titles ample space to not look congested.
• Discounts were removed as their business model didn’t have any discounts.
• Request a book banner was removed from the home page as it wasn’t noticed due to banner blindness. It was moved to the search results page as this flow seemed to be more intuitive.

Product Details Page

Product details page before(left) and after(right)

Changes:

• Book instantly button was removed as it was quite confusing to understand.
• Added a note saying currently, only store pickup was available
• Removed quantity based on the assumption that people would only buy one book

Book Request

Book request form before(left) and after(right)

Changes:

• Updated the theme of the page.
• Added help icon for describing what an ISBN is.

Second Testing

Interview with Pujan

The same tasks were repeated for the second interview.

Second Interview Feedback Grid

Product details page after the second interview

Updated Product details page

Changes:

• Added quantity selector as it seemed necessary.
• Added text to show where the ratings are from.
• Added a dropdown arrow to signify navigation items contained in a megamenu.

Home page after the second interview

Updated Home page

Changes:

• Added a section to show a list of categories.

Search results page (With some results)

Updated Search results page

Changes:

• Moved the request a book feature to a place where customers can spot it easily.

Then I proceeded to design other pages that were not included in the prototype.

What did I learn?

• Design sprint for this project seemed to be overkill as it already had an obvious solution. So most of our solution sketches on Day 3 looked similar.
• Managing time for everyone needed in the design sprint was difficult, so some of the people we had planned to include couldn’t attend.
• Since this process included everyone, we were able to develop good teamwork and communication skill.
• This process helped the client and the developers clearly understand what was going on.

You can view it on: https://anubooks.ottr.com.np/