UX / UI Case Study · Mobile Application
Reading, as it
was always meant
to feel.
Readr is a premium reading app engineered for long-form content lovers who find traditional reading apps cluttered, visually exhausting, or lacking in customization. This case study documents the full design journey from problem to pixel.
Contents
What's in this
case study
Problem Statement
Existing reading apps treat
the interface as a utility.
Modern e-reading apps, Kindle, Apple Books, Pocket, were designed to store and deliver content. They were not designed around the act of reading itself. This creates a compounding set of problems for avid readers who spend 60+ minutes a day in text.
"Readr treats the reading interface as the product, not the container for it."
01
Visual Fatigue from Poor Typography
Default fonts optimize for legibility, not readability. Line spacing, tracking, and measure are afterthoughts. Most apps use a single slider with no typographic rationale behind the values.
02
UI Clutter Destroys Immersion
Navigation bars, progress trackers, chapter titles, and system chrome fight for visual attention with the text, the very thing users came to read. Push notifications during reading are never blocked by default.
03
Accessibility is Retrofitted, Not Built-In
Dyslexia-friendly fonts like OpenDyslexic are buried in system menus. High-contrast modes are binary. TTS implementations are robotic and interrupt reading flow rather than supplementing it.
04
Analytics that Create Anxiety
When reading stats exist, they surface as performance metrics (pages read, speed ratings) that create pressure rather than celebrating the pleasure of reading. No app treats insights as reflection.
Target Audience
Three readers.
One shared frustration.
Every design decision in Readr traces back to one of these three composite personas, built from diary studies and in-depth interviews with 18 participants over three weeks.
P
Priya, 31, Graduate Researcher
iPhone 15 Pro · 60–90 min/day · Non-fiction & long-form essays
"I lose my flow every time a notification slides in or I accidentally tap the navigation bar. I end up re-reading the same paragraph three times."
M
Marcus, 24, Undergraduate Student
Android · 30–45 min sessions · ADHD & Dyslexia
"I have to fight the app just to make text readable for me. By the time I've adjusted everything, I've lost the motivation to start."
S
Saoirse, 44, Product Director
iPad Mini + iPhone 14 · 20 min windows · Collector & casual reader
"My reading list is a graveyard. I save everything, read nothing, and have no idea what I actually finished last month."
User Research
What we found.
What we did about it.
Methods included two-week diary studies (n=12), comparative usability testing against Kindle and Pocket, expert typographer interviews, and a full accessibility audit with VoiceOver and TalkBack.
1
Users adjust typography settings an average of 2.3 times per session across different apps, suggesting the settings are never quite right from the start.
Build a persistent, easily-summoned settings panel. Design font presets, not just sliders, so the first choice is likely the right one.
2
78% of participants said a notification during reading "broke their focus for more than 2 minutes", far longer than the interruption itself.
Deep Read Mode includes notification blocking with a clear, one-tap system permission flow, shown proactively, not buried in settings.
3
Neurodivergent users felt "surveilled" by aggressive reading-speed analytics. Several abandoned apps specifically because of speed metrics.
Frame all insights around time and consistency, never speed or pages-per-hour. Remove comparative percentiles entirely.
4
Users with light sensitivity found both pure-white and pure-black interfaces "harsh at the edges of the day", particularly first thing in the morning and before sleep.
Introduce mid-tone themes: Parchment (warm off-white), Dusk (soft grey-beige), Sepia (amber-warm). Neither extreme as the default.
5
TTS users abandoned it within 60 seconds when the visual reading position failed to sync with the audio, a near-universal failure in tested apps.
TTS highlights the currently spoken sentence in the text and auto-scrolls. Visual and audio are always synchronized; manual scrolling overrides without stopping playback.
Design Thinking
Five phases.
One guiding question.
HMW create a reading environment so frictionless and personalized that it fades into the background, leaving only the reader and the text?
E
Empathize
Diary studies, competitive analysis of 6 reading apps, and deep consultation of typographic research, including the Readability Matters consortium findings on screen typography. Interviewed two practicing typographers on optimal digital measure and leading.
D
Define
Synthesized research into three persona narratives and the core HMW statement above. Identified the tension between The Invisible App (radical UI minimalism) and The Reading Studio (deep customization). Both were real user needs.
I
Ideate
Resolution came in a three-hour design sprint: Readr defaults to the Invisible App, but the Design Drawer is the Reading Studio, summoned intentionally as a ritual, not imposed. The drawer is opt-in pleasure, not mandatory configuration.
P
Prototype
Three fidelity passes: paper (IA flows), Figma grayscale (spacing and hierarchy), and full interactive hi-fi (color, motion, micro-interactions). Each served a specific validation goal, preventing over-investment in visual polish before structural problems were solved.
T
Test & Iterate
Three usability rounds. Key iterations: Deep Read dismiss moved from single-tap to double-tap (accidental triggers eliminated); Typography Drawer collapsed from 14 visible controls to 3 sections (task completion time ↓ 40%); Reading Insights replaced line graphs with the Reading Garden metaphor (user sentiment shifted from "data" to "reflection").
Design System
Tokens, type,
and intention.
Every color, typeface, and spacing value is a deliberate choice. The system is small enough to memorize and principled enough to scale. Nothing is decorative, everything communicates.
Color Palette
Parchment
#F5F0E8
Eggshell
#EDE8DC
Charcoal
#2C2C2C
Sage
#8FA68A
Terracotta
#C4785A
Typography Scale
Display
Lora 500
Lora 500
The art of reading slowly.
Body
Lora 400 / 1.75
Lora 400 / 1.75
She read with the kind of focus that made the café noise irrelevant, the text was a room she'd entered and quietly closed behind her. The default size is 18px, adjustable from 14 to 28.
UI
Inter 400
Inter 400
Chapter 4 · 34% complete · ~22 min left · Deep Read active
Label
Inter 600 Caps
Inter 600 Caps
Continue Reading · Up Next · Deep Read Quality
Core UI Screens
Four screens.
Every detail considered.
What follows are detailed UI specifications for each core screen, written to be handed directly to a Figma designer or developer. Zone labels (A, B, C…) correspond to vertical regions from top to bottom.
01
Zone A, Header
Wordmark Navigation Bar
Height:
80px including safe area. Left: circular avatar (32px) showing user initial, taps to account/settings. Center: "Readr" wordmark in Lora Medium, 20px, charcoal, the typographic name is the brand, no icon logo. Right: Search icon (22px feather-style) + Import icon (downward arrow into box). Background is transparent, the header is part of the page, not floating above it. No shadow, no card.
Zone B, Hero Card
Continue Reading, Single Prominent Card
Height:
200px. Full-width with 24px horizontal margins. Background treatment: A soft, blurred, desaturated version of the book cover fills the card at ~20% opacity, atmospheric, not photographic; the cover sets a mood. Content (left-aligned): eyebrow label "CONTINUE READING" (Inter 500, 10px, sage, 0.1em tracking) → Book title (Lora Medium, 22px, charcoal) → Author (Inter Regular, 14px, slate) → thin 3px progress bar in sage/eggshell → caption "Chapter 4 · 34% complete · ~22 min left." Tap action: crossfade directly to Reading Interface, resuming exact scroll position. Press state: scale(0.98).
Zone C, Reading List
Up Next, Horizontal Scroll Row
Section label "UP NEXT" (Inter 500, 11px, slate, uppercase). Horizontal scroll. Card size:
130×190px. Card anatomy: top 75% = cover image with 6px corner radius + soft bottom vignette; bottom 25% = Title (Lora, 13px, charcoal) + Author/Source (Inter, 12px, slate). Small sage dot top-right = unread indicator (disappears once opened). Final card in row: dashed-border "+" Add Content card with eggshell background.
Zone D, Article List
From the Web, Saved Articles
Section label "FROM THE WEB" (Inter 500, 11px, slate) with right-aligned "See all →" in sage. Vertical list rows: Left, 36×36px source favicon in rounded square. Center, Article title (Lora, 15px, charcoal, max 2 lines) + publication + read time (Inter, 12px, slate). Right, 3-dot kebab. Swipe left reveals Archive (sage bg) and Delete (terracotta bg) actions with spring physics.
Zone E, Bottom Nav
3-Item Navigation Bar
Height:
54px above system home indicator. Items: Library (home icon, active state), Discover (compass icon), Insights (sprout/leaf icon, sets the organic metaphor for the Insights tab). Active: filled icon + Inter Medium 10px label in charcoal. Inactive: stroke icon + Inter Regular 10px in slate. 1px top hairline border at rgba(0,0,0,0.07). Flat, no blur, no card.
02
Zone A, Reading Header (Default)
Collapsible Chrome Bar
Height:
44px. Appears on load; fades to 15% opacity after 3 seconds of scroll inactivity. Left: ← back chevron (returns to Library, preserves scroll). Center: Chapter title in Inter Regular, 13px, slate, intentionally small (reference, not navigation). Right: "Aa" Typography button (opens Design Drawer).
Zone B, Text Canvas (The Core Product)
The Reading Surface, Full Typographic Spec
Measure (line length)Default 68 chars (~85% screen width). Grows on wider devices.
Leading (line spacing)Default 1.7. User range: 1.4 – 2.2
Paragraph spacing0.8em below each paragraph
First-line indentOn by default for books; off for articles. User-toggleable.
Default alignmentLeft-aligned rag right. Full justification available with word-spacing compensation algorithm to prevent rivers.
Font smoothing
-webkit-font-smoothing: antialiased · text-rendering: optimizeLegibilityPosition indicator2px wide sage line at left margin of active paragraph. Pulses softly. Always visible, never intrusive.
Zone C, Deep Read Mode (Activated)
Distraction-Free State
Activation: Double-tap on text, or tap center while header is visible. What hides: Header fades to 0% opacity (top edge zone remains tappable for accessibility). Footer fades to 0%. System status bar hidden if permissions allow. Text canvas fills full screen. What remains: 2px position indicator. Gesture navigation (swipe horizontal = page turn, or vertical scroll, user preference). Double-tap or edge swipe to exit. Ambient modes (optional): Warm Glow (off-center radial gradient, text slightly brighter than margins), Vignette (edge darkening to focus eye center). Both fully toggleable.
Zone D, TTS Floating Controls
Text-to-Speech Active State
A floating bar
36px tall, 90% screen width, centered, 16px corner radius, rgba(44,44,44,0.88) background with blur. Controls: Skip Back 30s · Play/Pause · Skip Forward 30s · Speed (0.75×, 1×, 1.25×, 1.5×, 2×) · Close. Currently-spoken sentence highlighted with a --sage underline at 40% opacity, tracking in real time. Auto-scroll follows playback; user scroll overrides without stopping audio.
03
Drawer Behavior
Bottom Sheet Mechanics
Triggered by "Aa" button. Slides up as bottom sheet with
24px top corner radius. Height: 65% of screen, the top portion of text remains visible for live preview. Live preview: every change reflects in the text behind in real time (200ms ease). No "Apply" button. Background: --eggshell with backdrop-filter: blur(24px). Handle pill: 40×4px at top center. Spring physics on open: stiffness 280, damping 32.
Section A, Theme
5 Circular Theme Swatches (expanded by default)
Row of 5 swatches, each
52px diameter: Parchment (warm off-white bg, charcoal text) · Sepia (amber bg, dark brown text) · Dusk (grey-beige bg, off-white text) · Ink (#1A1A1A bg, light grey text) · True Black (#000 bg, pure white, OLED & high contrast). Selected swatch: sage 2px ring, 3px offset. Below swatches: a Brightness slider with circular 20px thumb, adjusts brightness within the app context without leaving the drawer.
Section B, Typography
Font, Size, Spacing, Margins, Alignment (collapsible)
Font Family: Horizontal-scrolling font pills (~100×36px rounded rects), each name set in its own face: Lora · Bookerly · Georgia · OpenDyslexic · Inter. Selected: filled charcoal bg, white label. Unselected: eggshell bg, slate label, 1px border.
Text Size: Large centered px value in Lora at 32px, flanked by − and + buttons (44×44px tap targets). Slider alternative below.
Line Spacing: Labeled "Breathing Room", not "Line Height." Same control pattern. Language is for the reader, not the developer.
Margins: Four icon buttons, Narrow · Normal · Wide · Max, illustrated as tiny column icons showing relative margin width.
Alignment: Two micro-typographic illustration buttons: Left-Align and Justified. Icons show the actual text layout, not abstract symbols.
Text Size: Large centered px value in Lora at 32px, flanked by − and + buttons (44×44px tap targets). Slider alternative below.
Line Spacing: Labeled "Breathing Room", not "Line Height." Same control pattern. Language is for the reader, not the developer.
Margins: Four icon buttons, Narrow · Normal · Wide · Max, illustrated as tiny column icons showing relative margin width.
Alignment: Two micro-typographic illustration buttons: Left-Align and Justified. Icons show the actual text layout, not abstract symbols.
Section C, Accessibility
Specialist Tools, Surfaced, Not Hidden (collapsible)
Slightly deeper tint background, signals these are specialist tools, considered not buried.
Bionic Reading toggle: Full-width row. Description: "Bolds the first syllable of each word to guide the eye." Pill toggle on right. When ON: text behind drawer immediately shows Bionic formatting.
OpenDyslexic toggle: Description: "A typeface that anchors letter shapes to reduce visual rotation." When ON: replaces current font with OpenDyslexic and hides Font Family selector to prevent conflicts.
High Contrast toggle: Forces True Black theme + pure white text + disables ambient modes.
Start Reading Aloud button: Full-width, sage background, white label "▶ Start Reading Aloud" (Lora Medium). Closes drawer and activates TTS from current position.
Word Spacing slider: Contextually visible only when OpenDyslexic or Bionic Reading is active. Labeled "Word Breathing." Range: Normal → Relaxed → Airy.
Bionic Reading toggle: Full-width row. Description: "Bolds the first syllable of each word to guide the eye." Pill toggle on right. When ON: text behind drawer immediately shows Bionic formatting.
OpenDyslexic toggle: Description: "A typeface that anchors letter shapes to reduce visual rotation." When ON: replaces current font with OpenDyslexic and hides Font Family selector to prevent conflicts.
High Contrast toggle: Forces True Black theme + pure white text + disables ambient modes.
Start Reading Aloud button: Full-width, sage background, white label "▶ Start Reading Aloud" (Lora Medium). Closes drawer and activates TTS from current position.
Word Spacing slider: Contextually visible only when OpenDyslexic or Bionic Reading is active. Labeled "Word Breathing." Range: Normal → Relaxed → Airy.
04
Zone A, The Reading Garden
Organic Data Visualization
Replaces standard bar charts. A visual "garden" where reading consistency grows flora. Each day read adds a leaf; completing a book blooms a flower. The visual focuses on growth over time, not speed.
Zone B, Time metrics
Gentle Statistics
Metrics focus on "Total Time Enjoyed" and "Current Streak" rather than "Pages per Hour". No percentile comparisons to other users.
Motion Principles
Invisible choreography.
Motion in Readr serves to maintain context, never to entertain. Animations are swift, easing is natural, and transitions are continuous.
Deep Read Transition
Header and footer fade opacity over
400ms with a slow ease-out. No sliding, to prevent distracting the eye from the text.Design Drawer
Slides up from bottom. Spring physics:
stiffness 280, damping 32. Text canvas behind it does not shrink, just blurs slightly to maintain context.Page Turns
Horizontal swipe uses a 1:1 direct manipulation curve. Release snaps to nearest page boundary using a fast spring
stiffness 400, damping 40.Accessibility
Built for everyone.
Accessibility was not a checklist at the end; it was the foundation of the typographic engine and interaction model.
WCAG 2.1 AA compliant color contrast across all 5 built-in themes.
Native support for Dynamic Type, scaling UI elements proportionally.
Full VoiceOver & TalkBack semantic labeling for all custom controls.
OpenDyslexic and Bionic Reading built into the primary typography drawer.
Outcomes
Measuring success.
The redesign was tested against the legacy app with a beta group of 2,000 active users over 4 weeks.
+42%
Average Session Length
-68%
Settings Adjustments
94%
Deep Read Adoption