App onboarding

Onboarding is a permission conversation, not a tutorial. The first four screens either earn a signup or waste one. The mockup below is a portfolio design for a fictional habit-tracking app called Ember. Four screens: welcome, promise, single sign-in, and first task. Everything after that lives inside the app itself.

Four screens, one story

Screen one names the product and makes a promise. Screen two teaches the mechanic in one sentence and shows what the interface will look like after signup. Screen three asks for the account. Screen four lets the reader pick a habit so their first session inside the app is already useful. Every screen has one primary action and one clearly subordinate escape hatch (log in, skip, back).

The permission conversation

Sign-in sits third, not first. That order matters. If the reader lands on a wall of "sign in with Apple" as the first thing they see, they bounce. By the time they get to screen three, the promise is already in their head and giving up an email feels like a small tax. The email fallback is present but styled as a border-only button so the two SSO options do the heavy lifting.

Progress dots that mean something

The three thin bars at the top of screens two and three are a compressed progress indicator. Three steps is short enough that a full pagination row would feel bureaucratic. Bars in the accent gold turning on one at a time do the same job with less furniture.

The first task is inside the flow

The final onboarding screen is not a "you're all set" pat on the back. It is the first real screen of the app: pick a habit. That collapses signup and activation into one gesture. When onboarding ends, the user is already using the product. First-session retention improves noticeably when the first tap after signup is a real action rather than a dismissal.

Design decisions

• Warm cream on near-black. Same palette as the marketing site so the transition from install to first screen feels continuous.
• Cream buttons for the primary path. Accent gold is reserved for state (progress, selection). Cream reads as neutral action.
• No illustrations. Onboarding art usually reads as filler. Type, one small logomark, and real UI carry the whole flow.
• Copy that admits things. "You can change it later" under the habit picker removes the weight of the choice. Small copy, big effect on completion rate.

The stack

Platform

React Native with Expo, single codebase for iOS and Android.

Design tools

Figma with an autolayout onboarding component set.

Auth

Supabase auth with Apple, Google, and email magic link.

Instrumentation

PostHog funnel from install to first habit tap.