Overview
Bookworm, a vibrant reading app, and social community, needed to evolve from an experimental project into a polished platform while maintaining its welcoming spirit. Through a comprehensive design refresh focused on typography, spacing, and color systems, I transformed the app's visual design to create a more cohesive and accessible experience for its community of book lovers.
Role:
Product Designer
Problem:
Bookworm needed to evolve from an experimental reading app into a polished platform by addressing inconsistent visual design elements while preserving its welcoming and playful brand personality.
Methods:
Design audit, competitive analysis, typography testing, design system development
Timeline:
5 months (ongoing)
Platform:
mobile ios
Bookworm: A Design Evolution
When I joined Bookworm, a vibrant reading app and social community, I saw an opportunity to elevate its visual design while preserving its welcoming, colorful spirit. The app helps users track their reading journey, connect with fellow book lovers, and join book clubs across iOS, Android, and web platforms. Here's how I transformed the user experience through a comprehensive design refresh.
The Challenge
With 70% of our users on mobile, I kicked off with a thorough mobile-first design audit. The existing design, while fun and experimental, needed refinement to reach its full potential. I documented inconsistencies in typography, spacing, and visual hierarchy that were impacting the user experience.
Strategic Approach
Typography That Tells a Story
The existing app was using multiple header styles and inconsistent font weights that weren't optimally scaled. After extensive testing with different typefaces and sizes, I established a clear typography system based on a 16px base font size. This created a more cohesive reading experience while maintaining the app's approachable personality.
Mastering the Space
To nail the spacing and grid system, I dove into competitive research, analyzing how social platforms like Reddit, LinkedIn, and Twitter handle text-heavy feeds. I also studied wellness apps like Headspace and Tiimo, plus direct competitors like Fable, Storygraph, and Goodreads.
This research informed the design of our base status message component, which became the foundation for our broader spacing system.
Colors with Purpose
One of our biggest challenges was the inconsistent use of gradients across different pages. I defined a consistent app background and built a color system that improved both accessibility and visual hierarchy.
Component Harmony
Bookworm's playful brand initially used a 15px corner radius across all components. While reviewing nested elements like buttons within components, I refined this approach to create a more balanced visual system.
Learnings & Impact
The update is currently in development and I’m working closely with the founder and developer to ensure the relaunch is smooth. As we move through development, I've gathered some valuable insights:
- Stakeholder collaboration revealed crucial user behaviors - like how personally invested users are in their bookworm profile images as a form of self-expression. These insights helped keep user needs at the center of design decisions.
- Obsessing over visual details paid off. By meticulously reviewing each component, color choice, and spacing decision, I could confidently explain and defend design choices to the team.
