Full UX/UI Design Process

project

End to end book tracking app, Bhuku

TOOLS

Trello, Pen & Paper, Whimsical, Procreate, Figma, Marvelapp

role

Sole UX/UI Designer

time

80 hours

View prototype
The challenge
With over 10 million downloads from Google Play alone, Goodreads is the industry leader in book tracking apps. But for the app users, the experience has a lot of pain points. Still, they are loyal. So how does Goodreads retain their users and better yet, how might they be lured away? The challenge was to create a book tracking app that competes with Goodreads.
The solution
While it was important to design an app that puts users at the center by taking the time to understand their needs, frustrations, motivations and behaviors, it was also important to recognize that making it easy for users to leave the competition, where they've spent so much time tracking books, reviewing books, and building a social presence, would be a big challenge.
THE research
With over 10 million downloads from Google Play alone, Goodreads is the industry leader in book tracking apps. But for the app users, the experience has a lot of pain points.

Research Goals

1

Develop an understanding of the marketplace.

2

Evaluate the strengths and weaknesses of competitors.

3

Determine what frustrates users of a similar product.

4

Determine what motivates users of a similar product.

5

Determine the user goals of a similar product.

6

Determine the user needs of a silimar product.

Methods

Market Research
I first had to understand who was reading, how they were reading, and what the trends were. Knowing who was reading helped me shape the criteria for interview participants. Knowing how they were reading allowed me to infer context. And knowing trends helped ensure my designs would be relevant.
View Full Report
Competitive Analysis
I also determined the strengths, weaknesses and existing solutions from competitors. If solutions already existed, it's usually more cost effective to not recreate the wheel. Determining the common features also helped with meeting user expectations.
View Full Report
User Interviews
I recruited eight participants based on market research demographics. They each agreed to recorded interviews through Zoom, where I asked open-ended questions to learn about their experiences and behaviors.
View Full Report

Insights

13%

Women are 13% more likely to have read a book in the last year

18-28

Millennials between 18-28 are the generation most likely to read books

$26B

Net revenue of the U.S. book publishing industry in 2019 was $26 billion

1/2

Half of all Americans over 12 years old have listened to an audiobook in the last year
Bookly
Goodreads
Litsy
Reading List
Strengths: of the U.S. book publishing industry in 2019 was $26 billion
Weaknesses: of the U.S. book publishing industry in 2019 was $26 billion

4/8

look to what their app friends are reading for inspiration

5/8

Goodreads users have a hard time finding specific functionality

7/8

use a separate app to check availability in a library before purchasing a book

Synthesis - Affinity Map

Progress
updates

Friend
recs

Celebrity
recs

Social
connection

Bad
experience

Library
books

People read a lot of books and it can become an expensive pastime. Being that 7/8 participants use a separate app to check the library before buying a book, finding a way to make this process easier would create a tremendous value for users.

Synthesis - User Persona

THE Design

Problem Defining

I used the insights from user interviews to frame the problems from Elena's POV. This allowed me to understand how Elena's book tracking behavior reflected her experience and, ultimately, uncover opportunities where I could add more value to that experience. Once I was satisfied the right problems were determined, I created HMW questions for which to ideate solutions.

Ideating

There were a different set of HMWs when I began brainstorming because I moved into ideation with 2/3 wrong problem statements. Turns out, I had already decided I was going to add a library feature before trusting the process to lead me there. Regardless of the error, the ideas generated proved valuable to the feature as I moved forward.

Information Architecture

The majority of users were frustrated with complex interface of Goodreads, so I designed this sitemap with simplicity top of mind. It's necessary that the sitemap is a living document, and while there were a couple versions, this one conforms to the final design.

Interaction Design - Task Flow

Prior to creating these flows, I fleshed out the UI requirements for each of the screens so the interactions were feasible. These tasks were created to test two main features based on user research: following a friend (Social connection) and borrowing a book from the library (Free book options), as well as one common feature among book tracking apps: adding a book to a future reads list.

Interaction Design - User Flow

The most time consuming part of starting a new book tracking app is inputting all the books you've read. I created this flow to visualize the process of inputting books so it was as efficient as possible.

Sketches & Wireframes

As I started sketching, it occurred to me that one of the main reasons users wouldn't leave Goodreads and join Bhuku is because of the sweat equity. People have spent years, some over a decade, tracking books, which could be thousands of books. How could any book tracking app expect to compete with that? So I did a little research, consulted a developer, and found an open API on the Goodreads site that allows for exporting of book lists! I was thrilled and I incorporated this into onboarding, which was the logical solution. But first, the evolution of some screens:

Home screen

Lo-fi sketch

Mid-fi wireframe

Hi-fi wireframe

Book screen

Lo-fi sketch

Mid-fi wireframe

Hi-fi wireframe

Library screen

Lo-fi sketch

Mid-fi wireframe

Hi-fi wireframe

Onboarding Screens

1

Elena wants to read a set number of books in a year, so I included the option to add her reading goals.

2

Elena looks to what her friends are reading for inspiration, so I included the option to search her phone contacts against the membership to find friends easily.

3

Elena trusts the recommendations of celebrities, so I added the option to follow a couple notable book loving celebrities.

4

To lower the exit barrier from Goodreads, I added the option to import Elena's Goodreads book list.

5

To reduce the frustration of using multiple apps for tracking, I added a library feature.

Hi-Fi Screens

1

Elena wants to see her reading progress because it makes her feel good, so I included a progress bar at the top of the home screen.

2

Elena becomes frustrated when an interface is complex, so I only used four main bottom nav categories.

3

Elena needs to see what her friends are reading so she can become inspired, so I added a social feed which highlights what her friends have started and finished reading.

4

Within each main category are additional tabs to help reduce cognitive load and minimize Elena's frustration.

5

Under each 'Active' book is a progress bar so Elena can see how far along she is in the book, since seeing her progress makes her feel good. If she is reading/listening to the book through the app, the progress is automatically updated. However, if she is reading it in multiple places, the option to update manually exists.

6

As a courtesy to Elena, a countdown of days until a book is returned to the library is indicated below the book on the library screen.

7

So it's easy to find a library book, each book screen has a button to search in the library.

8

Elena needs to see what her friends are reading so she may become inspired, so on another members profile, she can see their active books, their future list, their past list and their reviews.

UI Kit

To keep Elena first in the visual design, I came up with a list of brand attributes that reflected her demographic, which was the millennial female. I narrowed the list down to six which were the most visual: bold, charming, friendly, vibrant, modern and thoughtful. Once I started building the UI, I pulled each element I created into a UI kit in order to save time for the team when building future screens.
TESTING the Prototype
I looked to participants for qualitative data on a mid-fidelity prototype so their focus was on usability rather than the visual design. It was a moderated, remote usability test and there were five participants who were asked to share their screens and think-aloud so I could understand their process. What I found was:

3/5

participants felt the button and category labels lacked clarity

3/5

participants overlooked the option to search the library locally and instead used the global search

NEXT STEPS
reflection
Even though I usually strategize using a product roadmap for features to keep me on track, I didn't on this project and learned a valuable lesson on the importance of working within guidelines. Otherwise, I felt I managed the architecture well and was able to include a lot of screens without overwhelming the user by nesting them in tabs under each main category.
PREVIOUS
Starbuks
NEXT
Swiss Bakery
TOP