BHUKU
Overview
Bhuku is an app for book lovers that will help users track all the books they own, have read, what they want to read next, and also all the books they love.
Objective
To design an iOS mobile book app for cataloging and recommending books that utilizes the full potential of what a mobile platform can do.
Course
Designlab UX Academy
Timeline
Nov 2018 - Dec 2018 // Revised mockups June 2022
Role
Sole designer doing research, UX and UI design
Understanding What Reader’s Want
Bhuku wants to give a more user-centric approach to their app, adding features and flows that make it delightful for people to use. They want to utilize the full potential of a mobile app platform, such as: utilizing the camera to register books in a more automated way via optical character recognition (OCR), sending notifications to users to keep them engaged, tracking their progress on reads.
My research goals are as follows:
Identify main competitors and how their platforms operate
Identify pain points for users with existing mobile book apps
Find out what functions and features users would like to see from this app
Methodologies
The methodologies I will be using is secondary and primary research. As always, it will be most helpful to begin the research process with secondary research to get a broad understanding of the current market landscape and competitors. This way, I will be able to see what the competitors are offering and how I can fill in gaps of opportunity which are currently not being met.
Secondary Research
The main purpose of secondary research is to scope out competitors of Bhuku. Based on my research, the main competitors are: Goodreads, Libib, Library Thing, aNobii and Readfeed (TurboFuture, 2017). Upon searching these apps on the app store, the top players in the game are Goodreads, Libib, Library Thing and Readfeed with aNobii falling very short behind. With this in mind, I decided to conduct a competitive analysis for the 4 top players who averaged out to have 3.9 stars as ratings. I proceeded to download these apps on my phone to see how they function.
To my surprise, Libib didn’t have the feature to easily login with your facebook account unlike how many other apps do now which was inconvenient. I then tried to register for an account but failed multiple times. So I decided to focus my research on the 3 applications that ran smoothly: Goodreads, Readfeed and Library Thing.
As shown above, those are the home screens of Readfeed, Goodreads and LibraryThing. Upon first glance, it is apparent that Readfeed and Goodreads look more contemporary whereas LibraryThing looks rather dated. That being said, I found the size hierarchy of fonts to be off for Readfeed.
Common features of all the apps included: reading lists, options to update reading status, leave/read reviews, add books by taking a picture (OCR), and track reading progress. One primary function that LibraryThing lacked was the ability to follow friends, which was available on the other two apps.
User Interviews (Primary Research)
After conducting secondary research, I then conducted primary research by way of interviewing people.
I interviewed a total of 4 people:
Female, 30 years old, Working Professional
Female, 24 years old, Student
Male, 27 years old, Working Professional
Male, 29 years old, Working Professional
The key findings of the interviews:
Enjoyed the function where they could keep track of what they read and see their progress
Really enjoyed the discussion part of the app so they can connect with other like minded individuals
All participants loved the idea of curated lists from media sources (E.g., The New Yorker) because they value the opinions of book critics
They also appreciate “Most Popular” lists, so they can see what everyone else is giving glowing reviews to
Persona and Empathy Map
Following the series of interviews, I created a primary persona and empathy map of a user (Carol) who may use Bhuku. Doing this is a great way to get into the mind of one person and try to understand what their main goals, needs and frustrations would be when using the app.
The Design Process
After conducting user interviews, creating a persona and empathy map, I now had a general idea of what users would like to see from Bhuku. I have identified the goals and pain points, and now I had to think about how to create an app that would cater to their needs.
The first step of the design process is understanding how a user could potentially flow through this app. Baring this in mind, a user flow map was created.
Wireframes
From my user flow map, I then proceeded to design low fidelity wireframes for Bhuku. When creating these wireframes, I used existing mobile apps for inspiration in regards to structuring content
UI Design
I wanted to create a light, happy, vibrant and calming mood for the app. Also keeping in mind that I will be showcasing a multitude of book covers, so the design had to be minimalistic. With that being said, my colour palette was mostly white with subtle hints of colour. Reading is usually associated with relaxation, so the dominant colour I chose was green because studies have shown that green has a calming effect on the mind.
Tying it all in
After creating the style tile, I applied these UI elements to my low fidelity wireframes to bring them to life.
Usability Testing
After creating my high fidelity wireframes, I conducted 3 interviews using InVision to see how users would navigate through the app. The main tasks for the users were to login into the app, search for a book and click into the book details page. I mainly wanted feedback on what they thought could be improved in terms of the layout and if there was any confusion as to what the functions were.
Objectives
Evaluate the ease of use as I tell them to complete specific tasks (E.g., logging in, searching for a book and clicking into the bio)
Evaluate how they maneuver around the app and their general comments
Identify areas where they may have confusion
Key Findings
The app was easy to navigate around
They appreciated the minimalistic and white space which made book covers stand out
100% were able to complete the task with ease
Areas for Improvement
They thought for the “Explore” page, the other categories would be more visually appealing if it was a carousel wheel showing book covers (similar to the homepage)
The hamburger menu icon on the left was misleading because I intended it to be for “settings” and most thought it meant “menu” and was stood for redundant links on the page
The heart icon beside want to read is confusing because there was already a “want to read” button
They also said the top 2 lines of the “Explore” page seemed redundant to the home screen
Iterations and Final Design
Firstly, I changed the hamburger menu to a cog so that it becomes more intuitive for users that it represents “settings”.
Secondly, I took away the heart icon since most users were confused by this. Instead of the heart icon, I created a drop down menu where people can choose either of the 3 options: want to read, reading, have read, or loved this book. The "loved this book” option replaces what the heart icon would have done; it allows users to add it to their favourites collection. I also rounded the corners of the squared buttons to make UI more consistent throughout the app.
Lastly, I made a carousel for the explore page of the different genres so users could easily discover books in genres outside than their own preference. On top of that, I placed another view mode beside “Explore by genre” so that users would have the option to see all the categories listed in a box view if they wanted to (so they don’t have to keep scrolling to see all the genres).
I’ve re-iterated my mockups to update them. The designs elements surrounded by a blue box are the new changes that I’ve implemented and the red boxes indicate changes I’ve made from user testing feedback.
Final Thoughts
It was interesting to see how my perception of icons differ from others. This just goes to show how essential usability testing is. During my usability tests, I was able to see the importance of use of concise icons and how different people may prefer to see things represented different visually.
Next steps
To design the settings page that would pop up from the side
To design a system for tracking books users want to read, have read and are reading
Figure out how to allow users to organize their books into different categories