Role

Competitor research, design
systems, visual design

Timeline

8 weeks

Designing an end-to-end onboarding journey for a SaaS platform

Designing an end-to-end onboarding journey for a SaaS platform

Designing an end-to-end onboarding journey for a SaaS platform

Project type

Role

Live university brief

Competitor research, design
systems, visual design

Tools

Timeline

Figma, Miro

8 weeks

Designing an end-to-end onboarding journey for a SaaS platform

Tools

Figma, Miro

Project type

Live University brief

Interactive walkthrough success screen:

How do we ensure users can quickly understand the client's product?

How do we ensure users can quickly understand the client's product?

When the company What Caused This briefed us, they outlined the issues they were facing which were: obtaining potential customer information, and current users being manually onboarded through their sales team, a time-consuming process that affects the rate of customer acquisition and also results in low customer engagement.


Forming a team, we presented design recommendations to the client outlining how we would address this. I was responsible for designing the entrance into the onboarding via the homepage and the walkthrough, which I created using dummy data.

View Miro Board

View Miro Board

View Miro Board

The Problem:

Lack of digital, visual support for their platform meant that users couldn't see the full value of the product.

Lack of digital, visual support for their platform meant that users couldn't see the full value of the product.

Lack of digital, visual support for their platform meant that users couldn't see the full value of the product.

Before
Sites current homepage:

Before
Homepage

Before
Homepage

The Solution:

Replacing manual sales onboarding with a simple digital onboarding experience.

Replacing manual sales onboarding with a simple digital onboarding experience.

Starting with a small redesign and restructure of the homepage layout as the main hub and starting point of my user flow, I aimed to provide users with multiple entry points with call-to-actions situated in the navigation, hero, and banner.

After
Homepage redesign:

Video demo of the Homepage layout:

Interactive walkthrough—Considering that the client's current onboarding flow was manual guidance via a sales team, I designed a combination of tooltips and hotspots to maintain consistency with user expectations. The current users were being spoken to while being guided through the product, so I mirrored this by creating a system in which the hotspot acts as the "voice" of the tour.


The results of this were shown to the client through a presentation and were greatly received, and the client is along the lines of implementing the solution.

Interactive walkthrough — Considering that the client's current onboarding flow was through manual guidance via a sales team, I designed a combination of tooltips and hotspots to maintain consistency with user expectations. The users were being spoken to whilst being guided through the product, so I mirrored this by creating a system in which the hotspot acts as the "voice" of the tour.


The results of this were shown to the client through a presentation and were greatly received, and the client is along the lines with implementing the solution.


Interactive walkthrough — Considering that the client's current onboarding flow was through manual guidance via a sales team, I designed a combination of tooltips and hotspots to maintain consistency with user expectations. The users were being spoken to whilst being guided through the product, so I mirrored this by creating a system in which the hotspot acts as the "voice" of the tour.


The results of this were shown to the client through a presentation and were greatly received, and the client is along the lines with implementing the solution.


Video demo of the Interactive walkthrough:

Next steps:

User testing the implementation of the design recommendations.

User testing the implementation of the design recommendations.

With the success of our design recommendations, I would like to move into conducting user tests. The aim of this would be to test the user's understanding of the wording used within the tooltips to explain each feature. The test would be structured solely around the walkthrough, with tasks challenging how well the tooltip communicated the functions of the features to the user.

Next project

Next project

Next project