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.

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.

Provisional Personas

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 seek out recommendations when deciding what to read next.
• Users value friends recommendations over online recommendations.
• 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 “top book lists” when exploring what to read next.

Research Synthesis

Uncovering Insights + Identifying Needs

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

Creating An Ideal User

Based on the insights and needs uncovered during my primary research synthesis, I established a user persona: Neil Arora. Neil is a brand strategist living in New York City. He loves digging deep into a new book and immersing himself in the world or character the plot surrounds. Although he loves to read at times he finds it difficult to find time in his busy schedule to sit down and unwind with a good read. Neil finds book reviewers to be biased as they only speak to the positive or the negatives of a particular book. He doesn’t like spending his time debating on whether or not it’ll be worth it. Each book has something he can take from it, even if he doesn’t like the book as a whole.

Define, Ideate + Strategize

Defining the Design Problem

With a persona established, I moved into translating the insights and needs of Neil 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.

Comparing Business & User Goals

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.

Defining & Prioritizing Features

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.

UI Design

Sketching

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.

Wireframing

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.

Mid Fidelity Protoype

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

Usability Testing

Usability Testing

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. Five participants were asked to complete a series of four tasks tied to four scenarios during in-person testing.

Priority Tasks

Scan a book and add it to the "Design Books" list.
Follow the New York Times "Writer's Favorites" list.
Locate Maggie's question and recommend a book.
Locate "Milkman" by Anna Burns and mark it complete.

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.

Takeaways

It was apparent that most users preferred directly search for what they needed rather than navigating through the app. Other issues which users had including using the horizontal scroll feature as it was unnatural when testing on a laptop instead of a mobile device and not understanding some iconography. Simple adjustments to layout and hierarchy were made to help resolve the problems.

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:

ATTRACTIVE / RELIABLE / SLEEK / FUNCTIONAL
CREATIVE / INVITING / ELEGANT

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

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.

Style Guide + UI Kit

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. I also 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.

Application

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.

Prototype

I modified my original midfiedlity wireframes in Figma and updated them to create a high-fidelity prototype that offers another opportunity for user testing before going further with the site design and implementation.

Project Takeaways

Balancing Information Overload. Building the UI for Bhuku was a unique challenge because of the large amount of information that comes with books such as book covers, book details, synopsis, reviews, related content, etc. 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.
‍
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.

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, Book Circles, would create a community for readers, allowing them to connect through monthly book lists and discussion topics. Also finding a way to integrate an audience vs curator rating is a challenge I would like to further explore.

You May Also Like

Zeit

Mount Everest

Spotify