Screen study · Reviewed September 23, 2026
Structured onboarding for a daily plan
The flow narrows from a planning promise to wake and sleep times, a task, start time and duration.
How can setup translate a broad planning promise into usable schedule details?
Structured uses one question per screen, keeps Skip visible during setup and places selected times or task details beside a Continue action. These exported screens do not prove sequence timing, persistence or downstream scheduling behavior.
Evidence and limits
Selected Structured Sep 2026 exported iOS screens, shown as still references. No recording is attached; ordering, timing, intermediate actions, outcomes and alternate paths are not established.
Read the decisions
01 / Structured · Sep 2026 · Still image
Welcome to Structured
What is visible
A coral welcome screen pairs an oversized headline with planner illustrations, a Skip control, a Log in link and a round forward action.
Design interpretation
Set expectations and keep returning-user access distinct from the new-user path.
02 / Structured · Sep 2026 · Still image
Preview the planning task
What is visible
A step heading introduces planning for tomorrow, with an illustration, a Plan for tomorrow instead option and Start Planning.
Design interpretation
Offer a clear alternative when the suggested timing does not fit, before collecting detailed preferences.
03 / Structured · Sep 2026 · Still image
Select a wake-up time
What is visible
A vertical time picker highlights 8:00 AM between faded neighboring values, with a sunrise illustration and Continue.
Design interpretation
Use adjacent values to make the selected time legible as part of a continuous range.
04 / Structured · Sep 2026 · Still image
Choose a bedtime
What is visible
A dark-blue night illustration accompanies a time picker centered on 11:00 PM and a Continue action.
Design interpretation
Use a distinct visual context to signal that the question changed from morning to evening.
05 / Structured · Sep 2026 · Still image
Add a task idea
What is visible
A task entry screen offers a Create a task field and suggested activities, with Continue fixed along the bottom.
Design interpretation
Suggestions can reduce blank-page effort while leaving the task field available for custom input.
06 / Structured · Sep 2026 · Still image
Choose a short duration
What is visible
A horizontal duration selector highlights 15m beneath the task card.
Design interpretation
Offer a few bounded choices for duration and keep the current selection visually distinct.
What to question
- Collecting several schedule preferences makes a plan more specific, but increases setup effort before the first use.
- A picker communicates a selected time clearly; it does not show whether people can type a time or adjust accessibility settings.
- Suggestion chips speed task entry but may omit a person’s actual task; keep custom entry usable.
Try an original implementation
Explore a three-step web onboarding pattern: choose a goal, set a pace, and optionally request a reminder. Go back to revise answers without losing them.
This React example uses native form controls, keyboard navigation and focus management. It is a separate prototype with original copy and styling, not a reproduction of the source apps.
Download React sourceRequires React and Tailwind CSS. Web only; not React Native. MIT license.
Import the named OnboardingExample component into a page. Replace the final preview with your application logic; this example makes no network requests.
Practice studio · Original web demo
Step 1 of 3
What would you like to practice?
Before you ship
- Keep a skip or defer option visible for nonessential setup questions.
- Show selected time and task values in context before advancing.
- Support custom tasks alongside suggestions and offer adjustable schedule controls.
Validate these recommendations with your own users. No conversion uplift is claimed.