BHUKU

Project Details

Background

Bhuku is an app for book lovers that will help users track the books they own, books they have read and everything they want to read in the future. It is a social cataloging app with a user-centric approach that will incorporate features and flows that make it a delightful experience for users.
*This is a speculative project.

Problem

Bhuku needs a book cataloging app that allows users to keep track of and discover new books to keep their reading life organized. Additionally, they need to establish a visual identity and logo for their brand.

Process

Research
The first step was to gain a better understanding of the existing book cataloging industry by gathering data on the market and demographics of users as well as analysis of Bhuku’s competitors.

Goal:
To research the book cataloging market and gain an understanding of the user
Deliverables:
Market Research | Competitive Analysis | Provisional Personas | User Interviews

Market Research

In order to understand the field in which Bhuku exists, I conducted research on the existing statistics, demographics and trends within the industry by examining resources online.

Key Statistics

• 76% of adult Americans have read a book in whole or part in the past year

• 65% of adults have read a printed book within the past year / 38% have read an e-book

• 75% of women / 73% of men have read a book in the last year

• 60% of book buyers are female / 40% male

Demographics of Goodreads’ Users

• 19.2 million US users / 2.4 million Canadian users

• Women are 40% more likely than average to be active on Goodreads, while men are 40% less likely 

• More likely than average book readers to be under 35 years old

• More likely than average book readers to have grad school education

• Most common age group of users: 18 - 24 years old, followed by 25 - 34 years old, then 35 - 44 years old

• Most common education of users: grad school, followed by college degree

Why People Read

• 26% of book readers read for: learning, gaining knowledge and discovering information

• 15% read for: the pleasures of escaping reality, becoming immersed in another world and the enjoyment they get from using their imaginations 

• 12% read for: the entertainment value of reading, the drama of good stories, the suspense of watching a good plot unfold

• 12% enjoy relaxing while reading and having quiet time

Challenges

• Some studies show an overall decline in adult readers over the past 10-15 years 

• Books have to compete with more modern forms of entertainment (TV, computer use, social app use, etc)

• Complex information architecture of app

Trends

• Americans reading daily for leisure has declined roughly 10% in the last 15 years 

• Although print remains the most popular form of book reading, e-book use on tablets and mobile devices is increasing 

• The average annual expenditure on reading remains similar over the past decade, with annual fluctuations

• Younger readership is growing in connection with movies based on young adult fiction titles

Competitive Analysis

Next, I needed to see what else was out there. Who were the direct and indirect competitors and what were their strengths and weaknesses from a UI and heuristics point of view. I found there to be at least a handful of direct competitors on the market and learned some valuable insight into what they were doing well and what could be improved upon in the design for Bhuku.

Provisional Personas

Based on the market research, provisional personas were created by generalizing assumptions about demographic groups of existing users. Based on the ages of Goodreads’ users, as well as the demographics of readers in general, these personas captured who I believed I would encounter in further research.

User Interviews

The next step was to establish empathy with the user by conducting primary research in the form of 1-on-1 interviews. This would provide valuable insight based on real experiences and tell me more about the needs of people who read regularly. I created a script of open-ended questions in order to solicit personal responses about reading and book cataloging. See the full interview guide here.

• 5 interview participants

• 1 male / 4 females

• Age range from 31 - 41 years

• All read books regularly

Define
In the next phase, I needed to truly define the problem that I was trying to solve. In order to do this, I synthesized the research in ways that would give me more specific direction for the design and establish actionable problem statements and questions to spark ideation for possible solutions.

Goal:
Define the problems of the project through research synthesis in order to guide next steps
Deliverables:
Empathy Map | Persona | POV Statements & HMW Questions

Empathy Map

I wrote each behavior, experience and comment from the 1-on-1 interviews on sticky notes and arranged them into patterns so I could understand the commonalities shared by the participants. These patterns in behavior and experience provided me with a few valuable insights that would directly be used to articulate three user needs.

Persona

Insights:

• Users rely on recommendations for finding new books to read

• Users like to research books before making a decision on what to read

• Users like to read books by certain authors

• Users try to keep track of books they’d like to read

Needs:

• Users need to be given recommendations

• Users need to be given sufficient information about books

• Users need to be given updates on work by particular authors

• Users need to be able to make a list of books they’re interested in

The research data was further synthesized to create a user persona that was based on observations and patterns established in the interviews. I created Sofia as the archetypal user that I would reference throughout the design process to ensure I was keeping everything user-centric and designing with a real person in mind.

POV Statements & HMW Questions

From the insights and needs established with the empathy map, I crafted a set of actionable statements from the point of view of the user. From these POV statements, I based How Might We questions as a way to provide specific direction to ideation for solutions. This process would ensure the solutions I came up with for the design were created as a way to directly respond to the needs of the user.

Brainstorming

To begin generating as many ideas as possible to address the HMW questions, I conducted an individual brainstorming exercise in which I came up with a multitude of solutions in a set amount of time.

Product Roadmap

Based on the previously-established HMW Questions and referencing the list of possible solutions I generated in brainstorming, I created a list of features to be included with the goal of answering each question. Organized by priority, this would guide what would need to be included in the design and would could potentially come later should there be limited resources.

App Map

In order to ensure the design would be able to include the features laid out to solve the established problems, I created an app map. This would show all the pages that would need to be created and their relationship to one another.

User Flow

For a more thorough look at the various flows a user would take to accomplish particular tasks, I created three scenarios and a diagram of users completing various tasks within the scenario. This allowed me to think about the non-linear ways users would navigate the site and take into consideration the choices they would be making along the way.

Design
Next, it was time to begin developing the interaction design through establishing screen layouts, visual hierarchy and implementation of UI elements.

Goal:
Establish the layout and complete interaction design in order to move forward into prototyping
Deliverables:
Low-Fidelity Wireframe Sketches | Mid-Fidelity Wireframes

Low-Fidelity Wireframe Sketches

Since the primary research pointed to user needs revolving more around discovery and listing books to read, I looked to existing design patterns within apps that solve the same types of problems. I created sketches of low-fidelity wireframes and referenced Netflix, Spotify and some direct competitors for design patterns.

Mid-Fidelity Wireframes

Using the low-fidelity wireframes as a reference, I created mid-fidelity wireframes in Sketch. These would address visual hierarchy, layout and UI elements in an effort to create an easy flow for the user as well as incorporate the features previously established to address the users’ needs. These mid-fidelity wireframes would be used to prototype the design and then as a base for high-fidelity wireframes.

Prototype
Using the mid-fidelity wireframes, I created a prototype that would allow me to conduct moderated usability testing in order to illuminate the hesitations and pain points users experienced with the current design. From this testing, i would make UI recommendations for further iterations to improve the user experience.

Goal:
Create a clickable prototype of the Bhuku app and conduct usability tests
Deliverables:
Mid-Fidelity Prototype | Usability Testing

Mid-Fidelity Prototype

In order to get user feedback and identify areas of opportunity, I created a clickable prototype using the InVision app that incorporated mid-fidelity wireframes of all screens that would be needed to complete the tasks included in usability testing. Interact with the mid-fidelity prototype here.

Usability Testing

I conducted moderated usability testing with random participants in order to get real user feedback and identify any pain points and causes of hesitation. I created a usability testing plan to outline and plan methodologies, subjects and script prior to conducting the tests. See full test planning document here.

Objectives:

• Test how effectively users can navigate the app

• Test how users sign up

• Test how users add a book to the “want to read” list using the camera upon sign up

• Test how users follow a particular author

• Test how users find a full list of a particular author’s books

• Test how users add a book to the “have read” list by scanning a barcode

Results:
Conducting the usability test with 6 participants, I recorded the screen as well as audio while they completed the tasks given to them and thought out loud while they did so. This provided valuable insights that would allow me to make further iterations based on their experiences with the design. See full usability test findings here.

Iterate
With the the data collected in the usability tests, I needed to synthesize the information in a way that would provide recommendations for UI updates to iterate further for a more positive experience for the user.

Goal:
To identify priority improvements and iterate upon the design to create a high-fidelity prototype
Deliverables:
Affinity Map | Branding | UI Kit | High-Fidelity Wireframes | Final Prototype

Affinity Map

An affinity map was created in order to synthesize the data collected during usability tests into actionable recommendations to the UI. This was done by recording all actions taken, observations and comments made during the usability tests and grouping them by patterns of commonality. These groups then provided insights based on pain points and hesitations which were used to create recommendations for updates to the design.

Branding

A visual language for the brand was developed to meet the brand attributes by creating a style tile. This would serve as the building blocks for the high-fidelity wireframes by incorporating a color scheme, typography, logo and imagery that reflects the brand. With this established, I could create a cohesive and consistent visual representation.

UI Kit

To ensure consistency in design in the future and ease the handoff process, a UI kit was created that included all relevant UI elements that would be included in the high-fidelity wireframes. This document serves as a guide to anyone updating the design in the future to maintain consistency and clarity.

High-Fidelity Wireframes & Final Prototype

High-fidelity wireframes were created by incorporating visual elements and branding from the style tile and UI kit into the layouts previously established in the mid-fidelity wireframes. Additionally, all recommendations that resulted from the affinity map were incorporated in the updated wireframes. The high-fidelity wireframes were then used to create an updated prototype that could be shared with the client and iterated upon further.

Interact with the high-fidelity prototype here.

Reflection

Next Steps

Designing a social cataloging app from the ground up allowed me to truly learn what was important to the user and how to best solve the problems established by primary research. Understanding the priorities that the users had of discovery and list-making provided the inspiration for a user-centered design with features that are more current and in-line with what users expect for an experience than what is provided in the existing market.

• Conduct further usability testing

• Iterate on high-fidelity wireframes and prototype

• Design remainder of app

• Developer handoff