Mirakl Design
Mirakl Design
  • Getting started
    • Welcome to Roma
      • Design principles
  • Design
    • Components
      • Actions
        • Action menu
        • Buttons
        • Button group
        • File download
        • Save bar
        • Tasklist
        • Contextual Toolbar
      • Datalist
      • Datatable
      • Feedback
        • Alerts
        • Activity Loader
        • Badge (status)
        • Empty state
        • Snackbar
      • Form
        • Fields
        • Pickers
        • Selection controls
        • Tree
      • Images
        • Illustrations
        • Icons
        • Media
      • Navigation
        • Hyperlink
        • Page title
        • Sidebar
        • Top bar
      • Overlays
        • Modal
        • Popover
        • Tooltip
        • Side Drawer
      • Structure
        • Global layout
        • Panel
          • Activable Panel
          • Clickable Panel
          • Expandable Panel
          • Panel tabs
          • Totalizer Panel
        • Card
    • Patterns
      • Advanced selection
      • Configure options
      • Displaying data
      • Displaying history
      • Errors
      • Forms
        • Form - Creation mode
        • Form - Edition mode
        • Form - In a modal
        • Error Management
        • Stepper form
        • Onboarding form
      • Loading
      • Progressive disclosure
  • content
    • Writing for Mirakl
      • Grammar and formatting
    • Vocabulary
      • Mirakl products
      • Which verb to use
Powered by GitBook
On this page
  • Overview
  • Guidelines
  • Structure
  • Error management

Was this helpful?

  1. Design
  2. Patterns
  3. Forms

Onboarding form

The onboarding stepper is dedicated to onboarding experiences for new users. Its simple design helps users provide key information quickly and seamlessly.

Last updated 11 months ago

Was this helpful?

Overview

Within Mirakl, the onboarding stepper should be used:

  • When a user is setting up an account for the first time

  • When a user is setting up an organization for the first time

  • When a seller is creating a store

The onboarding stepper shouldn’t be used:

Do not use a datatable within the onboarding layout.

Guidelines

One topic at a time

Do not confuse users with mixed topics within a single step; keep one idea per screen.

Mind the number and length of steps

When asking Mirakl users for information, keep the number of steps to an amount users are able to take in (4 or 5).

Fields must be easy to fill

Provide enough context and guidance

Users need to understand why we're asking for specific information and how we will use that information. Add context and guidance to make the user feel confident.

Structure

The onboarding stepper is made of:

  • On the left other side, a form with:

    • A logo (optional + can be changed at each step of the form)

    • A title

    • A progress bar

    • Form fields

    • Save/Cancel button group

The onboarding stepper has 2 save modes:

  • in memory (when the last step is approved)

  • in the database (save at the end of each step)

Error management

Errors are managed automatically by Roma.

  • If there are errors within one step of the stepper, the user is automatically redirected to the relevant step.

  • If there are errors within several steps of the stepper, the user is redirected to the first step where there’s an error.

For standard, sequenced experiences. Use instead.

Users must fill in their form quickly to secure their arrival on Mirakl. Use standard form components such as , options, , etc.

On the right side, an that must be relevant to the overall theme of the form

Illustrations fitting the onboarding stepper

You may add an at the end of your onboarding stepper.

Stepper form
illustration picked from the Mirakl library
activity loader
fields
select
checkboxes