DAANIARAO
Redesigning reader’s experience on Books on B
.jpg)
.jpg)
Role
UX Research • UX Design • Interaction Design • Usability Testing
Platform
Website
Timeline
4 weeks
Overview
Books on B is a concept project, I worked on during 4 weeks of my time at general assembly Bootcamp. This project gave me the opportunity to apply the skills learned through coursework to a real world problem. This project follows the design, prototyping and evaluation process from end to end.
Books on B is my community’s favorite local book store which, because of Covid closure, struggled to get through its inventory. Books on B already had digital visibility, yet most readers were struggling to purchase books on the website, which unfortunately was causing Books on B to lose customers.
Providing an improved experience to Books on B readers
Books on B website was rebuilt to help readers shop easily, providing a refined filtering option for all books inventory while building the website to be more scannable. Along with this, the goal was to highlight independent publishers on their website as most loyal readers/customers of Books on B asked for it.
So, what process did I actually follow to get to the solution?
Following the double diamond design process
.jpg)
I followed the double diamond design process to understand and better facilitate my client. Over four weeks, I worked on identifying & understanding the opportunity space, conceptualizing the opportunity, and finally realizing the product solution and its impact.
Understanding readers problem
To identify Books on B users and their problems, I started by conducting interviews with avid readers who liked to shop for books frequently. The questions were structured to understand readers’ behavior, thought processes, and challenges they face while making a purchase, and also delved into specific elements of the in-store experience.
Key insights
1.
Control over search
In the decision-making process, the features most valued in a book are the ‘Title,’ ‘Synopsis,’ ‘Subject covered in the book,’ and ‘Recommendation of family and friends
| “Need concise, clear, and inexpensive information about the book”
2.
Available choices in multiple formats
A higher population of individuals are moving towards Audiobooks or reading E-Books.
| “Over the years i’ve started to enjoy digital form of books alot more”
3.
Decision fatigue with too many options
Users find it hard to explore new books online and mostly base their purchases on friends’ recommendations but do not quite appreciate their experience.
| “Convinience over anything”
4.
Quality over cost
60% of users always gravitate towards the book category rather than the cost of the book. The cost is usually second thought while making the purchase.
| “I always go for my favorite genre”
Identifying reader’s pain points while using the Books on B interface
I needed to become familiar with the Books on B digital experience. I worked with 5 users on Books on B original website; provided them with tasks and asked some questions about flow, interface and usability during the process. This allowed me to note any initial impressions or usability concerns and identify parts of the process that required refinement.
Design opportunities
From all the research I gathered, I penned down some questions for myself to design a solution.
With these questions in mind, I set forth designing! I started with who my real user was and in how many ways I could design solutions to benefit them.
-
Readers want to be transported to the similarly pleasing book store experience while using the Books on B website with the convenience of being at home.
-
How might we make the Books on B experience more intuitive and easier for its community so that its regular readers buy more books online?
-
How might we highlight compelling features and services of books on B?
Anna, a student.
Let’s meet Anna, a student at Hayward college who has been living in Hayward since childhood. She has been going to Books on B since childhood and is disappointed with the Books on B digital experience during covid closure.
We can now convert her pain points into design opportunities once we see the user experience through her lens.
.jpg)
.jpg){kind=small}
Visiting stores to purchase books is not easy given the tough schedule
Difficult to support independent publishers
Easily gets overwhelmed when exploring books at giant retailers websites
.jpg){kind=small}
An easier way to explore all available books
Quick and convenient experience
Find reliable reviews for unpopular books
.jpg)
Based on all the insights I collected, I mapped out the journey of Anna’s experience while imagining the emotional and situational context and how she may achieve her goal. The journey map illustrated the lowest point of her journey where she could be facilitated.
User flow
Mapping out the flow and interactions
I created a user flow to map out the flow of the prototype and the overarching interactions a user would be able to perform to see where the user is interacting with the website.
.jpg)
Working towards a solution
Low Fidelity sketches
Referencing the user flow, I created low-fidelity sketches
Based on my initial research, I took a stab at which pages needed to be reworked entirely or where I only needed to develop a better content hierarchy. I developed sketches thinking about familiar UI for quick interest and engagement. Once I felt good about the basic skeleton of the frames, I started thinking about the advantages and disadvantages of each sketch and voted on the pieces I thought would be most effective.
Updating navigation menu
I first started by designing a more structured and organized navigation menu to filter content quickly. This is where during interviews most users quoted; that categories were either duplicative or didn’t provide support in any way.
I used two methods to understand how people expect a content organization. These methods gave me detailed insights on creating informed information architecture and helped me remove all the clutter.
Tree testing: Tree testing helps evaluate the findability of topics on the website.
Card sorting: Card sorting provides insight into how people conceptualize, group, and label ideas
Mid-fidelity wireframes
I worked on refining the homepage, content page, and product page for the basic build of the Books on B website. I added features that helped the interface be more scannable, intuitive, trustworthy, and easier to explore.
Homepage
%201.jpg)
An animation screen that highlights the websites events to increase instore traffic.
Quick filters added on the homepage based on readers favorite genres for quick and easy exploration
Added children books category on the homepage to help parents with purchasing books.
Highlighting books by independent publishers to enhance one-of-a-kind websites.
Contentpage
.jpg)
Once user selects ‘Fiction’ on menu they see filtered down bestseller options.
A short section added for awarded books to help users purchase some new reads.
Quick option to save book to ‘wishlist’ for future purchase
Added filters on the content page for easy exploration
Product page
.jpg)
Genre of book
Reviews embedded from accredited sites
Price of books in all formats to help multiple customer base
Recommendations provided to users if they like the author
Quick add to wishlist button to engage users in any future purchases
Checkout
Order summary provided on all screens
Multiple ways for users to sign up
Easy 5 click checkout process
Progress bar added to help alert users where they are in the process
Interface usability
Is the interface usable?
Do people see value after experiencing these flows?
For the project's next phase, I wanted to ensure the interface, and the functions were clear for users, and that people saw value after experiencing the flows firsthand. I conducted 5 moderated user tests with readers and 30 unmoderated user tests through Maze and used my learnings to guide my iterations. During testing, I saw common themes in users’ comments, which helped me iterate my designs for the final solution.
.jpg)
-
Users appreciated the highlight of independent publisher's book signing events on the homepage
-
I decided to distinguish the functionality between two menus on the homepage and combine the two flows for a smoother experience
.jpg)
-
Originally all books by Independent publishers were grouped under ‘rare books.' 80% of users were not able to recognize ‘rare books’ meant ‘books by Independent publishers’, so I renamed it for the final solution
.jpg)
-
Users appreciated the easy filtering menu on the content page but wanted more refinement of the categories. I worked on adding more genres under ‘Independent publishers’ to help with quick filtering.
-
Through testing, I learned that readers when purchasing the book as a gift liked to filter content to ‘best selling books
-
Users found the reviews by multiple sources redundant on the product page. I decided to dedicate the reviews section solely to critics’ reviews.
-
People value that they can find and connect with other customers and read more genuine reviews about unpopular books
Visual aid: style guide
Ensuring cohesive design
I created a style guide to help maintain consistency throughout the design and translate the website into a more warm, friendlier, and aspirational experience. My early designs ranged from being too monochromatic to looking similar to giant retailers or too youthful. I adjusted the colors and contrast throughout iterating and even increased the font size to make it more accessible.
.jpg)
Final solution
Refined book exploration, and browsing experience.
While most of the concepts remained the same, I incorporated the user feedback from the initial prototype and defined an end-to-end user experience in the final concept. Three important aspects addressed in this prototype were the creation of easy and quick exploration of books, adding user preferences, and a 5-click checkout experience.
Reflections
With my time coming to an end with this project, I have realized that a project never truly ends, and you need to work on it to improve and reiterate the designs continuously. This project had some limitations as it was a concept project, and the brief from a business standpoint was missing. I discovered that multiple design thinking methods should be used while working on the project to help reach an all-inclusive solution.
Future Updates:
-
I need to further perform usability testing with readers on the Final prototype to see if the flow of the website makes sense.
-
I also need to build the flow of the selection of merchandise as Books on B is very proud of its merchandise.
-
Add the ‘Book club’ feature on the website to make the interface more interactive and fun.