Client: Bhuku This is a fictional company and speculative project
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
Tools: Sketch, InVision

Background: 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.

Objective: Design Bhuku; a mobile app, and design Bhuku’s brand.

You can find the High Fidelity Prototype here or find it towards the end of this case study.

1. Empathize

market research

Women are 40% more likely (on average) to be active on literary service apps, while men were 40% LESS likely. This single stat would play a large role in my approach to the UI and color palette. Also very interesting was that the top 10 highest rated library service apps in 2019 were all free. This stat gave me great insight on how to approach the scope. Finally, people who use Goodreads (Bhukus direct competitor) are 20x more likely (than the average internet user) to own a van, 8x more likely to own a truck, 3x more likely to own an SUV, than an ordinary car - an indication that these users have children, which helped me define the demographic base of my users.

competitive analysis

All of Bhukus largest competitors, including their indirect competition, have issues with outdated UI or UI that feels empty and user flow that is confusing or unintuitive. I took that opportunity to tighten and naturalize the user flow in Bhuku and begin thinking about how I could give users the same sense of joy they might get in their personal physical library, through UI.

PROVISIONAL PERSONAS

I had enough data to make a hypothetical group of people I might encounter during my user interviews. From my research, I knew that I had to focus on women, specifically moms… Moms who read! From there, I followed the data toward other possible female readers, like students, book junkies and then my local book worms (who happen to have a good deal of pride about it.) The provisional personas here weren’t just fun to make, they also helped put me in a fun state of mind when hitting the streets for interviews.

TNG is a great show that glorifies science and pursuit of knowledge… What better group could I ask for? These were certainly my ideal and most likely users.

1 ON 1 USER INTERVIEWS

Walking around north Brooklyn, I encountered four people willing to share their thoughts with me. Going off a pre-written script, I asked the participants the same questions, making alterations where necessary. Here are my transcripts of those interviews.

With the transcripts in hand I set out to make my observations and synthesize some data. Using the Empathy Map technique, I discovered that my users needed: Aesthetic value or a sense of sentimentality, A tracking system that was fun, External integration with other book services and notifications about what was new and what their friends were up to!

empathy map

Notifications, integration, tracking and aesthetics. With these needs derived from my empathy map, I was able to create a user persona.

user persona

In my secondary research, I noted that moms may have been the primary demographic however my experience speaking with real people in North Brooklyn left me convinced that younger women were more engaged. These young women are smart, social and prefer a minimalist lifestyle which keeps them in the know and allows for social interactions. Maya is going to act as my base user persona. She is a good amalgamation of the modern tech savvy reader and will be a good person to look to when designing the app itself.

2. Define

POV STATEMENTS & HMW QUESTIONS

Taking the needs of my persona, Maya, and looking at the insights of the empathy map, I generated point of view statements which lead to the projects, “How Might We?” questions. These questions will be the base for my initial iteration but its not just the question that is helpful here; the context of the question is also established with a point of view, which brings me closer to empathizing with Maya!

1. Maya is social and wants to know what her friends are doing. How might we show Maya social notifications?

2. Maya is a minimalist and rejoices when her apps work together. How might we integrate Maya’s other book apps with Bhuku?

3. Maya loves being rewarded for accomplishing tasks, but wont do a task that is not enjoyable. How might we make the page tracking process an experience Maya enjoys?

4. Maya prefers physical books and takes pride in her physical library’s aesthetic value. How might we provide Maya with aesthetic value?

BRAINSTORMING

I took 2 to 3 minutes to brainstorm answers to my HMW questions. I love brainstorming. It’s fun, it’s fast and often leads to good ideas. The best part is even if you don’t come up with anything great, just brainstorming alone is a great way to shake up your mental model.

For me, the notion of "achievements added to the My Library screens would be rewarding and give opportunities to facilitate aesthetic value.

BUSINESS & USER GOALS

Gotta lay out what everyone needs, there is always common ground and that common ground is a great focal point when writing up a feature roadmap. Here I can see that “Connection” is a great focal point.

FEATURE ROADMAP

The features is getting more defined by the moment, this is a perfect time to set priorities. Many current book apps integrate with other apps, they have notifications and they track progress well, but they fall short with UI. Because of this, aesthetics became the highest priority as my other needs could be achieved with existing patterns. But how do you achieve good aesthetics? Of course the UI must look and feel great, thats a given. But how else can I give the user the sense of pride they feel for their physical collections? I decided to focus on the idea of user titles, earned from setting book statuses to “finished”.

Ideate

SITEMAP

Time to start building my foundation, nice and simple with a focus on global navigation helps me visualize the flow of screens.

TASK FLOW

Direct and indirect flow through the app will be a key factor in establishing Bhukus aesthetic feel. I spent a good amount of time devising task and user flow to help wrap my head around it. There are a lot of opportunities at this point to really game-ify Bhuku and I think that is the right direction. However, the scope and scale of the project is at odds with that idea, so a simpler more manageable library with game elements will work better. Simple game mechanics here to propel the user: Unlock comments and earn User titles by finishing books.

USER FLOW

low FIDELITY WIREFRAME sketches

Ive got a solid understanding of how the feature works and how it will be implemented. Its almost time to start building so let me lay some visual ground work. This quick sketch looks a bit gnarly, but its good to get something down as quick as the ideas arrive!

From my sketches, I quickly put together some greyscale wireframes that would serve as screens used in my prototype. I knew that the My Library screens would need extra attention so I intentionally added color to the library screens to help me focus on the aesthetic goal, however in the long run this was probably a mistake. I ended up scraping the layout of that screen all together but iteration is key.

Mid FIDELITY wireframes

Prototype

Mid FIDELITY prototype

With my mid fidelity wireframes itching to see some thumb action, I use Invision to create a functional prototype focusing on the flow from browsing to book selection to rate and comment. This flow in particular is how the My Library screens will be populated so it is an essential to nail the task flow.

Test

affinity map

With a prototype ready, I set out to test it on some users and after an afternoon walking around north Brooklyn. Once again I made a point to talk and interact with real people. Observing participants in a real world setting is invaluable. The tone in their voice, the speed of their inputs, their unspoken hesitations and slight body language all speak just as loud to me as their words.

From here it was a matter of updating my wireframes and getting a high fidelity prototype ready. But first, I started to think about the brand identity and how Bhuku would present itself. I quickly put together a mood board. My goal here is to accentuate the book collection, not the app itself, so I looked for solid colors, flowing lines and round edges. I want to instill a sense of pride in the users library and to do that I need Bhuku to facilitate that experience. Bhuku needs to be present but not overbearing, it needs to be visible but able to fade into the background.

mood board

Light fun colors, rounded edges, simple layouts… I had enough to start work on a logo. Normally I would start a logo on paper, but I had this idea floating around in my head just using rectangles and jumped into Sketch right away. The obvious imagery here is books and I often try to not go with the obvious choice. However, this is a simple app that isn’t trying to reinvent the genre, so an updated look is preferable to a unique symbol. Books it is!

logo design

Light flowing blues, sharp white lines, a focus on a collection… It matched my persona, and it felt right. On to the style tile. Once again, less is more here as well. The typography is elegant and stylish with titles (book titles) and a clean sans-serif with everything else. I’m thinking, “Some books have new chapter titles with elegant typography and clean body text. Kind of like when the first letter of the first word of a new chapter is all stylish and attention grabbing!”

style tile

high fidelity prototype

From here I was ready to make some high fidelity wireframes, as well as a prototype which you can check out here or click around the iPhone below. One of my favorite design ideas (which could use further iteration) is the toggle switches to set book status. Bhuku’s competition only allows users to set a book as “Want to Read” “Reading” or “Finished” however my research clearly revealed that those options are not mutually exclusive! Many people have books they have finished but still want to read, or are reading but have at some point finished. Another simple but effective design is earning user titles. Notice that when Maya finishes reading The Shining, her profile announces that she is now a “Guest of the Overlook Hotel”!

These are the high fidelity wireframes used in the prototype.

ui kit

Reflection

By giving users the ability earn titles for books they have finished, I can game-a-fy this kind of library service app. Users who enjoy book apps are hungry for a more fun and aesthetically pleasing experience and Bhuku can offer that through Hi-resolution imagery in users libraries, social interaction with friends and fun achievements!

WHATS NEXT

Moving forward, Bhuku will need many more screens and features. Purchasing books, opening and reading books directly in Bhuku or on a Kindle type device and further exploration of social concepts like books clubs.