Designing a format-flexible book subscription experience
Bringing physical, ebook, and audiobook readers into a more inclusive membership model.
Wonder Books is a conceptual subscription platform designed to extend curated book experiences beyond traditional physical boxes, by also supporting readers who prefer ebooks or audiobooks.
Why it matters
Most book subscription services are built around physical book boxes, with format assumptions embedded into pricing, logistics, and community access.
What was happening
Readers who preferred ebooks or audiobooks had limited flexibility, often paying for physical shipments to access curated selections or book club participation.
How I addressed it
Designed a subscription system where format is a selectable layer, allowing members to choose physical, digital, or hybrid plans without fragmenting the curated experience
Role
I led the end-to-end product concept, defining the subscription structure, configuration flow, and visual system.
Design Focus
The primary focus was designing a scalable subscription architecture that supports multiple formats without increasing configuration complexity. The goal was to balance flexibility with clarity.
Process
1. Understand
Reviewed existing book subscriptions, reading platforms, and accessibility guidelines to understand current limitations around format flexibility and personalization.
2. Explore
Explored different ways to structure subscription choice and configuration, focusing on how decision hierarchy affects clarity and cognitive load. This phase focuses on how early concepts evolved as complexity increased.
Exploration Outcomes
Identified where users hesitated most during configuration
Simplified decision steps without removing control
Chose progressive disclosure over comparison tables
3. Design
Designed a guided subscription experience and visual system that translate exploration insights into clear, approachable UI patterns.
4. Iterate
Refined flows, hierarchy, and interactions based on feedback and accessibility considerations.
5. Deliver
Produced a functional prototype demonstrating onboarding, subscription selection, and configuration.
Final Design
The final design translates the exploration into a guided subscription experience that balances flexibility with clarity. It focuses on helping users choose a reading journey first, then progressively configure their subscription without feeling overwhelmed.
Guided Subscription Flow
The subscription experience introduces a wizard-style flow that helps users select their reading journey before configuring details. Anchors on the page allow users to navigate between genre-based and custom options without losing context. From here users can choose between: 1. A customized subscription 2. A genre based subscription.
Choosing a reading journey early helps users understand what kind of decision they are making before configuring details.
Subscription Cards & Configuration
Each subscription card contains its own configuration options, allowing users to choose format and payment frequency through progressive disclosure. This keeps complexity localized and prevents conflicting global states. Configuration options are revealed progressively within each subscription card, allowing users to adjust format and payment frequency without leaving the page.
Custom Subscription
Users can customize all aspects of the subscription from how many genres they want, to format and billing cycle.
Subscription configuration is revealed progressively to reduce cognitive load while preserving flexibility.
Genre Based Subscription
The idea is that in this subscription you only get one genre of books, and therefore it also comes with the option of joining a book club that is reading the same book or types of books.
A quick add option allows users to commit with minimal effort, making it clear what they receive by default while keeping deeper customization available but optional.
A quick add option sets clear expectations with minimal effort, while keeping deeper customization optional.
Visual Identity & UI System
The visual identity for Wonder Books was designed to create a cozy, immersive reading experience while maintaining clarity across complex subscription decisions.
Color System
Readability
Text / Secondary
Text / Primary
Action & Commitment
Yellow/500 → Primary Action
Yellow/300 → Action Emphasis
Yellow/200 → Action Accent
Structure & Brand
Purple/900 → Primary Brand Background
Purple/800 → Content Surface
Purple/500 → Secondary Action / Strong Accent
Card Gradient → Featured Surface
Decoration & Depth
Purple/500 → Secondary Action / Strong Accent
Purple/400 → Accent Emphasis
Purple/300 → Decorative Fill
Purple/200 → Soft Decoration
Purple/100 → Lightest Decorative Tone
Typography hierarchy
A serif-led typographic hierarchy reinforces the reading-focused nature of the product while maintaining clarity and accessibility.
H1
H2
H3
UI/Large
Discover books
Choose your journey
Customize your subscription
Subscribe
Body
Wonder Books is a flexible subscription that adapts to different reading habits. Readers can choose between physical books, ebooks, or audiobooks and adjust their subscription over time.
Caption
Clear typographic hierarchy helps users scan complex subscription options without feeling overwhelmed.
UI components using the system
1
2
3
Genre
Genre
Genre
Monthly
Billed Monthly
Monthly
Billed Monthly
Monthly
Billed Monthly
Select your preferred book format
Select your preferred book format
eBook (epub)
Audiobook
Paperback
Accessibility considerations
Contrast & readability: Designed dark-mode first to ensure clear contrast, legibility, and hierarchy across text, actions, and states.
Clear labeling: UI copy and labels were written consistently to support screen reader interpretation and reduce ambiguity in complex flows.
Keyboard-aware interactions: Progressive disclosure patterns were informed by research into accessible accordion behavior and non-visual navigation.
Safe overlays: All overlays and expanded states include clear exit paths to prevent users from becoming trapped.
Implementation-minded: While not developed or tested with assistive technologies, the design uses clear structure and naming to support accessible development.
Key Insights and Decisions
Flexibility and ease of use are closely linked; more control increases complexity
Decision hierarchy is critical in subscription design
Progressive disclosure helps preserve flexibility without overwhelming users
Visual systems play a key role in guiding attention through complex flows
Outcome
Flexibility requires intentional constraints
Allowing users to customize their experience without structure quickly increases cognitive load. This project reinforced the need to actively shape how and when flexibility is introduced.
Decision hierarchy should include a clear baseline
Providing a low-effort entry point; such as a quick add action can help set expectations and reduce decision anxiety, while keeping deeper customization available but optional.
Visual and interaction systems shape perceived complexity
Clear hierarchy, spacing, and progressive disclosure significantly influenced how approachable the experience felt, reinforcing how design systems directly support cognitive load in decision-heavy products.