Skip to main content
UI Coach Logo
Beginner

Guided Product Onboarding

Design a first-run journey that teaches a team lead to configure and publish one useful workflow without blocking exploration.

Responsive web1 to 2 hours

The brief

Understand the problem

Background

A workforce planning product has many settings, but new customers receive value only after they publish their first weekly rota. Long product tours delay that moment and are difficult to recall.

User context

Maya manages a twelve-person bakery team. She has imported staff names but has never built a rota with availability rules and needs to publish next week's plan before closing.

Product problem

Maya needs enough guidance to complete a real schedule while retaining the freedom to skip explanations, correct mistakes, and return later.

Objective

Create a short onboarding path that turns imported staff data into a valid first rota and leaves Maya confident about the next action.

What to design

Define the experience

Required experience

  • Choose a setup goal and inspect the expected outcome
  • Add opening hours and one availability rule
  • Build the first rota with contextual guidance
  • Review, publish, and understand what happens next

Screens and states

  • Welcome and goal selection
  • Essential setup
  • Guided rota builder
  • Publish review and completion

Core user flow

Follow the critical path

  1. 01

    Maya chooses to create next week's rota

  2. 02

    She enters store hours and reviews imported staff availability

  3. 03

    Contextual prompts help her resolve one uncovered shift

  4. 04

    She publishes the rota and receives a concise follow-up checklist

Product rules

Requirements and constraints

Requirements

  • Explain why each requested setup detail matters
  • Keep progress visible without implying that every optional step is required
  • Allow users to skip guidance and resume it from the same point
  • Use real interface states instead of a detached feature tour

Constraints

  • The core workflow must remain usable with onboarding dismissed
  • Setup answers must be editable after completion
  • The experience must support keyboard and screen reader navigation

Reality check

States worth considering

Imported staff data is incomplete
Maya leaves during setup
No employee can cover a required shift
Another manager publishes a rota first

Finish line

What to deliver

  • Four responsive onboarding screens plus a dismissed-guidance state

If you want more

Optional extensions

Design a returning-user progress reminder
Add a sample rota path for users without imported data

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Font pairing
SintonyPoppins

Sintony & Poppins

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Keep practicing

Intermediate
SaaS

Honest Subscription Cancellation

Design a cancellation journey that explains service, data, billing, and team consequences without obstructing a customer's choice.

Responsive web1 to 2 hours
Content DesignInteraction Design
Intermediate
Education

First DIY Project Coach

Design a beginner-friendly project guide that helps someone choose, prepare, and safely finish one home repair.

Mobile1 to 2 hours
Content DesignProgressive Disclosure
Intermediate
Creator tools

Recover a Failed Video Upload

Design an upload and processing flow that preserves progress, explains failures, and gives creators a reliable path to publication.

Desktop web1 to 2 hours
Error HandlingInteraction Design
Intermediate
Collaboration

Turn a Meeting Decision Into Follow-Up

Design a post-meeting flow that converts one agreed decision into a durable record, owned actions, and visible follow-up.

Desktop web1 to 2 hours
Content DesignInteraction Design
Beginner
Education

Learn to Publish a First Blog Post

Design a tutorial path that guides a beginner through setting up a blog and publishing one useful article.

Responsive web1 to 2 hours
Information ArchitectureContent Design
Beginner
Creator tools

Publish a Personal Story With Confidence

Design a simple blog editor that helps a new writer draft, preview, choose visibility, and publish a personal post.

Responsive web1 to 2 hours
Content DesignResponsive Design