Bookworm
Book lovers’ new favorite app
An end-to-end app for book enthusiasts looking to network with like-minded people, and find curated recommendations at the same time!
Role: sole UX/UI designer
Timeline: 100 hours
Software: Figma, FigJam
Why books?
As books make their way back into the mainstream media, we have yet to give their consumers a community. Where does someone go if they just read a fantastic book and want to share it with other book-lovers?
If this question was regarding films, the answer would be easy: Letterboxd. Film buffs already have a website where they can track, save, and share films in a community of like-minded users. But what about book lovers? Enter: Bookworm.
The process
My research journey
Why?
learn more about my user base & current competitors
understand my users’ goals, expectations, & pain points
identify how I can make my platform stand apart from competition
validate (or not) my assumptions
How?
competitor analysis
user interviews
user personas
research synthesis
Getting to know my competition…
Starting my research via competitor analysis was crucial, as it showed me what's already out there and where I can make my platform stand out.
Pros
Users love the capabilities/features that allow them to track, discover, and provide insights on films
Users enjoy the setup and find the app generally easy to navigate
Cons
Users complain about bugs/glitches experienced when using the app that affect lists, reviews, and the app’s ability to function
Users complain about the app’s UI:
too many clicks required to add films to watchlist
reviewing/logging films required to see films you’ve rated
quick rate feature only accessible the first time users use the app; afterwards, manual search to find and rate/review films is required
Pros
Users love the capabilities/features that allow them to track, share, and review books
Goodreads motivates users to increase their reading via challenges and groups/book clubs, as well as their general features (e.g. the fact that users can track their reading motivates them)
Cons
Users complain about the outdated design of the app
users don’t feel like their feedback is being acknowledged
Users complain bugs/glitches on the app that results in it crashing and not being very usable
Pros
Users enjoy that Podchaser provides a centralized source for finding podcasts
Users appreciate the info Podchaser provides about each podcast, and the hands-on, responsive nature of Podchaser pro.
Cons
Platform lacks an app
Users complain about the information provided regarding audience numbers (sometimes info is hidden, sometimes numbers are inaccurate)
this seems to be happening specifically with smaller podcasts
Users complain about tech issues on the site such as slow loading times and issues updating feed
Key findings & insights
Letterboxd seems to be the most intuitive and user-friendly among users
Majority of issues surrounding Goodreads revolve around outdated software/UI
Podchaser was the only platform that didn’t have an app
Important to note:
My initial idea was to create a social network for both book and podcast lovers, as I assumed the two went hand in hand. We learn later on, this was not the case.
Getting to know my users…
User interviews are significant to the research process; they help me learn more about my users' preferences and validate (or not) any assumptions I may have from my own experiences.
I interviewed 5 participants between the ages of 23-57, 4 via FaceTime and 1 in-person, and drafted up questions that would give me a better idea of who my users are and what their pain points and expectations are regarding my topic.
Key insights & painpoints
An unexpected piece of feedback I gained was that the majority of my users listen to podcasts very sparingly, if at all.
This led me to switch gears and focus solely on creating a platform for book lovers.
My users were unsure of what platforms they would utilize to find a community of book lovers, noting that there isn’t currently one available.
My users are leisurely readers who find book recommendations from friends or other forms of media
Never forget our users!
User personas are always helpful as a quick and easy way to remind myself throughout the design process who I'm designing for and why.
Synthesizing my research into one statement
With all the data I gathered from my secondary research and user interviews, I now had enough information to put together one concise statement and three questions that would help me stay on track throughout the duration of the design process.
Problem statement
I would like to create a digital platform for book lovers to share, discuss, and recommend books, and even meet up, because of the difficulty they currently experience trying to find fellow book enthusiasts or share their interests with people who may not feel as strongly about books.
“How might we provide curated book recommendations for users who are unsure exactly what they’re searching for?”
“How might we connect fellow book enthusiasts who may be local to one another?”
“How might we create a safe space where people can discuss and share their passion for books with others?”
What are my priorities?
Teamwork makes the dream work!
Being the sole designer on this project, I came up with the project goals, business goals, and technical considerations by myself. However, when working on a team of not only other designers, but also a project manager and engineers, it is pivotal to collaborate with everyone to determine these goals and considerations. We should all be aligned here, so that we stay on track for the entirety of the project.
What features are the most important?
Taking into consideration the feedback I gained from interviews, it was time to start considering what features I would include on my app. I created and prioritized features based on the data I gathered from the research stage.
Mapping out user interaction within the app
Creating a sitemap allows me to consider how I will use the data gathered in my research phase to create and enhance my product. What kinds of features will I include? Am I ensuring the users' expectations will be met with the creation of this app?
Let’s be more specific…
After creating the sitemap, I chose to create two user flows: a user joining a book club, and finding a book via their recommendations as well as browsing the detail page.
This decision was based on interview feedback that emphasized that my users wanted the ability to connect and interact with other book lovers, receive book recommendations, and be able to rate, review and/or discuss books they’ve read.
Bringing the vision to life
Let’s make a moodboard!
Before I could start creating my own screens, I wanted to gather inspiration of what some similar, live sites look like, and how I may be able to incorporate certain elements into my own platform.
While finding features and elements, it was important that I had solid reasoning to justify each of my choices.
Let’s talk branding…
When considering branding, I made sure to pick fonts and colors that reflected the brand, as well as creating a logo that would be easily sizable. I chose an easily readable font for body text, and a font for headers that would reflected the classic sentiment associated with books. For the color palette, I chose green and blue to reflect calmness, trust, and prosperity.
Putting it all together
Time to sketch!
Feeling inspired by my moodboard, I was ready to sketch my own screens! I always start with paper sketches, as I find it’s the most efficient way for me to get my ideas down and share them with others.
How do my users feel about my ideas?
I conducted user testing with these sketches, to ensure I was meeting all of my user needs and expectations before moving on to digitize the wireframes.
Testing was conducted via text, for time efficiency purposes, with 6 participants ages 23-57. Participants were reminded of the background of my project and the goal, and I asked each participant if the sequence of steps was intuitive or confusing and why, as well as any other relevant feedback that came to mind.
Key findings & insights
6 of 6 participants liked the “browsing book detail” pages and found the flow intuitive and easy to follow
3 of 6 participants were confused about the terminology “topics of interest” changing to “categories” in the book club screens (designer error)
Let’s get digital…
Having established my brand and confirmed that my screens met my users’ expectations on paper, I was ready to bring the screens to life in a hifi way, to further establish whether or not the app accounted for my users’ pain points.
Book club flow
Home/detail page flow
Bringing my screens to life!
I created a prototype out of my hifi wireframes, which was then utilized in usability testing.
Testing, testing, 1, 2, 3!
Although the feedback from user testing told me I was on the right track, usability testing with my prototype would give me further insights regarding the intuitiveness and learnability of my app’s navigation.
Testing was conducted via FaceTime for 2 participants, and in-person for the remaining 3. The participants ranged in age from 23-57, and success metrics for testing were as follows:
click path
observations (behaviors, areas of confusion, etc.)
major quotes
ease of use (1-3 scale)
Key findings
3 of 5 participants had suggestions for and/or experienced some confusion on the book club screens
2 of 5 participants mentioned really liking the home screen
5 of 5 participants completed the task with ease, regarding the app as being easy to navigate and intuitive
Suggestions
User feedback to add an “explore book clubs” button in the middle of the screen rather than being led to click on the top left
User feedback to add a search bar under “topics of interest” to allow users to search for specific clubs rather than scrolling through clubs
User feedback that hashtags denoting different book clubs was confusing; that’s now how he typically sees hashtags used
Making some changes
Taking into consideration the testing feedback, I made some high priority iterations to the screens. I also took this time to iterate on some UI elements such as color usage, alignment, and terminology, to increase the app’s overall effectiveness and usability.
“Book Clubs” layout converted to one similar to an e-commerce app; accounts for when app has abundant data
Search bar extended for easy accessibility, therefore removing need for search icon in bottom navigation
Hashtag replaced with group image to reduce confusion
Primary/secondary color usage switch; elements as significant as the bottom navigation should include the primary color
“new list” button aligned to the right; decreases distraction from main task (adding book to a list)
terminology “add” is be more meaningful than “done” in this case
And voilà!
Time for the handoff!
Making a UI kit
As my design journey came to a close, there was one crucial step left: creating a UI component library! Not only would this make the engineers’ lives easier, it also makes my life a lot easier if/when I expand the app and create more wireframes.
My learnings
Creating a product from scratch contributed to my growth as a designer, by pushing me to consider elements such as branding and creating a design library/system. Being responsible for this allowed me to explore dark mode designs, which I thoroughly enjoyed and plan on continuing to explore in the future.
Impact
By conducting research and speaking with users, I was able to create an end-to-end design for an app like never before: one that curates personalized book recommendations to users and provides book lovers with a social network catered specifically for them. Book enthusiasts will no longer yearn to find someone to share their latest read with or wonder what book they should read next.
What’s next?
Run usability testing with new hifi prototype to test whether or not the iterations properly addressed participant feedback
Conduct further user interviews and/or create surveys to gauge if users would want the app to be responsive on larger screens (i.e. tablets)