Strava Onboarding Design: 10 Recorded Screens Explained

01. Establish the activity context

Establish the activity context.

The product needs to know what the person intends to record.

In Strava: Run, Bike, Walk, the recorded screen is a splash screen for the Strava mobile application. In Strava: Run, Bike, Walk, the recorded screen shows an onboarding or sign-up modal for the Strava app, featuring a central card overlay on a blurred background of an active person. Placed side by side, they clarify why the product needs to know what the person intends to record. Focus on the entry state, not the visual genre.

Strava: Run, Bike, Walk and Strava: Run, Bike, Walk arrive at this decision from different products, which helps separate the underlying rule from the visual styling. Sport selection can shape defaults, metrics, routes, and recommendations. Now test the same decision with long copy, a small screen, prior state, and missing data.

Use the choice to configure the first recording rather than only the feed. A broad fitness label provides little operational value. Document the trigger, dismissal, saved state, and return path beside the design.

02. Explain location at the recording moment

Explain location at the recording moment.

Background access carries a clear cost.

In Strava: Run, Bike, Walk, the recorded screen shows an onboarding or promotional overlay for the Strava app, displayed over a background image of cyclists. In Strava: Run, Bike, Walk, the recorded screen is an onboarding or marketing screen for the Strava app, featuring a central mobile device mockup displaying a social activity feed. The useful difference is behavioral: background access carries a clear cost. Compare what the interface reveals before and after the action.

These Strava: Run, Bike, Walk and Strava: Run, Bike, Walk screens show how much the surrounding task changes the right interface treatment. Users should understand how route, pace, and safety features depend on the permission. Check the pattern again for a returning user, a failed request, and a device using larger text.

Show a preview and a manual alternative before the system dialog. A generic allow prompt weakens informed choice. Connect the surface to source-of-truth state before polishing it.

03. Separate privacy decisions

Separate privacy decisions.

Activity visibility is not one setting.

In Strava: Run, Bike, Walk, the recorded screen is an onboarding or promotional screen for the Strava app, featuring a central modal card that showcases a route discovery feature. In Strava: Run, Bike, Walk, the recorded screen is a dark-themed account creation screen for the Strava app. Both examples turn one principle into a concrete choice: activity visibility is not one setting. The transferable detail is the relationship between message, control, and next state.

The contrast between Strava: Run, Bike, Walk and Strava: Run, Bike, Walk is useful because the same design principle appears in two different product contexts. Map, start and end points, profile, clubs, followers, and contacts require different controls. Review the boundary cases next: partial progress, stale data, interruption, and re-entry.

Use conservative defaults and let users preview a posted activity. Social activation should not expose sensitive routes by surprise. Treat loading, failure, cancellation, and recovery as part of the same design review.

04. Reach a trustworthy first recording

Reach a trustworthy first recording.

Activation depends on data confidence.

In Strava: Run, Bike, Walk, the recorded screen is a verification screen for a user authentication flow. In Strava: Run, Bike, Walk, the recorded screen shows an onboarding form for a fitness app, featuring a dark-themed interface with input fields for user profile information such as first name, last name, birthday, and gender. The pair is useful for one reason: activation depends on data confidence. Inspect the surrounding replay before borrowing the pattern.

Strava: Run, Bike, Walk and Strava: Run, Bike, Walk arrive at this decision from different products, which helps separate the underlying rule from the visual styling. GPS state, pause, resume, battery, sensor connection, and save behavior need legible feedback. The design is ready only when it still reads clearly with realistic content and imperfect state.

Handle interruptions and partial recordings without data loss. A flashy start button cannot compensate for unclear recording state. Name the event that opens the screen and the state change that proves the action worked.

05. Introduce social and paid value after context

Introduce social and paid value after context.

Discovery and subscription prompts should build on an activity goal.

In Strava: Run, Bike, Walk, the recorded screen shows an onboarding profile creation form for the Strava app, presented in a dark theme. In Strava: Run, Bike, Walk, the recorded screen is an onboarding screen for the Strava app, titled 'Tell us who you are'. What carries across these products is simple: discovery and subscription prompts should build on an activity goal. The styling changes; the decision structure does not.

These Strava: Run, Bike, Walk and Strava: Run, Bike, Walk screens show how much the surrounding task changes the right interface treatment. Clubs, challenges, analysis, and routes have clearer meaning after the user understands their own data. Use the replay to inspect the lead-in and follow-through, then test the same path with accessibility settings enabled.

Keep growth invitations optional and entitlements precise. Premature asks can make the product feel extractive. Give engineering the entry rule, every outcome, and the expected state after the user returns.

Build the behavior

Implement Strava onboarding design as product state.

Model activity type, sensor and permission readiness, recording lifecycle, privacy audience, sync, social graph, and subscription independently.

Start by writing the state table before styling the surface. For each entry route, record what the product knows, what is still uncertain, which action is primary, which alternatives are valid, and where every outcome leads. Include new, returning, offline, loading, denied, failed, completed, and entitlement-changed states where they apply. This makes visual review more honest because the design is attached to executable behavior.

Keep business rules outside decorative components. Labels, eligibility, limits, dates, prices, permissions, and progress should come from the same domain state used by the action itself. When UI copy and backend truth are maintained separately, they eventually disagree. Add analytics identifiers to decisions and outcomes, not every tap, so the event model can explain whether the user completed the task or became stuck.

Accessibility belongs in the component contract. Test large text, screen-reader order, focus restoration, contrast, reduced motion, touch targets, and understandable error announcements. Localize with real strings rather than compressed placeholders. A robust implementation still works when the most important label wraps, an image is unavailable, or the network response arrives after the user has navigated away.

• ✓Define every entry condition and destination.
• ✓Keep a visible primary action and a valid alternative.
• ✓Preserve user input across interruption and retry.
• ✓Derive dynamic claims from current product state.
• ✓Test large text, screen readers, and reduced motion.
• ✓Log outcomes and recovery, not only button taps.

Validate the decision

Measure whether Strava onboarding design helps.

Measure first valid activity, recording recovery, privacy changes, social opt-in, route confidence, and subscription understanding.

Begin with a task-level baseline. Identify the people who legitimately reach this state, the decision they are trying to make, and the next meaningful outcome. Segment by entry route, account state, device conditions, and prior exposure where those factors change the experience. A single aggregate completion rate can hide a serious problem for first-time users, returning users, or people using accessibility settings.

Large usage and revenue do not prove that a permission or upsell pattern should be copied. Pair behavioral events with short comprehension questions, usability sessions, support themes, refunds or reversals where relevant, and checks of the resulting product state. The goal is to learn whether people understood the choice and could continue confidently, not merely whether they moved forward.

When running an experiment, change one decision structure at a time and keep the underlying entitlement or task stable. Define guardrails before exposure, monitor failure and exit paths, and retain enough time to observe downstream behavior. Document what the evidence can and cannot establish so a local improvement is not mistakenly described as a universal best practice.

Before release

Review Strava onboarding design in the complete flow.

Use the screen as an entry, decision, and exit state rather than a static composition.

Walk into the screen from every real trigger, complete each action, dismiss or decline it, interrupt it, and return later. Confirm that headings and button labels match the next state. Compare the interface with empty, partial, long, localized, and stale data. If the screen references price, progress, permission, safety, privacy, or access, verify the source of truth directly.

Then inspect what happens after success. The next screen should acknowledge the completed decision and make the new state visible. If nothing changes, the user has little evidence that the action worked. Finally, review the full sequence against the original purpose. Remove explanations, fields, and persuasion elements that do not help the task.

• ✓The screen appears only when its decision is relevant.
• ✓Visible copy matches the actual next state.
• ✓Every alternative action has a coherent destination.
• ✓Loading, denial, failure, and retry preserve context.
• ✓Dynamic values come from current authoritative data.
• ✓Success is visible after the action completes.
• ✓Every recorded example links to its exact source screen.

Related design decisions

Continue through the surrounding product flow.

Continue with running app screen examples for the nearest upstream decision, then compare fitness onboarding examples before choosing the pattern that fits your own product.

The most useful reference is rarely the screen alone. Open the recorded examples to inspect the moments before and after it, then compare the linked topics to understand how adjacent choices change the right solution. ScreensDesign Pro can help you search comparable screens and inspect complete flows while you work on your own product.