Bhuku Mockup.jpg

Bhuku

End-to-End Application Design for Mobile Experience

logo 1x.png
 
 
 

Scope and Focus

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 everything they have loved.

Bhuku has started collecting data on popular books. Inspired by goodreads.com, Bhuku wants to give a more user-centric approach to their app, adding features and flows that make it delightful for people to use. They want to use the full potential that a mobile app has, such as utilizing the camera to register books in a more automated way via optical character recognition (OCR), sending notifications to users to keep them engaged, tracking their progress on reads (potential gamification), etc.

There are a number of book cataloging, library, and reading apps available out there, but there has not been an app that does it all. Having an app where users can keep track of their books, read reviews, then being able to check out and read directly from one place, creates a more engaging user experience. Bhuku wants to have its app out on the mobile platform and its brand and logo defined.

 
 

Users & Audience

The target users of Bhuku are mainly targeted to book readers. People of all ages can use this app.


Team & Role

This was the final capstone project in Designlab UX Bootcamp. I took on this project on my own as the end-to-end UX/UI designer with feedback and guidance from my mentor, Noah Pan.


The Process

 

1. Research

Background

Who are Bhuku’s competitors? What could they improve? What did they do well?

Competitive Analysis

1:1 interviews with 6 different people who are readers were conducted to get a better understanding of their reading habits, how they share books, and how they store/keep track of books they’ve read.

 

Interview Questions

Interview Findings

 
 

2. Define

Persona

Based on the research debrief, a persona was created as a representation of our key audience segment.

Persona

 
 
 

Empathy Map

Being able to visualize user attitudes and behaviors helps to gain a deeper understanding of the users. Additionally, it helps create a shared understating of users’ needs, which aid in decision-making down the road.

Empathy Map

 
 
 

Storyboard

Using the persona and empathy map, a scenario was created to show how Bhuku is used in someone’s life. Since stories are generally more memorable and engaging, a storyboard was used to convey that.

 

Storyboard

 
 

Site Map

A site map was created to show the relationship between the content on the site.

Site Map

 
 
 

User Flow

To understand the user’s decision points and how the flow will go, a user flow was created. This helps to layout and think about the flow in order to start the design process.

User Flow

 
 
 

 

3. Design

Style Tile

Using Pinterest, I was able to quickly create a mood board and define the look and feel of Bhuku’s app and brand. This was used to create the Logo and Brand Style Tile going forward.

 
 
 

Sketches & Wireframes

Rough sketches were done to help me get an idea of where to plan the placement of different elements in each screen when going into the wireframes.

 

Rough Sketches

Wireframes

 
 

HiFi Design

As I’m more of a visual person, I started to work on the Hifi visual design and continued to build out different screens for the app. I made sure to build out enough screens to prepare for a smooth prototype going into testing. The Hifi designs were iterated several times with feedback from my mentor to get to this point.

 

HiFi Design

 
 

4. Prototype

Keeping in mind the different use cases that a user will encounter, elements were linked to different screens for the prototype. I wanted to make sure that there were enough screens built out to ensure a smooth prototype experience during the user testings.

Below, you can find a quick animation of what the prototype looks like and the link to access it.

 
 
 

5. Test

After the prototype was in good working order, it was time to move on to usability testing. In order for me to validate or disprove all of the design decisions made so far, I recruited 6 people to help me out in testing the Bhuku app. As this was a mobile prototype, I decided to conduct a live in-person user test so I could be able to set up a camera to record the user’s interaction on the mobile device.

A test plan of the usability test was created to give focus and structure to the testing. The main goals were to evaluate the usability of the app, and identify sticking points.

Participants were presented different tasks to accomplish:

 
 
 

A total of 6 people were recruited to perform user testing on this app. All the participants were able to easily navigate to, and find what they were looking for. Overall, it was a simple and straightforward process interacting with the app. Although the Figma prototype was buggy at times, the participants were not affected by it and all explained what they expected to happen.

Some findings that came up were:

user testing results copy.png
 
 
 

After user testing and summarizing all of the findings, patterns emerged, and was able to identify places that needed to be revised for a better user experience. 2 groups were created: Priority 1 Revisions (must have, quick to change), and Priority 2 Revisions (nice to have, takes more time). As time was limited, I focused on making the Priority 1 changes.

 
 
 

Below are some examples of the Priority 1 revisions:

 
 
 
 

Next Steps

The next steps for this would be to iterate on the Hifi designs and incorporate all the P1 and P2 revisions. A new set of participants will be recruited to perform usability tests on the revised prototype. This process of prototyping, testing, and iteration would continue until stakeholders were satisfied with the results enough to put the design into production.