close icon
CASE STUDY- 2021

Reducing Onboarding Friction

Case study overview UI
OVERVIEW

The process of creating a Hyperspace is probably the most important stage of the customer lifecycle in our product. While it comes right at the start of their journey, it sets the tone for their whole relationship with the product.

User onboarding of the existing product was designed with the goal of just naming the Hyperspace and capturing only the basic details, allowing the user to land on an empty space. User’s then had to customize the scope by adding further inputs to view insights in the Hyperspace, specific to each user.

MY ROLE
Product Designer
TIMELINE
3 Months
TEAM
(+1 Designer) Malavika
GOAL

Ease the experience of creating a Hyperspace

Our primary design goal after thoroughly studying the user pattern was to ease the experience of creating a Hyperspace. The growth was smoother if multiple Hyperspace was created to clearly demarcate the user’s scope and insights, ultimately increasing the production adoption.

SOLUTION
a few of the final UI Screens
Snapshots of a few Final UI Screens

Due to NDA  I’m forced to stop here

You can Schedule a call with me. I will be more than happy to share with you some more information
about this project and its solutions.
meeting iconmeeting icon
PROBLEM

Landing on a Hyperspace that required further configuration presented two major drawbacks.

MY GOALS
  • The customer churn was found to be very high with poor product adoption
  • Persuading a user from an empty screen to customize the scope of the Hyperspace rendered a bad experience that demotivates them
empty screen image
User lands on empty screen after naming a hyperspace
RESEARCH

1. Initial Flow

The onboarding was simplified to get the user to the Hyperspace with ease. It came to our understanding that this posed a few functional issues. An empty Hyperspace did not give the user any glimpse of what to expect.

  • A considerable number of clicks to further define the scope of the product since the onboarding wasn’t extensive enough to capture any information. The user behavior can tend to display a lack of enthusiasm in moving forward or using the product thoroughly as it doesn't serve as self-help.
  • The first few minutes of a new customer’s experience is ideally an effortless demonstration of your product’s value.
flow diagram design
Existing initial flow

2. Usability Testing

Qualitative testing was conducted at this phase to try and identify why an experience or design doesn't work, or what needs to be changed. From this study, it was clear that prerequisite data collected was accurate but the sequence or the order in which it was being input from the user, was not apt.  Below are the results from the conducted test.

a image to show testing
INSIGHTS FROM TEST
  • The general feedback from the qualitative study showed the whole process to be tiresome, leaving the user dissatisfied with the output. The sense of progressing forward in creating something was lost in the process.
  • The flow was complex and it was evident that the path a user takes and the order or hierarchy of collected data/input in the process needed rework. The design had to be more human-focused which iterates to present impactful yet concentrated solutions to those experiencing the problem.

3. Card Sorting & Grouping

Step by step visual mapping process was done to outline a set of data that had to be gathered from the user.  This shows a logical path of the potential actions one can take to define a Hyperspace. A re-evaluation of the existing onboarding with the addition of new screens gave a structure to the new flow.

SOLUTION
a few of the final UI Screens
Snapshots of a few Final UI Screens

Due to NDA  I’m forced to stop here

You can Schedule a call with me. I will be more than happy to share with you some more information
about this project and its solutions.
meeting iconmeeting icon
card sorting design image
Visual mapping

Due to NDA  I’m forced to stop here

You can Schedule a call with me. I will be more than happy to share with you some more information
about this project and its solutions.
meeting iconmeeting icon
RESEARCH SUMMARY

Based on our research and gathered data from the user, we had a concrete understanding of how to onboard a user. Now ideating various solutions that could seamlessly integrate all required inputs was crucial for successful onboarding.

SOLUTION / IDEATION

1. Rocket Launch Concept

After going through different iterations of cards and possible interactions and discussing pros and cons of explorations we finally arrived to this one which was the most ideal one that bought us more space as well as least dev effort to implement.

SOLUTION
a few of the final UI Screens
Snapshots of a few Final UI Screens

Due to NDA  I’m forced to stop here

You can Schedule a call with me. I will be more than happy to share with you some more information
about this project and its solutions.
meeting iconmeeting icon
Rocket Launch was conceptualized keeping in mind the sense of aiming for growth/heights or outer space since
Hypersonix pertains to speed 🔥.
adding delighting ✨micro motion- like the component falls if you unselect a given input

Testing concept

A remote test was conducted for this version within cross-functional teams and the sales departments. This gave us a perspective on various users from different roles and how each of them interacted with this concept.

INSIGHTS FROM TEST
  • The abstract illustration of a rocket being launched to space does not suit multiple business proposals.
  • The sequence of this animation was only identified among our team & company, giving it no meaning to the customer.
  • The graphics were gratifying & appealing visually but does not serve any function to the user.

As designers, this was a turning point in the process. For a first-time user, the graphic might be of great appeal but becomes monotonous in the long run, with a low business value. It was important to convey the design by giving the user a feel of building something & a glimpse of what to expect.

SOLUTION / IDEATION

2. Final Design

A Selection-based reflection was thought out as the core concept. At every stage, based on the user’s input a preview of the interface was demonstrated on the right-hand side. Along the process of onboarding, it simultaneously trains the user on what to expect at the end of the process.

SOLUTION
a few of the final UI Screens
Snapshots of a few Final UI Screens

Due to NDA  I’m forced to stop here

You can Schedule a call with me. I will be more than happy to share with you some more information
about this project and its solutions.
meeting iconmeeting icon
SOLUTION
a few of the final UI Screens
Snapshots of a few Final UI Screens

Due to NDA  I’m forced to stop here

You can Schedule a call with me. I will be more than happy to share with you some more information
about this project and its solutions.
meeting iconmeeting icon
End to end final interaction flow
TAKEAWAY

Increase in Hyperspace Creation

  • We saw a growth of around 12 % increase in the overall creation of Hyperspace's per month for new onboarded users.
  • The general customer feedback was positive in terms of easing this process.

Early Feedback is Key

  • To discard the rocket launch concept was difficult since we tried to emphasize growth conceptually but did not sit well with the customer.
  • We learnt how to understand the user & think from their perspective functionally.

Preview before Upgrade

  • A new user can create up to 3 Hyperspaces for free after which, instead of limiting full access to New Hyperspaces, we give them an option to preview the newsfeed.
  • This experience minimizes loss aversion giving the user a sense of value while navigating through the product. This reinforces the user to proceed forward based on loss aversion (cognitive bias)
Here is a small Gift for making it till here. Click to Open!
a gift icon to click