Bookmate is an app that provides a wide variety of ebooks and audiobooks. The app positions itself as the “Netflix for books”; it offers monthly and annual subscriptions.
The search function is not prominent, making it harder for users to find books. In addition, Bookmate doesn’t provide search filters for both mobile and desktop versions.
Redesigning the app’s search function and menu/navigation bar to enable users to find books in a more intuitive and efficient way.
Research
Visual design
Prototyping
Figma
InVision
2021
Hypothetical, as part of
the CareerFoundry course
After reading reviews on the Bookmate app on Google Play and App Store, the inefficiency of the search function was one of the main pain points that users vocalized. So I decided to focus on redesigning the app’s search and navigation functions.
The brown color that is used for secondary text (titles, navigation bar) and the app’s white background doesn’t meet accessibility standards (4.25:1).
Desk research revealed several design issues:
- search is accessible only from the ”Library” tab;
- no search filters;
- search results include unavailable books;
- secondary text and background colors don’t meet accessibility standards.
As an avid reader, I want a clear search function so that I can easily find books.
As a designer, I want to browse books within the design category so that I can deepen my industry knowledge.
As a new user, I want to be able to use the app intuitively so that I save time and focus on reading books.
As a person with limited storage on my phone, I want to get as much value as I can from one app so I don’t need to look for a better app.
Once data on the app’s search and navigation along with user stories were collected, it was time to design wireframes.
As it was mentioned earlier, the existing color palette doesn’t meet accessibility standards. In addition, the blue and green accent colors look a bit of out place, mismatched with the main color.
Inspiration for the mood board came from browsing apps of (naturally text-heavy) news media outlets.
Yellow is often associated with happiness that goes along with the Bookmate motto of enjoying books. It’s bright and energetic, (hopefully) intriguing users to read/listen to more books.
Yellow is often associated with happiness that goes along with the Bookmate motto of enjoying books. It’s bright and energetic, (hopefully) intriguing users to read/listen to more books.
Search has been transformed into an icon that is accessible from any screen.
The existing app does not have a filter option in its search.
The redesign includes filtering by book format, genre, ratings, and language. Users can also remove unavailable books from search results.
The background image size is reduced to make the app’s value proposition easier to read. The latter is also paraphrased, while the main greeting is replaced by another Bookmate motto.
The sign up screen is updated in accordance with the style guide.
“Library” is replaced by “Home” to give the user a defined starting point for browsing books.
“Profile” is moved to top right of the screen.
All menu items are given new icons to more semantically represent their functionality.
Define the scope and stick to it. Sometimes it’s tempting to continue redesigning the app, but then the focus from the main pain point could be shifted to less important issues.
User testing is crucial. Though I asked for the feedback of 3 people, I didn’t conduct proper usability testing to detect design flaws.
Creating a mood board is time-consuming. It took me a while to settle on the right style, message, and palette. Once the direction had been set, it was easier to identify what goes well with the mood.
Impact of typography on the app’s feel. Initially, I designed 2 sets of wireframes since I couldn’t decide between them. Each of the chosen fonts told a slightly different story. Adding colors and images helped me make the decision.
Define conduct usability testing on mobile designs.
Create desktop and tablet prototypes, and test them as well.
Back to homepage
