I created an end-to-end product in the form of an iOS app for book lovers that will help users track books they have read and want to read and help them discover new books they'll love.

Find out how

Role & Duration

UX / UI designer
80 hours

Note

This is a project I completed for Designlab’s UX Academy. This is not a real app but the research is organic and the design is based on real user voices, in combination with mentor and fellow student feedback ✌️

Overview

Bhuku has started collecting data on popular books and wants to create a mobile app. Inspired by Goodreads, Bhuku wants to give a more user-centric approach to their app, adding features and flows that make it delightful for people to use.

Goal

The goal is to determine how people keep track of books now and to design an iOS app centered around people’s needs and wants in this area. Research is going to be very important for this project.

Solution

Bhuku is an iOS app for book lovers that will help users track books they have read and want to read and help them discover new books they'll love.

Research

Research Goals

  • Discover how people keep track of books they’ve read, are reading, and want to read

  • Learn how people discover or hear about new books

  • Understand what influences people’s decision on whether or not they want to read a book

  • Discover if people like to read multiple books at a time

Research components

  • Secondary research

  • Competitive analysis

  • Provisional personas

  • User surveys

  • User interviews

I started my research by understanding the problem I’m trying to solve. Organizing, tracking, and discovering books read and unread, can be challenging and is typically not something done in one place, using one product. And when it is, (e.g. Goodreads) the result can be confusing, messy, and complicated.

Not a lot of recent articles exist on this topic, so I looked into Bhuku’s competitors and browsed threads written by avid readers and users of similar apps on places like Reddit. I also conducted a competitive analysis of a few active products and came up with some quick provisional user personas based on the info I've found so far.

I also sent out surveys and conducted user interviews to hear from readers about how they like to read and keep track of books and what pain points they currently have when trying to do so. Some of my main conclusions were:

  • People don’t seem to care much about setting goals or personal reading stats or the “gamification” of reading

  • People care more about keeping track of books they want to read rather than books they’ve already read

  • People are interested in what their friends and family are reading

  • Recommendations and reviews are the most helpful to people when deciding their next book to read…

  • …However, new books are primarily discovered from looking at and hearing recommendations only

  • People especially like recommendations from other people they trust, even more so from people they know personally

  • People prefer reviews from sources they trust too, like news sites and blogs or book critics, rather than from random people

  • Useful, accurate recommendations are helpful because they filter through the overwhelming amount of books available

Define

I developed a user persona that represented user voices heard during the research phase. Referring back to this persona during the design process helps me stay aligned with user goals and remind me of the problems I need to solve for users.

Next, it was important to define how a user will interact with the app and how the app itself is laid out.

What screens are the most important? What belongs in the tab bar? How is the information organized? What makes sense and is the most helpful to people using this app?

One challenge was helping a user add a book in as little taps as possible. My original idea was to have the user go to the Browse screen and use the search bar there or find a book in the Suggestions screen, but this would take too long if they already knew what they wanted. Also, books can be found all over the app and in different contexts: in suggestions, friends’ activity, browse and search results.

There needed to be a faster way to add a book and it needed to be consistent across the app

First I decided to create a simple icon that will be present whenever a user adds a book, no matter the context. This will help with learnability (and this paid off later on, as you’ll see in the first task of the test phase).

The “add a book” icon

The icon used in its button form

Next I created a “quick add” feature that will always be easily accessed at the bottom of the screen at the center of the tab bar (the magnifying glass with a plus icon). People can immediately search for a book or author wherever they are in the app. A more detailed search feature is available in the Browse screen of course.

I created a low fidelity prototype using these wireframes and was able to have some users test it out. After receiving feedback and implementing some changes to the wireframes, I moved on to the design phase.

Design

The goal with the Bhuku brand is to actually not draw attention to the brand itself, but rather emphasize the books people are reading and the voices people are using. Book covers, user profile photos, and user-generated content is at the forefront.

The Bhuku logo harkens back to historically printed text, with a simple lowercase serif wordmark completed with a period, as if the end of a sentence on a page.

Color is used sparingly but effectively, for emphasis and calls to action. The books and users bring the vibrancy and color to the interface.

Like the Bhuku logo, the typography references traditional printed text by using a serif typeface for main headings. To retain legibility, a sans serif typeface is used for all body text and small text.

The UI kit for the app brings the brand and the interface design together. Books in the traditional sense evoke images of solid binding, smooth paper, serif typefaces, and layering.

The interface will use layering to show hierarchy with drop shadows and overlapping elements. Elements will stay true to an overall layout grid and appear orderly and solid.

Test

To test these designs, I created a high fidelity prototype using InVision and conducted usability tests using Maze. I came up with three tasks representing three use cases of the app and monitored the results. 17 users participated in this test.

Task 1: Adding a book to a list

Task Description

You've been using Bhuku, an iOS app, to keep track of books you've read and want to read. You just remembered about a book you've been wanting to read, “The Wind-Up Bird Chronicle” by Haruki Murakami. Find the book and add it to your Want to Read list.

Testing Notes

Being consistent with the design and placement of “add” buttons has positively impacted the design. It seems like there was very little friction between users and their goal of finding a book quickly and adding it to their library.

Task Completion Rate

94%

Task 2: Marking a book as read

Task Description

You just finished reading “The Picture of Dorian Gray.” Mark it as “Read” and give it a rating.

Testing Notes

Again, no issues were reported during testing of this task. Since the book the user is currently reading is at the top of the Home and Library screens, it's easy to find and quickly mark a book as “read.”

Task Completion Rate

100%

Task 3: Adding a friend's suggested book

Task Description

Your friend Lydia had suggested you read “Idaho” by Emily Ruskovich. Go to Lydia's profile, find her suggested books, and add “Idaho” to your Want to Read list.

Testing Notes

Out of all three tasks, this one was the most difficult for users. The main pain point was simply finding Lydia's profile quickly and easily. This was partially a limitation of the prototype, since some users attempted to search for Lydia's name, but I hadn't built the prototype for that action yet (in reality users could, of course, search to find a friend's profile).

But even besides that limitation, people still struggled to find where the friends list was located. I have since placed the friends list at the top of the Activity section on the Home screen, to maximize visibility.

Task Completion Rate

80%

Next Steps

After each new design iteration it’s important to test that design again with users. The design process is an ongoing one, and there’s always room for improvement. The next step for this project would be to implement changes based on my usability test results and continue designing the remaining screens and user flows, making sure I create opportunities for actual users to try them out before committing to them.

More Projects