Bookful is an app for readers and recommending books.
My role
User research, prototyping, UI design
Built end to end app from scratch
Brand Identity
Tools Used
Sketch
Adobe Illustrator
Marvel
Miro
Timeline
2 weeks
Summary
Bookful is an app for book lovers to help remark books they own, read, will read next. A key differentiating feature is that it is simple to use and allows sharing your favorite books with friends and family - an important book reading experience based on research.
👁 Discover
To discover current user problems, I decided to have face to face interviews.
Starting, I used market research to figure out who are the potential users to define problems and competitors to seek opportunity of improvement on current solutions.
I tried to focus on getting insights from all types of book readers. I was able to get 5 interviews done from whom reads at least 1 book a year. Ages of users varied from 19 to 65.
Questions asked during interview focused on the followings:
Book reading experiences
Tracking book experiences
“5 of 5 people are likely to share their favorite book with close friends and family.”
“5 of 5 loses track of books that they own.”
In order to find patterns among the responses of each interviews, I made an empathy map. Usings sticky notes, I collaborated with one other person during the workshop to prevent getting trapped in my own perspective.
🤔 Define
User Persona for better decisions
Discovering common user motivations and goals, I developed user persona to depict the potential readers. This user persona will be used to make further design decisions.
Brainstorming as a group to ideate on features that help sharing books
As we characterized our potential users, I took Jess’s needs and goals to form HMW questions to present in group brainstorming session over zoom and Miro. Since I was the only designer for this project, having group with different background helped gathering wild ideas.
Opportunity Areas
While choosing features to implement, it is important to think not only users, but also business goals. Bookful wants to increase users and on-screen time.
Browse & Add Books
Search books for detail and add them to user’s personal library.
Quick Ratings & Reviews
Not too much time commitment is needed for user, so more people will engage to share their thoughts about the book
Organized app with 5 tabs to have similar navigation pattern as IOS book app
After deciding on features, I created sitemap to figure out what is the best way to seperate tabs for easier navigations and also to look where I could implement features in the app.
Visualizing user flows for different methods of adding books
Looking over features that I will be implementing, I decided to map out user flow of adding book since there are multiple ways to do so on the app.
In all cases of user searching for author’s name or book title, and scanning book cover to search, I had to make sure I provide an option with adding a book.
✍️ Design
Designed each screen to look similar to user’s most used apps for easier navigation
Drawing out rough sketches of the layout design, I created them in Sketch. Format of each posts on the feed pages are laid out similar to Instagram for users to instantly understand how to use the app. Once designing all screens, I put together an interactive prototype for user testing.
To uncover any frustrations toward user experience on Bookful, 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.
Choosing colors and graphics to match the brand attribute of Energetic, Modern, and Simple
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.
✨Deliver
Users are not willing to seek for next call-to-action
Shown from the result of usability testing, 5 of 5 people struggled to find comment section after rating the book. In my iterated version, “write review” CTA button appears under the stars after users rate the book.
User prefer clicking author’s name from search result to see more book
During testing, users were asked to find others books by the author of Into the Wild. Rather than clicking into the book detail page, they would try to tap the author’s name from the search result page. With this observation, I prompted with the author’s related books when tapped on result page.
Conclusion
I was able to create a mobile app implementing features based on needs from user interviews. With a working prototype, I validated my app through usability testing. From frustrations and confusions gathered from testing, I iterated to deliver final design.
Lessons
Do not assume the reason behind participant’s response, keep asking why.
Try not to waste your time on making every details on your mid fidelity prototype, things will change no matter how perfect you designed.
Next Steps
Finish off rest of the page, that was not designed in this project (profile, notification)
Test & Iterate
Prepare design files for hand-off to developer