Bhuku: an App for Book Lovers

If you could carry an entire library of books in your pocket, which books would you choose?

Overview

Project Brief

Bhuku is an app for book lovers that helps users track everything they own, books they have read, what they will read next, and also everything they have enjoyed reading so far. Bhuku makes recommendations and suggestions that are personalized for each user based on their preferences.

View Prototype

Project Info.

Roles:
Research, UX / UI Design,  IA, Visual Design

Tools Used:
Sketch, InVision, & Illustrator

Team:
Self-directed with feedback from mentors and peers

Timeline:
4 weeks - 20 hours per week

Objectives

Information Architecture

Develop the app’s structure and flow using wireframes & user flows

Visual Identity

Determine the overall look and direction of Bhuku’s branding

App UI Design

Design an app that allows users to catalogue and save books

User Research

How do people decide and choose what books they read? How do they keep track of books they’ve read (if at all)? In order to learn more about peoples’ reading habits and preferences, I conducted a Typeform survey along with 1:1 interviews with 14 participants, all of whom were avid book readers. The pain points I discovered are as followed:

Deciding What to Read Next is Difficult

Finding interesting books can feel overwhelming as there are countless books to choose from, and so many different ways to discover new books.

Categorizing Books Is Time-Consuming

Everyone organizes their books differently, and many who do so feel that categorizing books takes up too much of their time and effort.

Anticipating Users’ Needs

With the research done and the users’ pain points understood, I decided to map out how Bhuku’s app could help users decide what to read next, along with a way to help them organize collections of books. I created two user flows that documented the choices and decisions users might need to make while using the app.

Defining Form & Function

Once I had a bit of the app’s functionality mapped out, it was time to get a rough idea of how things would be laid out. I decided to start sketching and exploring all of the different ideas I had for some of the screens!

Creating an Appealing & Friendly Brand

After getting a better idea of how things were laid out, I decided to focus on Bhuku’s visual design. Many competitor book apps (such as Goodreads) have outdated UI that feels frustrating to use for some users, as people mentioned during the survey and interviews I conducted. 

It felt especially important to create an aesthetic that was playful, visually appealing, and friendly. Below is the style tile I created to define how the elements in the app would look:

Usability Testing

Once I applied the elements from my style guide to my wireframes, I decided to test the UI. It would be useful to be able to identify if there were any areas or things that were confusing to users.

I created this initial prototype using InVision. Then I ran usability tests with 7 participants, who were asked to complete 3 different scenarios. Their first task was to find and learn more about a book that seemed interesting. Their second task involved saving a book to remember for later. In the third task, participants were asked to create a new bookshelf.

One thing participants especially liked about the app was the overall design—which they found appealing.

However, there were a few factors causing confusion - as detailed below.

White Buttons are Hard to See

Within the app, there were a few places where there were subtle white buttons - for example, on the mockup to the right - the “Nevermind” button at the bottom of the screen is one such example.

Users were finding these buttons extremely hard to see - some didn’t even notice them and were unable to find the button they were looking for.

The Solution

In order to combat the white butttons being too subtle (and therefore almost invisible) I added a red border around the button in order to create more contrast between the button and the background, as shown below:

“Add” and “Edit” Icons are Ambiguous

In bookshelves, users are able to add and name bookshelves however they’d like. For example, if a user wanted to create a bookshelf for “Cook books”, all they’d need to do is tap the plus icon. If they wanted to delete bookshelves, rearrange the display order, or re-name shelves, they would tap the edit icon.

During the user tests, many participants were confused by the icons and did not know what their purpose was. To add clarity to the icons, I added labels underneath.

Original Design with Icons:

Revised Design with Labels Added:

Screen Terminology & Categorization is Confusing

In the nav bars below, the app is dividded into five different parts: home, catalgue, bookshelf, goals, and profile. Participants involved in the usability tests didn’t understand what the difference was between “Catalogue” and “Bookshelf” was. Many found the use of the word “bookshelf” confusing and thought “library” would be better. Another thing people didn’t understand was the function of the home screen - which was to give personalized suggestions to users.

The Solution

The first thing I did was rearrange the nav bar & restructure things a bit. I changed the home screen to be the catalogue screen (which basically acts as a database of books where users can search for, filter by genre, and see newly added books). I then took the home screen and changed that to take the place of where the catalogue was - and renamed the home screen “Suggested” - so users would understand that that screen would give them custom book suggestions.

The other thing that I did was add 3 onboarding screens to explain how the app worked.

I also built screens where users could pick out genres they were interested in after onboarding in order to get suggestions that were tailored to their preferences.

Summary & Takeaways

One of the most challenging aspects of this project was the information architecture—there are countless numbers of books in the world, with new books being published every day. Figuring out how to let users sort books (and there are so many ways - whether it be by genre, author, popularity, date published, etc) was another challenge I grappled with.

If I had more time, I’d test my designs again, and continue improving on the features that make Bhuku’s app not only useful and accessible but fun to use and also helpful regarding book suggestions and figuring out what to read next!

More Projects

Freshness Burger
Responsive, UX Design
Responsive, Identity Design
WFP Fountain Pens
Zeit Time Travel
Responsive, Identity Design