Project Overview

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.

The Challenge

With 70% of our users on mobile, I started with a comprehensive mobile-first design audit. While the existing design was fun and experimental, it needed refinement to reach its full potential.

Key Issues Identified:

• Inconsistent typography across platforms
• Irregular spacing and visual hierarchy
• Inconsistent gradient usage across pages
• Accessibility concerns with color combinations

The biggest challenge? The founder loves color (and so do I!), but I needed to approach color strategically—staying true to Bookworm's vibrant personality while ensuring usability and accessibility.

Research & Strategy

I dove into competitive research, analyzing how other platforms handle similar challenges:

• Social Platforms: Reddit, LinkedIn, Twitter (for text-heavy feeds)‍
• Wellness Apps: Headspace, Tiimo (for approachable design)‍
• Direct Competitors: Fable, Storygraph, Goodreads

This research informed my approach to the base status message component, which became the foundation for the entire spacing system.

Building the Foundation

Typography System

The existing app used multiple header styles and inconsistent font weights that weren't optimally scaled. After extensive testing, I established a clear typography hierarchy based on a 16px base font size for mobile, creating a more cohesive reading experience while maintaining the app's approachable personality.

Color Strategy: Vibrant Yet Accessible

One of our biggest challenges was inconsistent gradient usage across pages. My approach:

• Defined consistent app backgrounds for main pages
• Created softer color gradients that balance accessibility with vibrancy
• Built a comprehensive color system with defined tokens
• Established clear rules for primary, secondary, and tertiary colors
• Tested color combinations to ensure accessibility compliance

This system helps future team members quickly understand how to use colors in new designs while maintaining both accessibility and visual hierarchy.

Status Messages: The Foundation Component

This component became my foundation for two key reasons:

1. User Experience: Creates consistency across the app, reducing confusion and adding predictability
2. Development Partnership: Simplifies the build process without losing design integrity

Component Breakdown:

• User message about a book
• Post headers
• Reactions bar

I split each part into its own component to build variants and properties efficiently.

Solving the Length Problem

Using patterns from Instagram, LinkedIn, and Twitter, plus user feedback about avoiding book spoilers, we landed on:

• 4-line text limit followed by ellipsis
• "Read more" indicator for longer posts
• 11 variations for book review components that balance book covers with varying text lengths

Icon Strategy: Custom Meets Familiar

Balancing the founder's unique custom icons with user recognition required a balanced approach.

Impact & Results

Design Consistency:

• Reduced component variations by 40% while increasing functionality‍
• Reduced design-to-development handoff time by 60% through documented component library‍
• Improved design consistency across mobile platforms by 75% through systematic approach
• ‍Achieved 90% WCAG AA compliance for color combinations

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.
4. Creating clear systems and guidelines didn't just improve consistency—it enabled the team to move faster and make confident design decisions independently, reducing bottlenecks as we prepare for growth.