heRo3 Onboarding Tours

Skills Used:UX/UI Design|User Research|Creative Process|Problem Solving|Figma


Project Goal

We had a large number of new incoming users due to a recent surge in signups. Our previous method of onboarding these new users required a large amount of time from a few domain specialists to present the app on a video call. We proposed a basic guided tour to offload some of the general information in order to save time and money. This would allow users to onboard whenever they wanted and at their own pace. Additionally, it meant users who joined the app at a later date would also be able to use this resource, preventing them from being left behind their peers.

I led design efforts for this project, and coordinated with project managers, stakeholders, developers, and users.

Design library components created in Figma for rapid prototyping.

The Solution

We conducted user research through interviews, as well as researching similar onboarding methods from other software applications. We also elicited feedback from the stakeholders and engineers for this feature, to ensure that we had a full picture of the scope and size of the project. Following several milestone presentations where we adjusted designs to accommodate various data structures and accessibility concerns, we finalized our design components and integrated them into Storybook where the engineers implemented them.

The onboarding tours successfully provided the information and assistance that the majority of users sought, thereby relieving several support staff of the responsibility of presenting the information and fielding questions.

Prototype of the tour in action, showing the designed stepper component.

Challenges Faced

One major challenge with this feature was focused around the initial time estimates. Stakeholders wanted to deliver this feature rapidly, and as a result it took on a different cadence than previous features. This resulted in multiple early stages of the ideation and elicitation being done in parallel. Aspects of the feature were unknown during the creation of wireframes, and this led to some gaps in the final design. We coordinated extremely closely with the engineers during the entire development process, and were successful in quickly filling in those gaps once product requirements were known.

During ideation, we also encountered some issues dealing with entering and exiting the walkthrough. Users needed to save their models so that the sandbox could be created. They also needed a visual indication so that they could ensure they were in a non-destructive environment. This required adding several design elements and some loading modals which weren’t part of the original wireframes but ultimately gave users the confidence they needed to engage and utilize this functionality.

Each step in the tour can highlight a different element of the page, as shown here.

The Outcome

This feature fully accomplished its goal. Users were now able to engage with the walkthrough feature whenever they wished, leading to a marked drop in support tickets. It also freed up support staff and domain specialists from having to spend presentation time going over basic functionality, allowing them instead to field more specific and complex questions from users. Overall education level rose which led to more excitement around the product and a lot of new interesting feature requests from users.

The finished tour returns the user to their default environment.

Reflections and Learnings

Because of this feature, our team realized the importance of the elicitation and requirements phase of our project pipeline. We instituted new processes to streamline this phase, as well as better estimate time requirements and communicate them to stakeholders. These improvements helped downstream features and increased our delivery cadence.