Bookful
Mobile Application Design, Research & Testing
Overview
Background
Bookful is a mobile app for book lovers to help them log all books they own, read, and will read. With full functionality available to mobile devices, Bookful is looking for any features like registering books in a more automated way via optical character recognition (OCR).
Responsibilities
Product design, Research, User Flows, Information Architecture, Sketching, Wireframing, UI, Prototyping
Used Tools
Sketch, Adobe Illustrator, Marvel
Key Outcomes
Design an app to track and rate books that people own or have read.
Timeline
2 weeks
Note: I completed this UX case study as a self initiated project to showcase my product design process.
01 Research
For every projects, as a designer I do not consider myself as the user of the app so it is crucial that I understand what most of the users’ needs are and what kind of solutions are already out there through research.
Research Plan
Research Goals
Gain insights of user’s experience with books
Define the main target audiences
Assumptions
I then thought about what I know about book readers. Assumptions will help set a parameter for the project.
People search books from their favorite genre.
When they find a book, they would like to recommend it to their friends.
Forgets due date of library books.
Market Research
After deciding what I wanted to learn from research phase, I went online to start market research. I gathered general trends of the industry, demographics of users, and lists of possible competitors.
“82% buys the book by author they are familiar with”
“18-29(81%) and 30-49(72%) takes up majority of the readers as well as 50-64(67%) and 65+(68%)”
Competitive Analysis
From market research I’ve found competitors, so I performed competitive analysis to discover opportunity to improve their weaknesses. I noticed apps focuses on creating community of users where they interact with comments. Some of the weakness was that they looked outdated and complicated interface made navigation difficult.
User Interview
Once I completed research on existing resources online, it is time to directly communicate with users to ensure better understanding. To find out primary targets for interview, I created provisional personas based on data gathered from the research.
I chose user interview for primary research because I can guide the conversation from the base questions, if interesting insights arise. Here I tried to learn about user’s reading habits or any frustrations that they might have.
Participant's Overview
Requirements: reads book at least once a year.
Age: 19-65
Methods: Video call
02 Synthesize
Empathy Map
I reviewed recorded interviews and made transcript. I then transferred them into sticky notes differentiating participants by colors. I grouped notes that had similar pattern, to find insights and needs of the users.
User Persona
Discovering common user motivations and goals, I developed user person to depict the potential readers. This user persona will be used to make further design decisions.
03 Ideate
In order to think of features that might serve needs of Jess, I created HMW questions using the insights and needs from user persona. HMW questions will help on generating ideas for feature of the app focused on the needs of users.
“How might we provide Jess better book sharing experience?”
“How might we help Jess prevent losing her owned books?”
Group Brainstorming Session
Using HMW questions, I conducted a group brainstorming to gather ideas from people with different backgrounds. We used Zoom for video chat, and Miro to have virtual collaboration space.
With various lists of interesting ideas, I then transformed them into possible solutions with the app.
Product Roadmap
Based on the standards that was created, I looked at all ideas generated from brainstorm and gave priority levels. Also tried to mark what each features satisfies which goals to measure the importance.
Trade-Offs
There were 4 different needs that I discovered through empathy map. With tight project timeline, I tried to focus on immediate needs that overlap with business goals which was shown from business and user goal diagram. I chose feature for adding book lists for users to manage their owned or finished books. I also chose to add features for rating books to help users easily share their opinions of the books they have read to others.
04 Information Architecture
Sitemap
Knowing the needs of the users and features that will be implemented, I visualized general map of the app. My user persona, Jess is familiar with Instagram app so I tried to have similar navigation experience.
Seeing organization of sitemap, I created UI requirement to document what features should be present in screens and high level requirements to structure what UI elements I need to create.
Task Flow
Based on the sitemap, I created task flow to see linear process that users will take to complete certain tasks. Using this process I was able to minimize actions that user has to take in order to complete tasks.
User Flow
After settling the placement of the feature, I explored user’s experience on user flow to see what kind of decisions the users will make and what options or screens the user will need. Understanding user flow help me think of ways to keep the user on app with needed options.
05 Interaction Design
Moving on to actual design of the app, I roughly sketched out layouts on paper to give visual guide before designing on digital wireframes.
Once sketches are done, I turned them into mid-fidelity wireframes in Sketch app.
Mid Fidelity Wireframe + Prototype
When designing layout of the app, I tried to stick with brand affiliation of Jess which was IOS. For the page of Feed I tried to follow general layout of Instagram which was also one of the brand affiliation.
I developed prototype with gray scale to focus on testing usability rather than visual aesthetic in the early stage of design.
Usability Test
To see if the design I made was usable and uncover any improvements toward user experience, I conducted moderated usability test. In each tasks participants were asked to Think A-loud which further explain their decisions and confusions.
Participants: 5 users, 22-60 years old.
Test Completion Rate
100%: all participants successfully finished all tasks.
Error-Free Rate
90%: Luckily new features were easy for participants to use. However, users struggled to find review sections and their own collections of books.
Affinity Map
Using sticky notes for affinity map was easy to group similar observations. I documented what were common struggles and frustration to come up with next step on iteration.
Priority Revisions
06 User Interface
Logo + Style Tile
From project brief and user persona I came up with couple brand attributes to attract specific audiences. To convey those attributes, I put together moodboard gathering references. Completed moodboard gives the visual direction of the product.
Looking at series of logos in moodboard, I started to brainstorm in sketch. Here, I focused on simple look which will be recognizable in all scales. I designed logo that looks like a opened book and have negative shape of two people in each side to convey friendliness. As Jess loves sharing her reading experience with her friends, I thought the logo fit Jess’s personality.
I would not want any screen of the app to stand out, so I created UI Kit using the color pallets from moodboard, and graphic elements from IOS interface. Having UI Kit makes the workflow much faster and have coherent look.
High Fidelity Prototype
Now that we have visual directory of the whole app and the mid fidelity wireframe, it is time to combine them to make high fidelity prototype that closely resembles the end product. I tried to minimize the usage of the brand/ highlight color throughout the app to prevent distraction.
07 Conclusion
I was able to create a mobile app implementing features based on needs from user interview. With working prototype, I validated my app through usability testing. Using affinity map, I was able to find insights on frustrations and confusions of the users and iterated priority revisions.
There can’t be enough whys
While synthesizing with empathy maps or affinity maps, I found myself wanting to go back to participants and ask why on some of their answers. I should not assume that I asked enough whys since you only get one time with these participants.
Keep it simple.
For my mid-fidelity wireframes, I tried to perfect every little detail and took way too much time. Usually no matter how polished the mid-fidelity prototype is, there are always revisions that need to be made. I should focus on making a working prototype and then take care of fine details after the usability test.
Next Step
Finish off rest of the page, that was not designed in this project (profile, notification)
Test & Iterate
Prepare file for hand-off to developer