top of page

Nextbook Online Bookstore

Responsive Web Design

UX / UI Case Study

Home 2.png
Chrome - Light.png
About Project
Product

Nextbook is an online bookstore that combines the replication of an in-store experience with online social capabilities. Their selling point is to help users discover new books to read based on their interests and preferences.

Problem

Many bookstore websites have cluttered designs, a lack of filters, and many book suggestions that do not tailor to each user.

Solution

Create an intuitive, responsive website for users to sign up, create recommendation lists, and purchase new books to read. 

Goal

Create a user-friendly interface that will help users quickly find books they want to read 

My role

User research, wireframing, prototyping, visual design, low and high fidelity user testing

Duration

January 2022 - May 2022

5 months

Home 1.png
Product Page 1.png
Sign up – 1.png
Questionnaire.png
Confirmation Page.png
Questionnaire - 1.png
Questionnaire - 11 1.png
Questionnaire - 7 1.png
Questionnaire - 13 1.png
Recommendation Page - 1.png

At the start of the research phase, I conducted user interviews with 4 participants. I asked about their experience on their current go-to websites for purchasing books. I wanted to understand their habits, how they incorporated reading into their routine, the difficulties they were encountering, and features they would like to see added. 

 

From there, I discovered that many users find bookstore websites overfilled with content causing stress in finding what they need. In addition, most of the displayed information was irrelevant to the users, and they wished for a simplified version. 

 

On the flip side, research also revealed that many users like it when they are recommended similar books and from the same authors but wish for additional filtering. In addition, many target users also voiced that they like to go in-store to check out the books and wished online bookstores could replicate the same experience.

User research: pain points
Frame 5128.png
Design

Current websites are too cluttered. It contains too much information that users do not care for. Many users want a digestible amount of content to speed up their ordering process.

Frame 5130.png
Experience

The lack of an engaging experience makes it hard to keep users on the website for long.

Frame 5129.png
Outsource

Users have to rely on other websites to seek suggestions and read reviews.

Frame 5131.png
Details

Users become frustrated when there is a lack of description, synopsis, and a book preview.

Homepage.png
Sign up – 1.png
Recommendation Page.png
Recommendation Quiz – 1.png
Product Page.png
Cart.png
Confirmation Page.png
Usability study: Findings

After conducting a series of ideation, I tested my design with 5 participants. I ran an unmoderated usability study to determine which areas of my design needed clarification or change. The insights I gathered were extremely valuable because the next step was to create a high-fidelity mockup with the data I had synthesized.

According to my findings, there were four areas for improvement.

Frame 5132.png
Filters

Based on the insights, I added additional questions to understand further what books the users are looking for. Initially, it only asked about the genre and author. Since then, I have added the options to find recommendations based on their reading history, a specific book, mood, and storyline. Based on their selection, there would be more in-depth questions to dive deeper into their search. The goal is to provide the most relevant recommendations based on their interests. I have also split the questionnaire into multiple pages and removed the navigation to keep the user focused on their task.

Questionnaire - 1.png
Questionnaire - 7 1.png
Questionnaire - 11 1.png
Frame 5133.png
Rating system

The thumbs up/thumbs down feature have confused the users. To eliminate the confusion, I have replaced the icons with a ‘not interested’ and an ‘add to bookshelf’ option to clarify the initial intentions. If users have read the book before, they can rate it after clicking on ‘add to bookshelf.’ I have also set the recommendations to show one by one to simplify the experience and not overwhelm the user with choices. They have an option to view all at once versus one by one.

Frame 53.png
Frame 5134.png
Navigation

“My Corner” is home to all user activities, including the recommendation lists they have created, but users weren’t aware of this. To make this edit, I have included links on the confirmation page to guide them to the right places, leading to My Corner.

Confirmation Page 1.png
Frame 5135.png
Excessive text

With the homepage containing too much information and clutter, I have simplified the home page and moved the rest of the content under their respective sections - shop and explore.

In addition, users have mentioned that the product pages are too long, so I removed author details and video reviews. To find the details, users can hover over the author’s name to see more information. Lastly, I transformed the product details into icons for quick viewing.

Home 1.png
Product Page 1.png
MOBILE MOCKUP-2.png
MOBILE MOCKUP-8.png
MOBILE MOCKUP-5.png
MOBILE MOCKUP-3.png
MOBILE MOCKUP-6.png
MOBILE MOCKUP-4.png
MOBILE MOCKUP.png
MOBILE MOCKUP-1.png
Impact

Our target users shared a positive experience navigating the website, specifically mentioning its simple and clean design.

What I learned

Throughout the project, I made many small changes to the design. I realized and accepted that the user-centered design process is never linear. There were many areas I didn’t consider until I was further into the process and had wished to consider before. The main takeaway is to focus on the user’s needs at every step.

Check out my process deck to understand my design process :)

bottom of page