Challenge

The original onboarding workflow was complex and frustrating. Frequent issues included:

  • Duplication of form fields across multiples pages.
  • Elements required to complete tasks spanned over different pages.
  • Unclear sequencing of tasks needed to complete the setup.

Solution

The new onboarding workflow is simple and easy to use. The major updates included:

  • Setup steps are contained in a single component.
  • Easy to understand sequencing of required steps in the setup workflows.
  • Contextual help to guide the user through the setup tasks.
  • UI display of the current step, future steps, and previous steps in the workflow.
Common issues with the onboarding process for new customers:

  • Lack of guidance in setting up the application for the 1st time user.
  • Lack of sequence and orientation for setting up the application.
  • A tricky navigation and a setup process spanned across different pages.

The 1st step in any design project is understanding the user of the application and their goals. The information about the IT admin persona was gathered via stakeholder interviews and reports from the sales team.

 

My deep understanding of common interaction patterns and web trends led me to create a list of UX requirements for the new solution.

I led a workshop with the technical writing staff to identify the steps in the original workflow and capture the proposed steps in the new workflow. The goal was to formulate a plan to alleviate pain experienced by the customer and we did that!
The new solution addressed the common issues found in the onboarding process:

  • My insight led me to create a wizard with contextual help to guide the user through the setup tasks.
  • The wizard provides an easy to understand sequencing of required steps in the workflow.
  • All of the setup steps are contained in a single component instead of being spanned between unrelated pages.
  • The wizard provides orientation by visually identifying the current step, future steps, and previous steps.
  • The wizard offers status of elements that require uploading to the application.
  • The wizard gives the customer focus on the required steps and reduces other distractions in the UI.