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.

"My strategic approach was to transform Bookworm's experimental design into a structured system by establishing foundational elements that preserve creativity while solving the inconsistencies in typography, spacing, and visual hierarchy that were impacting the user experience."

Typography and a grid system awaits

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.

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:

1. 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.
2. I had to find a balance between the founder's desire for a colorful app and my responsibility to ensure the app is accessible to all users. This involved explaining my design choices and the user experience principles behind them in a clear and understandable way.
3. Encourage your stakeholders to feel comfortable sharing their ideas. I recall a stakeholder saying, "I know this color choice is terrible, but I like it." I responded, "Absolutely not! Let's work on refining it." This approach fostered trust and helped me understand their perspective better.