Book Ink.

Overview

Book Ink. is an app for avid readers and book lovers, that will help them keep track of what they’re reading as well as discover their next favorite book. A user-friendly, fresh, and clean design will distinguish Book Ink. from the competition.

Objective

Book Ink. requires a design for an iOS mobile app, along with clearly defined branding that can be presented in a prototype that effectively shows the key features users need from a book inventory app.

This is a speculative project and Book Ink. is a fictional company.

Process

Market Research

I began the project with market research, in order to establish an understanding of the reader population and trends within the digital library industry. I focused on discovering what the average reader looks like, what they are reading, how they are accessing reading material.

Competitive Analysis

Market research was then followed by competitive analysis, in which I identified potential competitors to Book Ink. and took stock of the features they offered and evaluated their strengths and weaknesses. The current leader in book inventory apps is Goodreads, so I started by assessing that product and then moved on to examining its competitors.

User Interviews

I then conducted 1:1 user interviews as primary research in order to learn directly from potential users about their reading habits, including methods of tracking their reading activity and discovering new books. The interviews were conducted in-person and all participants identified themselves as frequent readers.

Empathy Map

I synthesized the findings from the user interviews using an empathy map. After transcribing the recordings of my conversations, I organized participants’ statements according to patterns that emerged. I then grouped those statements based on commonalities and themes to determined key insights and identify user needs.

Persona

The empathy map was used to develop a primary persona, a fictional representation of my target user. Caitlin emerged from the primary research findings, with her goals, frustrations, and motivations drawn from the trends observed in user interviews, while her needs came from the empathy map.

POV Statements & HMW Questions

The next step was to reframe the insights and needs from the empathy map as Point-of-View statements and How-Might-We questions. Doing this helped me to further empathize with Caitlin and prepare to generate ideas for potential solutions.

Business & User Goals

I then identified the business and user goals for the product. The business goals were drawn from the project brief and the user goals were pulled directly from Caitlin’s persona. The common points among these two sets of these goals were then used to generate shared goals, which I would focus on to build the Book Ink. product.

Group Brainstorming

In order to generate a wealth of ideas for potential solutions, I conducted a group brainstorming session. I gathered 3 participants, provided project background and introduced them to Caitlin’s persona. I asked the participants to brainstorm answers to each of the How-Might-We questions and facilitated a discussion of their ideas to develop a range of concepts that might address Caitlin’s needs.

Product Roadmap

After reviewing the ideas that emerged from the brainstorming session, I determined which features best met the shared goals identified earlier. I then created a product roadmap document, describing the features that would address the project goals and included metrics for measuring the success of each.

StoryBoard

I wanted to further explore how Book Ink. might meet one of Caitlin’s needs, namely discovering related content for the books she likes. By creating a storyboard, I described and illustrated a situation that exemplified how Book Ink. helps Caitlin accomplish this.

App Map

The next step in the ideation phase was to focus on building the app structure. I created an app map, planning out key screens and determining where the main features would be located and how they would relate to each other within the app.

User Flow

Considering Caitlin’s needs and the project goals, I created a diagram that described the pathways users might take while interacting with Book Ink. This process helped me to identify the key screens and actions users might require.

Task Flow

I also considered several key tasks that a user like Caitlin might need to complete using Book Ink. This further helped me to determine the screens and actions that were necessary for accomplishing the tasks.

Sketches

The first step of the design phase was to take pen to paper and sketch ideas for some of the main Book Ink. screens. These low-fidelity wireframes helped me to determine layouts and establish visual hierarchy, while exploring common design patterns and figuring out how to integrate the app’s key features.

Mid-Fidelity WireFrames

I followed up the sketches by creating mid-fidelity wireframes, translating the sketches to a digital form and preparing for usability testing. By building the wireframes in grayscale, I was able to focus on the functionality of the features.

Branding

I began to develop branding for Book Ink. by identifying 3 brand attributes that captures the intended look and feel of the app: Delightful, Trustworthy, Contemporary. With these adjectives in mind, I sketched out ideas for the brand logo, before digitizing the concept that fit the attributes most effectively.

Style Tile

Next, I created a style tile as a guide for the visual design of the app, establishing a color palette, typography styles, and imagery that would then be applied across the mid-fidelity wireframes.

Prototype

Before applying the branding and visual style to the wireframes, I needed to test the design of the features to determine if they could be successfully used to accomplish key tasks. I created a prototype using the mid-fidelity wireframes and recruited participants to test it. This helped me evaluate the ease of use of the app and identify any potential points of confusion.

Usability Testing

I created a test plan in preparation for conducting usability testing. I developed 4 scenarios and 4 tasks that I asked users to complete using the prototype in order to evaluate the design. Participants were recruited from the local community and recorded each session so I could later synthesize my findings.

AFFINITY MAP

Similar to the empathy map method used to synthesize the user interview findings, I created an affinity map in order to gather insights from my usability testing. I identified the patterns that emerged in order to determine what revisions should be made to the next iteration of the prototype.

High-Fidelity WireFrames

The visual design and branding defined in the style tile were applied to the mid-fidelity wireframes to create high-fidelity wireframes. The recommendations identified above were implemented as well, in order to address sources of confusion and frustration that emerged during usability testing. Those specific changes are outlined in the wireframe annotations below.

Revised Prototype

Those high-fidelity wireframes were then used to create a revised prototype. This version captures the intended look and feel of the app and improves upon the mid-fidelity prototype by including the recommended revisions determined from usability testing. Feel free to interact with the Invision prototype via the button below.

UI Kit

Finally, having applied the Book Ink. style and branding to the layouts defined in the mid-fidelity wireframes, I created a UI Kit. This is a living document that can serve as a resource, ensuring that the visual design remains consistent as the app is further developed.

project takeaways

Next Steps

With additional time, I would like to build out the existing features, especially those that require content from external sources. For example, critic reviews and related content, such as information on tv adaptations, might come from a variety of websites. It would be valuable to explore how users would access that content via Book Ink.