UX/UI Design + Branding

Bhuku

An Inventory for Books

 
BHUKU_iPhone.png
 
 

Role

Lead UX/UI Designer (Research, Interaction Design, Visual Design)

Timeline

80 hours over 4 weeks

 
 
 

“A classic is a book that has never finished saying what it has to say.” —Italo Calvino

 
 
 

Background

Bhuku is an app for book lovers that helps users track everything they own, books they have read, what they will read next, and also everything they have loved so far. In essence, it’s quite similar to Goodreads, with the key differentiation being the user-friendly, fresh, and clean design.

 
 

Problem

Bhuku needs help to create a new user-centric app and establish a brand that will set them apart from the competition.

 
 

Outcome

Bhuku’s new iOS mobile app is the perfect combination of form and function: a fresh, clean design that allows users to organize their reading lists, connect with readers and authors, and explore titles from the sources they trust.

 
 

 
 

Research

Analyzing Secondary Data

Beginning with market research, I spent some time familiarizing myself with reading-related apps and trends within the book world. Because Bhuku is inspired by Goodreads, I also spent time studying the audience they appeal to and their approach to helping me log their reading activity.

Key Discoveries

  • Americans are READING.

  • Young adults are the heaviest readers.

  • The number of people reading e-books has stagnated.

  • Printed books are the most popular medium.

  • Women read more than men.

  • Readership increases with education.


Trends

  • Decline in e-book sales

  • Increase in independently published books

  • Rise of audio books


Goodreads

  • Launched in 2007, Goodreads is the world’s largest site for readers and book recommendations.

  • 80 million members, 2.3 billion books added, and 80 million reviews

  • 47% of users are of the millennial age range (23% aged 18-24, 24% aged 25-34).


From there, I conducted a competitive analysis. I compared competitors’ strengths and weaknesses, where I identified a broad variety of approaches and specializations. This helped me discover opportunities for Bhuku to differentiate itself and provide a unique value to users. 

View Market Research and Competitive Analysis here.


I then created three provisional personas based on Bhuku’s target market and information I’d gathered during my initial deep dive into secondary sources. This helped me identify people who might be ideal interview subjects and consider how I might want to frame some of my interview questions and planning.

 
 
 
 

Conducting Primary Research

I then conducted my own research. I first created an interview guide to serve as a rubric during 1-on-1 interviews, focusing on user’s reading habits. I conducted seven interviews (3 in-person, 4 via video chat) over the course of two days. Participants were men and women ranging in ages 27-41. All participants were avid readers and had some familiarity with Goodreads.


Assumptions

  • Users prefer to access social cataloging apps on their mobile devices.

  • Users have a desire to keep an archive of books they have read, and a list of books they want to read.

  • Users are unsatisfied with the current reading inventory apps and employ workarounds.

  • Users for reading list technology skew younger (40 years old and under).

  • Users seek out recommendations when deciding what to read next.


View Interview Guide here.

 
 

 
 

Research Synthesis

Uncovering Insights and Identifying Needs

I then created an empathy map to synthesize the information gathered during user interviews. I grouped patterns and themes, helping me uncover insights from my observations and move towards identifying implicit user needs.

 
 
 
 

Insights

  • Users consult a multitude of credible literature reviews when choosing what to read.

  • Users value recommendations from those who know them personally, over all other sources.

  • Users employ a variety of apps to keep records of books they want to read.


Needs

  • Users need access to reviews from trusted sources.

  • Users need the ability to receive recommendations from people they know.

  • Users need a streamlined way to keep track of the books they want to read.

View full Empathy Map here.

Creating an Ideal user

Based on the insights and needs uncovered during my primary research synthesis, I established a user persona: Noelle Peterson. Noelle is a busy videographer living in Los Angeles, California. She often reads physical books to counter-balance her screen time. She learns about new titles from friends and often consults opinions of established review sites. Her list-keeping skills could use some work. She misplaces her ‘to-read’ lists quite often and is left frustrated when she’s searching for her next read.

 
 
 
 

 
 

Define, Ideate + Strategize

Defining the Design Problem

With a persona established, I moved into translating the insights and needs of Noelle into defined Point of View Statements, then crafting a set of How Might We Questions to guide my design. By defining the design challenge and framing it as a question, the roadwork for the ideation phase is paved for a range of innovative solutions.

 
 
 
 

How might we give Noelle access to reviews from trusted sources?

 

Generating Ideas

Next, I facilitated a group brainstorming session of 6 participants. For each HMW Question, the group recorded ideas on sticky notes, and shared with the rest of the group, in order to help build multi-tiered ideas. 

 
 
 
 
IMG_8881.jpg
 
 

I wanted to generate as many ideas as possible before determining which direction to pursue next, so after the leading a group, I also conducted a solo brainstorming session. Again focusing on the HMW questions, I first came up with ideas and quickly wrote them down on post-its.

 
 
 
 
 

Comparing Business and User Goals

With a multitude of ideas on paper, it was now time to prioritize which ones to pursue. With the help of a Venn diagram, I was able to map out a set of project goals by first identifying business and user goals individually, then establishing where those goals overlapped. The resulting shared goals gave me a way of assessing which ideas would be best suited for the needs of both Bhuku and its users.

 
 
 
 
 

Prioritizing Solutions

With my shared goals in mind, I went back to review the ideas I’d generated during brainstorming, determining which ones could be further developed into features. In the resulting product roadmap, features are presented in order of priority, along with proposed metrics to assess the impact and effectiveness of the features.

 
 
 
 
 

Assigning a Structure

Informed by the features and priorities outlined in my product roadmap, I created a sitemap showing the content architecture proposed for Bhuku.  

 
 
 
 

 
 

Interaction Design

Charting a Path

With the app map established, I moved towards prototyping. I first created a task flow that identified a key task that all users complete in an identical way.

 
 
 
 

Then, going into even more detail, I created a user flow thinking through three scenarios, showing three possible ways a user might interact with Bhuku. Doing this helped me make sure I’d included all necessary key frames I’d need as I created wireframes for my prototype.

 
 
 
 

Referencing the screens mapped out in my task and user flows, I outlined high level and detailed requirements that key screens would would need to fulfill. The resulting UI requirements document served as rubric of sorts as I designed the Bhuku’s key screens.

View UI Requirements here.

Laying It Out

I created low-fidelity wireframe sketches of key screens within the flows I’d mapped out. Thinking through layout, interaction, and flow of these screens helped save time as I moved into creating mid-fidelity wireframes. 

 
 
 
 

Moving from pencil and paper to digital, I used Sketch to create responsive mid-fidelity wireframes, refining a bit here and there. The goal was to create a more tangible view of the website for my prototype.

 
 
 
 

With the key screens of the user flow designed, I created a mid-fidelity prototype in InVision to share with users. 

 
 
ezgif.com-crop.gif
 
 

This InVision Prototype is currently archived. Let me know if you'd like to view it. 

 
 

 
 

Usability Testing

Usability Testing

Testing Users

Before speaking with users, I first outlined objectives, goals and procedures in a usability testing plan document. This served as a rubric during testing sessions.

View Usability Testing Plan here.

Five participants were asked to complete a series of four tasks tied to four scenarios during in-person testing.

Tasks

  1. Find a user that has been recommended to you and follow a book list curated by them

  2. View activity by users you follow and add one of the shared books to a new list

  3. Search for a book and share it with a friend

  4. Navigate to your reading activity and mark a book as complete

Users felt comfortable navigating the app, almost more than I expected. Areas where I anticipated confusion or disorientation, like the ‘Following’ tab, caused little to no impact on the completion of tasks. Users had the most trouble finding where and how to share content outside of the app, a more minimal feature in the grand scheme of things.

Prioritizing Revisions

Referring to the notes taken during user testing, I created post-its with observations and notes for each test subject, I looked for patterns and trends and sorted accordingly. I then created an affinity map as a way of translating my observations to insights and recommendations.

 
 
 
 

The recommendations realized here served as a revision guideline for the next iteration of the website.

Insights

  • Users expect the ... (more) icon to be more visible on the book detail screen

  • Users are confused by language within the expanding book synopsis section, assuming when clicked, it would reveal more options (ie sharing)

  • Users are thrown off by inconsistencies in placement of CTA’s in sliding menus

Recommendations

  • Reconfigure the layout of ... (more) icons to sit below images on book detail screens, following styling throughout the rest of the app

  • Change the language for expanding text (from ‘more’), possibly using an icon instead

  • Create a uniform layout for sliding menus and their CTA’s

It was apparent that most users had trouble finding where and how to share content outside the app, and in doing so, confused icons with verbiage that meant nearly the same thing. Simple adjustments to layout and hierarchy were made to help resolve the problem. As for my final recommendation, after researching design patterns, I discovered that my pop-up window layout and design were pretty standard and only warranted minimal tweaking.

View full Affinity Map here.

 
 

 
 

User Interface Design + Iteration

Establishing a Visual Direction

Building Bhuku’s visual identity began by defining brand attributes, or adjectives that were inspired by the project brief:

modern, inspiring, functional, minimal, trustworthy, refreshing

I then collected visual inspiration, using Pinterest to create a mood board.

View Mood Board here.

Ideation for Bhuku’s logo began with word mapping, then sketching out preliminary ideas. I digitized my favorite ideas and finessed until I had something that felt like a strong mark.

Bhuku_logo.png
 

Pulling inspiration from my mood board, I created a color palette, type treatment, and set a visual tone through imagery for the brand. This style tile served as the foundation of the site's interface design.

 
 

Implementing Recommended Revisions

Revisiting my mid-fidelity wireframes, I applied the visual design outlined in my style tile, also making recommended changes as outlined in my affinity map. These high-fidelity wireframes included changes to layout for easier navigation.

 

I brought these wireframes into InVision once again, to create a high-fidelity prototype that offers another opportunity for user testing before going further with the site design and implementation. 

 

Finally, I created a UI kit to serve as a reference and resource guide for anyone working on the site. This document provides a place to archive styles and elements used across the app, so that they remain consistent. 

 
 

 
 

Post-Mortem

Project Takeaways

Inspiration vs. Imitation. By far, the most challenging aspect of this project was the task of creating an alternative app to the already established and widely-used Goodreads. They do so many things well, so it took extra consideration and constant reminding to dig a little deeper (and rely on user data) to create something more modern, yet comfortable for users.

A balance between complex and simple. Building the UI for Bhuku was a unique challenge because of the large amount of visual content I had to work with: book covers. Paired with brand colors, typefaces, and layout, these elements could easily overwhelm the user. My goal was to create a visual design system that supported, not detracted, from the artwork.

Above all, follow the user. After talking with users, it was apparent that some recommended features outlined at the beginning of the project just weren’t striking a cord with them. I chose to be a voice for the user, even if it meant deviating from the creative brief.

Next Steps

With more time, I'd like to revisit my product roadmap and build out features that were limited in exploration by my time constraints, specifically those that provide a unique experience to Bhuku users. One such feature, Bookclubs, would create a community for readers, allowing them to connect through monthly book lists and discussion topics.