Project Details
TEAM: Self + Feedback from mentor and colleagues
DELIVERABLES: Mobile App Prototype
ROLE: UX Design | Visual Design
TOOLS: Pencil + Paper | 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.
Bhuku wants you to design their mobile app, starting with the platform of your choice.
Objectives
Design a user-centric mobile app for book lovers to help them keep track of the books they’ve read and want to read. Utilize the full potential of the mobile platform to keep users engaged.
Design any complementary features that could enhance the main ones.
Process
01 Empathize
In this phase of the design process, I learned background information about literary apps and websites as well as their users.DELIVERABLES: Market Research | Competitive Analysis | User Interviews | Empathy Map | Persona
Market Research
I conducted market research to learn about the literary app and website industry and its target demographic. Below were some of my findings:Demographics
- 84% of 18 - 29 year olds have read a book in any format within the past year.
- 74% of 30 - 49 year olds have read a book in any format within the past year.
- 71% of 50 - 64 year olds have read a book in any format within the past year.
- 67% of 65+ year olds have read a book in any format within the past year
Why do people read?
- In a study by Pew Research Center, 26% of participants read to learn and discover information.
- In the same study, 15% of participants read to escape reality and using their imaginations
- In the same study, 12% of participants read to because they like the drama of a good story.
How do people find new books?
- In a study by BookBub, 39% of its user base find new books based on recommendations from friends and family.
- In the same study, 84% of its user base will buy a book because it is by an author they like.
- In the same study 83% of its user base will buy a book because it is the next book in a series.
Competitive Analysis
Following my market research, I conducted a competitive analysis to compare and contrast different bookkeeping and book recommendations apps and websites. I used what I learned to better understand industry standards and ways to differentiate my app from others.
User Interviews
After completing my secondary research, I began my primary research in the form of user interviews.I completed a total of 5 user interviews and was able to learn about peoples' reading experiences.
My key findings were:
- All participants (5/5) read for entertainment about a topic they enjoy or for gaining personal knowledge.
- Most participants (4/5) use the author to base whether they might like a new book.
- Most participants (3/5) base whether they might like a new book on friend recommendations.
- Most participants (3/5) use their phone (Notes App, screenshots) to keep track of what they want to read.
Empathy Map
I created an empathy map to help define patterns from my user interviews. From these patterns, I derived user insights and needs.Persona
After defining my user insights and needs, I created a persona. This document helped keep me user-focused as I moved forward with design.02 Define
In this phase of the design process, I solidified the details of what was to be created for whom and how.DELIVERABLES: POV Statement and HMW Questions | Brainstorming | Business and User Goals | Feature Roadmap | Appmap
POV Statements and HMW Questions
I created a document with point-of-view statements and "How Might We..." questions to link the research phase with the define phase of the design process.Brainstorming
After defining my framing my users' problems, I was prepared to start brainstorming. I focused on writing down as many solutions as I could think in a short amount of time.Business & User Goals
I created a venn diagram highlighting the goals and pain points of the business and its users.Feature Roadmap
After defining stakeholder goals, I was able to start prioritizing the features I needed to design.Appmap
I created an appmap based off my competitive analysis, brainstorming exercise and feature roadmap.03 Ideate
In this phase of the design process, I began generating ideas to solve the problems that users were experiencing.DELIVERABLES: User Flow | Task Flow | Sketches
User Flow
I created a user flow document depicting several ways a user might interact with the mobile app to accomplish their goals. This helped me better understand the process and screens involved in the design.Task Flow
Next, I created a task flow document depicting the way a user would use particular features of the app.
Sketches
After completing my user flow and taskflow, I began sketching out ideas on how to integrate my new features into the existing mobile app.
04 Prototyping & Usability Testing
In this phase of the design process, I created a mid-fidelity prototype and conducted usability testing to gain valuable insight and feedback from my users.DELIVERABLES: Mid-Fi Wireframes | Mid-Fi Prototype | Usability Testing | Affinity Map
Mid-Fidelity Wireframes & Prototype
After sketching out ideas, I created a set of mid-fidelity wireframes and a prototype to prepare for usability testing.Usability Testing
After creating my prototype, I conducted usability tests at a local Barnes & Noble bookstore. I chose them based on similarities to my persona and collected valuable information and data.User Tasks
- Test whether users can successfully create an account.
- Test whether users can view book details and add a book to a list.
- Test whether users can create their own lists.
My objectives of the test were to observe how well users were able to navigate the app, complete their intended goals and recognize any friction points. Some of my initial findings were:
- 60% of participants were confused about the CTA button below book thumbnails.
- 40% of participants were not sure whether users could use the app to read books.
- 40% of participants did not immediately read the text at the top of the onboarding process screens.
Affinity Map
After completing user testing, I created an affinity map to organize my findings, discover insights and derive recommendations for the next iteration of my prototype.
05 Iteration
In this phase of the design process, I revised my mid-fidelity wireframes and prototype based off the findings from usability testing.DELIVERABLES: Wireframe & Prototype Revisions
Wireframe & Prototype Revisions
Based off my recommendations, I improved upon three design aspects.
- Added two onboarding screens so users are aware of the new features and are encouraged to try them out.
- Changed the audio recognition button to the Spotify green and moved it next to the search bar for higher visibility.
- Made the "Close" button sticky on the song ID page so users can close the screen without having to scroll all the way down.
06 Branding and Design
In this phase of the design process, I created a brand for Bhuku and refined my wireframes.DELIVERABLES: Style Tile | High-Fidelity Wireframes & Prototype
Style Tile
Before creating my high-fidelity wireframes, I created a mood board and style tile to establish a set of brand guidelines and determine the overall I wanted to convey through Bhuku.High-Fidelity Wireframes
After creating my style tile, I created a set of high-fidelity wireframes and an updated prototype.
Reflection
Since I've never used a literary app before, conducting secondary and primary research was essential to gain a stronger understanding of the industry. Other than that initial hurdle, this project was a fun challenge.
Since this was my first end-to-end app design, I recognized the importance of my user flow and task flow documents. Both documents ensured I did not miss any screens that users often overlook such as the onboarding process or any other transitional screens.
The most interesting part of this particular process was being able to start with zero knowledge about bookkeeping apps and begin exploring reading patterns and habits from an outsider's perspective. I would say the lack of bias helped clear any misconceptions I might have had.
Next Steps
- Test the revised prototype and iterate
- Choose a redlining tool and prepare the project to be handed over to a developer
- Seek any other opportunities for improving the design