Product goals
- Bring saved reading into one understandable library.
- Make starting a session direct.
- Keep pause, recovery, and resume within reach.
Your reading.Your pace.
TOOLS
Xcode
ChatGPT
Figma
Google Gemini
Xcode
ChatGPT
Figma
Google Gemini
Pageflow
Read at your pace.
A personal library and an adjustable reader for the things you meant to read.
- Role
- Solo creator · design & development
- Timeline
- 2026 ongoing
- Category
- Reading · iPhone
01 · Overview
More to read than time to read.
Pageflow brings saved texts, a reading pace you can change, and a way to pick up where you left off into one iPhone app.
I owned Pageflow from the first Figma screens to the working iPhone app: product direction, interaction and visual design, branding, and AI-assisted implementation.
The design started with a speed reader. Building it made the surrounding experience just as important: choosing what to read, slowing down, and returning after an interruption.
The design challenge
Help people get back to reading.
Make starting simple, keep the pace adjustable, and preserve a clear way back into the text.
PlatformiPhone · SwiftUI
Core flowSave → read → resume
ReadingFocus, text, and narration
StatusNative development build
About this case study Sources & process
The early designs are from my Figma file; the app screens are native captures. The journey, story map, and low-fidelity studies were made later to explain the design. The audience needs are hypotheses, and no interview or comprehension results were available for this case study.
How I worked
A design-and-build loop, rather than a process reconstructed as a series of interviews.
- 01
Frame
Define the reading problem and the core session.
- 02
Design
Explore the library, reader, and visual direction in Figma.
- 03
Build
Implement the native app with AI assistance.
- 04
Refine
Adjust hierarchy, controls, progress, and recovery in the app.
- 05
Check
Walk through imports, playback, saved position, and recorded activity.
02 · Research
A reading pace is only part of the problem.
The intended audience is people fitting reading around other commitments. The design also needs to support understanding, interruption, and a reliable return.
Reader needs
- Know what a text contains before committing to it.
- Choose a pace and change it when needed.
- Reread a difficult passage without losing the session.
Intended audience
- People with articles, books, or notes saved for later.
- Readers working through texts in short sessions.
- People curious about a paced reading format.
What informed the design
I reviewed reading research and existing reading tools while assembling this case study. This is desk research, rather than evidence from Pageflow participants.
Reading research
Speed can cost understanding.
A review by Rayner and colleagues challenges claims of large speed gains without a comprehension trade-off. It also explains why going back through a passage matters.
In Pageflow Pace is adjustable, pause stays visible, and the reader can return to full text.
Rayner et al., 2016 ↗Saved reading
Saving is the beginning.
Readwise Reader organizes saved documents and supports offline reading. Its documentation provides a useful reference for a library that people can return to.
In Pageflow Filters, stored progress, and a resume strip make the next session easier to find.
Readwise Reader documentation ↗Paced reading
Get into the text quickly.
Spreeder’s web app lets people paste text and begin a word-by-word session. I used that direct entry as a reference, while keeping a library and return path in Pageflow.
In Pageflow Imported text can be reviewed before it is saved and opened in the reader.
Spreeder’s web app ↗Competitive landscape
Different ways into the same reading pile.
A focused comparison of published features. This review informed the case study; it was not a usability test of these products.
Readwise Reader
Collect & annotate
Brings articles, newsletters, EPUBs, PDFs, and other material into one library, with highlights, notes, and text-to-speech.
What I take from it
Official product reference ↗A saved library needs organization that remains useful after the first import.
Spreeder
Paced & page reading
Combines an adjustable RSVP reader with a conventional e-reader, imports, bookmarks, notes, and reading statistics.
What I take from it
Official product reference ↗Paced reading and ordinary pages already coexist elsewhere. Pageflow needs to make switching and recovery clear.
Apple Books
Read & return
Offers a book library, reading customization, bookmarks, and automatic saving of the reader’s place.
What I take from it
Official product reference ↗Returning to a saved place should feel expected and effortless.
PAGEFLOW’S FOCUS
A personal iPhone reading session with an adjustable pace and a clear way back to context. The design goal is to make choosing, reading, and returning feel like one coherent experience.
Reader profile · assumption
Someone with a reading queue and a busy day.
They have something worth reading, but their available time comes in pieces. They need a manageable way in and a dependable way back.
A question to test
After an interruption, can they resume and still follow the text?
03 · Reader journey
The session starts before the first word.
Choosing a text, understanding the controls, and coming back after an interruption are all part of the reading experience.
Before reading
Help the reader choose a text and understand the time and pace involved.
During reading
Make it possible to pause and recover context when a word stream moves too quickly.
After an interruption
Keep the reading place and make the next session easy to begin.
Story map
What the reading flow needs to support
I mapped the current app’s activities and smaller interactions, then separated them from the questions that need reader testing.
In the app
A clear route into reading.
The library leads to a preview, then into a reading session. The return trip matters too: the reader’s place needs to survive leaving the screen.
See the native screens ↗04 · Structure and flow
A library, with reading close by.
Library, Explore, Statistics, Settings, and Profile are the main destinations. Import and reading open from the library, so adding a text and returning to it stay connected.
Reading, interruption, and return.
Reading is not a single uninterrupted action. Pageflow keeps a text’s position, gives the session a summary, and lets the reader return through the library’s resume control.
Before reading
Review what came in.
Imported text can be checked before saving. The preview gives the reader another chance to choose the content and starting point.
During reading
Make recovery ordinary.
Pause, rewind, and a full-text alternative let the reader respond when a passage needs more attention.
After reading
Keep a useful record.
Reading time, sessions, and saved position describe activity. They do not establish what a reader understood.
When discovery fails
Keep a way to read.
Catalog requests timed out during the project’s checks. The app explains the failure, offers a retry, and keeps practice texts available.
The recovery path is implemented. The external catalog’s reliability still needs work.
05 · Design iterations
What changed when the design became an app.
The original Figma screens established the idea and visual identity. Building the native experience exposed more decisions about hierarchy, reading controls, and what the interface could honestly show.
The original Figma direction
Where the design started.
These six screens show the high-fidelity concept before native implementation. Book covers, totals, and streaks are illustrative design content.
Library
From a dashboard to a place to pick up a text.
The first design gave the welcome banner, featured book, and carousel similar emphasis. The native library puts reading state and a way to continue alongside the covers.
What changed
01
Less competing content
The welcome banner gives way to a direct library heading.
02
Status beside the title
Reading states and per-text progress make the shelf useful.
03
A visible next action
Continue reading keeps the saved text close.
Reader
Give the word space. Keep context nearby.
The Figma reader carried the dashboard header and search into the reading session. The native design removes that surrounding chrome and keeps recovery controls in the reading space.
What changed
01
One focal point
The word sits in an open reading area.
02
Native type
System serif or sans follows the reader’s preference.
03
A way to recover
Pause, sentence rewind, and passage context stay within reach.
Statistics
From illustrative totals to recorded activity.
The original concept explored a weekly dashboard. The native version shows time, sessions, pace, and a reading streak from session data.
What changed
01
Clearer hierarchy
Reading time leads, followed by goal and streak.
02
Consistent typography
Native system type replaces a mixed dashboard treatment.
03
A useful boundary
Comprehension remains unmeasured; pace does not establish understanding.
Structure studies
The screens stripped back.
These sketches and wireframes were created retrospectively to explain the interface structure. The project began with high-fidelity Figma designs.
Retrospective sketches
Retrospective wireframes
Reading position
Keep the focal letter still.
The reader anchors a selected letter to the guides instead of centering every word as a whole. The implementation measures glyph widths so words of different lengths can share the same reading point.
To test: whether the fixed reading point feels comfortable across text lengths and reading speeds.
Recovery
Give the paragraph a place in the experience.
The native reader offers a full-text alternative and a route back to the current passage. A missed word should not force the reader to abandon the session.
To test: how quickly people recover meaning after pausing or switching reading modes.
Progress
Finished should mean finished.
An earlier implementation could round progress to 100% with unread words remaining. The recorded fix caps unfinished reading at 99% until the actual end of the text.
This is an implementation correction documented in the project, rather than a participant-testing result.
06 · Visual design
The app’s visual language.
Forest green anchors the actions. Pale paper and mint surfaces keep the library quiet, while book covers and the reading word carry the visual interest.
Brand identity
PageflowThe open-book PF mark links the brand to reading. Green carries through actions, progress, and the focal letter.
App colors
#2E574AForest
#C4DED1Mint
#E6E9E3Paper
DynamicSystem label
Tokens from the native design system. The reading highlight uses #2E6E54; system text and surfaces adapt to appearance changes.
Typography
Two voices. One reading experience.
SF Pro keeps the interface direct. New York gives the reading space a quieter, editorial character.
See the native type specimens ↓Iconography
SF Symbols in the native navigation bar. Labels give each destination a name; the selected state uses the forest accent.
Native typography
Designed around the words.
Platform-rendered font specimens, paired with the roles they play in Pageflow.
Navigation, library titles, controls, and activity. Regular to bold weights establish hierarchy without extra decoration.
The serif option for focused words and text pages. Sans and mono alternatives, with a 14–28 pt reading-size setting, let the reader choose.
Rendered with Apple’s native system font APIs; these are type specimens, not app screenshots. Apple’s system font designs ↗
Components from the app
Real interface details, with the typography and states used in the native build.
Navigation
Native app detailLibrary filters
Native app detailSaved text rows
Native app detailContinue reading
Native app detailReading controls
Native app detailGoal & streak
Native app detailActivity measures
Native app detailReading needs flexibility.
Adjustable pace, a text mode, narration, and labeled controls provide different ways through the content. A complete VoiceOver and large-text review is still needed.
07 · The app
The native reading experience.
From a saved text to a reading session, then back to the library. These screens come from the native app.
A real reading session · 49 seconds
Watch the words.
Then find your place.
Rapid serial visual presentation (RSVP) shows one word at a time. This recording follows the working app, from focused playback to a saved passage.
- Read at your pacePlay the word stream, pause, and lower the pace from 300 to 250 WPM.
- Recover the contextSwitch to the text page and bookmark the passage.
- Come back to itReturn to the library and resume the saved text.
Native Simulator recording. Capture pauses are removed; RSVP playback runs at its recorded speed. Reading pace is not a comprehension result.
About this build
These are captures from the native development build. They show implemented screens, not evidence of improved reading speed or comprehension. The walkthrough records the native reading flow, with capture pauses removed.
08 · Reflection
What I learned
building Pageflow.
Building a reader meant paying attention to the moments around reading: choosing a text, pausing, recovering context, and coming back.
Pick it up.Put it down.
Find your place.
Swipe to read all six takeaways →
A saved text needs a clear way back into reading.
Continuity
The right pace is one the reader can change.
Control
A pause can be part of understanding.
Reading design
When context disappears, make it easy to recover.
Recovery
A finished screen still needs real reading sessions.
Validation
Activity can be recorded. Understanding needs to be checked.
Honest feedback
What’s next? →
Observe people reading real texts, compare the modes, and check understanding and interruption recovery alongside pace.
Sources and project notes
Original designs
Pageflow iOS Launch · original Figma file ↗. The Figma screens are earlier high-fidelity designs, not the final native interface. Their book titles, totals, and streaks are illustrative design content.
Reading references
- Rayner et al. (2016), reading speed and comprehension.
- Readwise Reader, official product documentation.
- Spreeder, official web app.
Project evidence
The native source, library and reader refinement records, book-reading verification, and import verification inform the story. Historical implementation checks are project evidence, rather than new user research. The current source was built for the Simulator during this case-study pass.
Visual provenance
The homepage cover is an AI-generated brand presentation based on the actual Pageflow mark and the portfolio’s grid reference. Figma screens were exported from the owner’s original file. App screens are native project captures. The walkthrough records the native reading flow, with capture pauses removed. The journey, story map, and wireframes were created for this case study and do not imply a historical research process.
Independent product design and development · 2026