Project Details
Client: Bhuku
Timeline: September 18, 2019 - October 2, 2019 (2 weeks)
Team: Self-directed with feedback from mentor and peers
Deliverables: Mobile app prototype and branding
Role: UX Design, UI Design, Researcher
Tools: Sketch, Illustrator, InVision
Bhuku is an app for book lovers that will help users track everything they own, books they have read, what they will read next, and also everything they have loved so far. It is a social cataloging app that wants to give a more user-centric approach, adding features and flows that make it delightful for people to use.
*This is a speculative project.
Background
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
1
Research
The research phase included gaining an understanding of current book cataloging apps in order to get a more thorough understanding of the landscape and where the client fits in the field. This was achieved by looking into market and the customer, as well as identifying challenges and trends.
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
Research was first conducted 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
Competitive Analysis was conducted to examine strengths, weaknesses and strategies. Direct competitors were established by having a similar cataloging model, while indirect competitors were either more varied social cataloging or based solely on e-book distribution and discovery.
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
Primary research was conducted in the form of 1-on-1 interviews which would provide insight based on real experiences and build empathy with the user. A script of open-ended questions was utilized in order to not lead the participants and to solicit personal responses about their interaction with the client and cafes in general. See the full interview guide here.
5 interview participants
1 male / 4 females
Age range from 31 - 41 years
All read books regularly
2
Define
The define phase consisted of synthesizing research in order to define the problems that needed to be solved. This was done by identifying the user’s needs, goals, motivations and frustrations as well as establishing the questions that would need to be answered in the ideate phase.
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
Each behavior, experience and comment made by the participants of the interviews were recorded and then grouped by similar traits. First they were grouped by patterns of their experience, then by general underlying themes. These patterns created groups that illustrated commonalities, which informed a list of insights. Based on these insights, user needs were established.
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
Persona
The research data was further synthesized to create a user persona that was based on observations and patterns established in the interviews. Sofia was created to be the archetypal user and would be the “person” I would look to throughout the remainder of the design to ensure it always stayed user-focused.
POV Statements & HMW Questions
With some insight into the user, I needed to concretely establish the problem. POV statements were created based on insights and needs discovered during primary research and used to provide meaningful and actionable problem statements. To ensure I was solving the problem from the user’s perspective, HMW questions were established in order to spark idea-generation in the upcoming ideate phase.
3
Ideate
In the ideate phase, numerous ideas were generated in order to address the problem statements and find new ways of looking at the problems themselves. I was looking to produce ideas that would help me discover the best way to solve the problem and the tools that would be needed to do so.
Goal:
Generate ideas for solutions, features, information architecture and flows
Deliverables:
Brainstorming | Product Roadmap | Site Map | User Flow
Brainstorming
To begin generating as many ideas as possible to address the HMW questions, I conducted a brainstorming exercise that allowed me to come up with a lot of ideas in a short period of time. It didn’t matter if they were the best solutions or even solutions I could realistically consider as the goal was to come up with quantity and hope that some quality came from it.
Product Roadmap
Based on the previously-established HMW Questions and taking the business and user goals into consideration, 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.
4
Design
With solutions generated and information architecture considered, I further developed the interaction design through establishing page layout, 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
Sketches of low-fidelity wireframes were created using existing design patterns as a foundation. Various layouts and UI elements were considered in an effort to discover the solution that would work best in the meeting both business and user goals.
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 be both easy to navigate and solve previously-established problems. These mid-fidelity wireframes would be used to prototype the design and then as a base for high-fidelity wireframes.
5
Prototype
The prototype phase tested the usability of the design via a prototype that allowed me to conduct moderated usability testing. This testing would inform recommendations for updates to improve the prototype on further iterations to optimize the user experience.
Goal:
To 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 pages 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.
6
Iterate
With the data collected in the usability tests, the next step was to synthesize the information into actionable recommendations for updates and to iterate further
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 three major insights based on pain points and hesitations which were used to create recommendations to updates prioritized by the frequency of the action and the ease of implementation of the recommendation.
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 and 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.