Bhuku
An app for book lovers to help them track their reading journey.
Overview
Bhuku is an app for book lovers that will help them track every book they own, books they have read, what they will read next, and everything they have loved so far.
Project Details
Design Role: Lead Product Designer
Tools Used: Figma, Figjam
Client: Bhuku
The Problem
The challenge was to design an end-to-end application for book lovers that put the user at the center of the experience and is delightful to use.
The Solution
Bhuku helps users manage their book collections, recommends books to read, and helps users reach their reading goals.
User InterviewsI put together a list of questions to guide me when conducting user interviews. I used the research plan, competitive analysis, and provisional personas when drafting these questions. I then conducted my user interviews and summarized these findings into a report. This summary report assisted me when creating my empathy map.
Synthesis & DefiningUncovering Insights + Identifying Needs - In order to extract insights and needs from user interviews, I created an empathy map. After my user interviews were completed I categorized each user’s statements into the following segments; thinking & feeling, doing, seeing & hearing, and say. From the organized empathy map, I extracted user insights and user needs.
Primary User PersonaBased on the information from the clustered empathy map and my general research, I created a provisional persona of an ideal Bhuku user. Creating a single persona of a potential target customer is important because it allowed me to identify points of view from which the user might engage with the services and imagine how might we’s, that would create solutions for their unmet needs.Defining the Design ProblemI translated my primary persona’s insights and needs to define Point of View statements. I then established how might we questions to help me further frame my persona's problems.Brainstorming & IdeationI conducted a group brainstorming session to generate ideas for each HMW. This gave me a variety of fresh perspectives and new ideas to consider when building solutions to meet the user's needs.
Project StrategyComparing Business and User GoalsI compared and contrasted Bhuku’s initial business goals with the goals of the user in order to analyze any commonality between them. Overall, knowing the overlap between the two-goal sets improved my ability to focus on a solution that met both needs.
Product Roadmap
I then created a product roadmap to outline goals features, and metrics for the app. I used my POV, HMW questions, business & user goals, and the ideas that I had brainstormed when establishing features.
App Map
I created a sitemap for Bhuku’s app to show the app structure and features I planned to design. I began by referencing my product roadmap as a guide to inform how the new functionality might operate in the current app experience.
Interaction Design
UI Requirements
I identified feature requirements for key pages to assist me in the creation of my high fidelity prototype. I developed a list of user interface requirements by reviewing the sitemap and product roadmap.
User Flow
I created a user flow to showcase the user's journey through each expected scenario. Using my site map as a base, I thought through each task that the user would need to take in order to successfully complete the task and outlined it visually to ensure it made sense overall.
Task Flow
I created a task flow to show how a user would complete a task on the app. I created my task flow from my user flow, adding in more steps and showing potential user's decisions.
Wire Framing
To start thinking about how the content will be arranged on key pages I created low fidelity wireframe sketches. I started by referencing my UI requirements doc and looked at competitor apps for inspiration.
Mid-Fidelity Prototype
To show how the visual design will look I created Mid fidelity wireframes of key screens. I then brought these screens into the Marvell app and built a mid-fidelity prototype.
Usability Testing
To test the usability design with participants I created a prototype of mid-fidelity wireframes. I imported my screens into Marvel App and linked each screen.Usability TestI created a usability test plan to define the test objectives for my usability test. I tested the app prototype with participants and documented their experience interacting with the prototype. Then, I compiled notes from each session and created a summary of all of the test’s findings.Affinity MapI created an affinity map to extract insights and design recommendations. I used my usability test notes and arranged these into clusters. I grouped these clusters into successes, patterns, and comments. From this, I gathered insights then made design recommendations.
UI Design
Visual DirectionTo establish a visual direction for Bhuku I created a mood board. I started with words that I thought best described the Bhuku brand. I then worked on a color combination and searched Pinterest for inspiring images.Style TileTo use as a reference when creating high fidelity designs I created a style tile. Using my mood board as a reference I put together Bhuku’s logo, typography, colors, and images.UI KitTo serve as a guide when creating high fidelity wireframes I created a UI Kit. I added key elements using my style tile as a reference.
Next Steps
Add additional features outlined in my product roadmap.
Work more on the visual design.
Redline the deliverable for developer handoff.