I leaned my cheek against the coolness of the window pane and closed my eyes, listening intently to the sound of people passing by.
How long more am I going to have to stay indoors?
Books have always had the ability to draw us into a different world, beyond our immediate circumstances. Yet, just as quickly as the COVID-19 pandemic had emerged, public libraries have been forced to shut and physically books have become possible vectors for the virus.
The Challenge of the Project
Our goal for the project was to dive into researching the users, look for opportunities that can improve the user experience on NLB's Overdrive website so that hopefully, users can still gain access into the literary world (through eBooks), a respite from these confusing times. NLB Overdrive is an online portal that users can borrow eBooks and audiobooks in conjunction with Overdrive.
The Research Process
The first step of the design process involved user interviews to uncover not only habits and behaviours but also the motivations and frustrations.
The Research Process
Observing the Users
We began by interviewing and observing seven users remotely, taking into account the recommendation from Jakob Nielsen’s article, Why You Only Need to Test with 5 Users suggesting that it is possible to learn about 75–99% of all usability problems from the first three to five users tested.
Interviewing the Audiences
The interview sample focused specifically on young working adults aged from 24 to 30 with different reading habits. We were cognizant of the diversity that lied even within this specified group and intentionally sought to include different races, genders and backgrounds. Most interestingly, we managed to get a colour-blind user to try the interface, and he allowed us to quite literally see the world through a different lens.
With the knowledge of what we are looking for, an interview guide was created. The interview took approximately 30 minutes and included topics to get to the core of what the user habits, motivations and pain points were. We asked several questions like:
Some Interview Questions
Interview Findings
- Many book readers would either browse online for book recommendations, search for books under the same author from the last book they read, or visit the book store for bestsellers recommendation before heading to NLB.
- Book readers get a sense of achievement from purchasing books and feel empowered after reading them.
As part of the the research, we wanted to find out the flow of a reader into the book store. All of us mapped out our flows and merge into one as below.
Book Reader Flow in a Book Shop
Immersed Ourselves as Users
In order for us to walk in their shoes, each of us went through the process of searching, borrowing, and returning of eBooks on the NLB Overdrive website. Having experienced the website for ourselves, we could better understand our users’ feedback as they took their journeys through the website.
As we gather information from our participants and our own experience, we actively noticed what everyone saw, thought, did and felt, and mapped them into an empathy map for ease of reference.
Empathy Map
Synthesising User Research
From the inputs provided by participants in our user research, data points were analysed in an Affinity Map to identify similarities/patterns n user behaviour. Ranking these broader categories by the number of observations within them, three clear "winners or priorities" surfaced:
Synthesising User Research
Defining the Priorities
Once we identified the 3 priorities to become the basis for our redesign, we compiled the pain points and needs as follows:
Pain Points
- Most participants are confused on how to navigate the site to search for suitable books.
- Before borrowing a book, they rely on reading the sample as the description on the page wasn’t very helpful.
- Many eBooks were unavailable to download which frustrates most participants.
- Most participants were disappointed with the reading experience as they find it non-enticing.
Needs
- Better book recommendations — They would be able to spend less time searching and more time reading new books.
- In control of personalised feed — Instead of showing a standard laundry list to every user, users prefer that they can hide and show categories that would interest them.
Populating the Persona
These data points analysed and identified from previous stages in the pain points and needs. This helped us in crafting our persona.
Persona Data Points
Once we had all the information ready, a persona was developed (we named her "Sarah Lee"). Sarah Lee was created based on a sample of our respondents. Of course, this is not to say that Sarah exhaustively represents all our users — after all, many of these issues were highlighted by likely very different individual users. But for now, let’s focus on Sarah.
Persona
Mapping Out the Customer Journey
In order to focus on the experience of Sarah in a single scenario, we map out what it’s like for Sarah to find her book of interest, from the point where she enters the website, to the point where she decides to borrow the book or not.
Customer Journey Map
Brainstorming the HMW Statements
Wherever there were dips into the red zone, we felt that we had the opportunity to intervene. We asked ourselves "How might we address these dips?"
Brainstorming the HMW Statements
The team then came together to vote on the most interesting (and arguably the most poignant) core question we could work on together:
How might we recommend books based on user’s interests?
Using two main brainstorm techniques, we developed a number of ideas that could potentially solve the question described above.
Brainstorming Technique: Four Categories Method
Brainstorming Technique: Impossible to Possible
Features We Wanted to Prototype
The brainstorming process was an invigorating experience as the team threw out all sorts of ideas some seemingly more outrageous than others. Of the many ideas, we narrowed down to 3 features we wanted to prototype:
1. Get to know the user right from the start — Sarah’s frustration seemed to stem from the unsuitability of books that were offered to her, and as a result, creating friction between Sarah and her goal of quick, online access to quality eBooks.
This could be averted if users could indicate what they want from the onset, through selecting their interested book genres. The book offerings can be customised to their preference. Imagine a homepage that recommends you only interesting books (interesting to you, that is) — this will leave a good first impression every time you visit the website.
2. Make the experience fun through gamification — We quickly realised in our UX research that not all UX issues are UI problems. Unfortunately, there is little we could do to resolve these issues beyond the UI redesign.
Therefore, we asked ourselves, is there a way we could keep people coming back even with some of the existing friction persisting? Based on our user interviews, book readers felt a sense of achievement whenever they finished reading a book. By bringing a similar element of motivatio into the NLB website, users get to earn badges based on the number and types of books they have read. This builds a sense of satisfaction, and even fosters a sense of commitment to growing in an area (our badges have levels).
3. Back cover preview — For Sarah who is constantly on-the-go, moves quickly from one thing to another, and may perhaps even somewhat impatient, she may not have time to click through a series of books to read the details. She may, however, be more inclined to swipe and quickly see the back cover of a book. Swiping as been touted to be one of the easiest (even subconscious) motions, that App Partner contributor Richard Pallardy credits it for Tinder’s success.
Moreover, the "Back Cover" concept of a physical book is familiar enough to most of us as shown in our book reader journey map below (as part of our user research), and can be easily adapted into our digital eBook experience.
Drawing the User Flow
After brainstorming for relevancy and novelty ideas, we transformed the ideas to specific functionalities, starting with a user flow diagram. With this, we were able to better understand how Sarah would interact with the website to achieve the goals she needed to.
User Flow of Sarah's Interactions
Crafting the Paper Prototypes
In order to visualise the user flow better, we sketched the solutions on sheets of paper. As a group, we exchanged our views and opinions regarding the flow, as the more input we receive, the better we could shape the product.
Screen Flow
Our Feature Ideas
Based on the user flow we had designed earlier, we used MarvelApp to make the wireframes dynamic and clickable, so that we’ll be able to evaluate how users engage with the proposed screens and identify sources of user error and frustration early on. Next, we created mid-fidelity screens using the Adobe XD based on the user findings and referred from the paper prototypes that we came out with.
Select Interests
Users get to select their interested book genres and the homepage will only recommend books based on them.
