Onboarding Flow

UI Design for Improved User Setup and First-Time Experience

The Challenge

The original onboarding flow relied heavily on information pulled during sign-up with Office 365. Because of this, certain user details weren’t captured initially and often had to be added later, while some users missed setup options altogether. From a marketing perspective, the process also provided little insight into how customers were discovering the product or engaging during sign-up.

The goal for the new workflow was to improve this experience by gathering more meaningful information upfront. It also introduced an opportunity to add sample projects and tasks on first load, giving users a clearer starting point and helping the product feel immediately useful.

The Approach

I began by researching onboarding experiences from other work management tools, focusing on products like Monday.com and Notion to understand how they guided users through setup. From there, I put together a pared-back component library built from the product’s main design system. I introduced new elements specifically for onboarding, such as custom radio buttons and checkboxes, to give the flow its own visual identity while keeping it consistent with the core interface.

Role

UX/UI Designer

Company

Belt Software

Date

May 2025

Tools

Figma

Role

UX/UI Designer

Company

Belt Software

Date

May 2025

Tools

Figma

Role

UX/UI Designer

Company

Belt Software

Date

May 2025

Tools

Figma

The Outcome

The new onboarding flow introduced clear progress markers to help users understand where they were in the setup process. Each stage was colour-coded to reflect its purpose: teal for marketing questions, blue for company and team configurations, purple for user information, and pink for personalisation options. This made the experience more visually engaging and easier to follow.

Illustrations of the product’s interface were added throughout to give users a glimpse of what the tool would look like in action, helping them connect the onboarding questions to real features.

In addition to the setup flow, I designed tutorial modals that appeared when users first entered the product. These provided quick walkthroughs of each section and could easily be dismissed, giving users the choice to explore at their own pace.