DYNAMIC ENGAGEMENT

Driving success through an onboarding flow that is Engaging, Dynamic, and Effective.

GIF animation of onboarding flow
Overview

Design an experience that eliminates the need for complicated, in-product tutorials, by collecting necessary set up information and explaining core concepts through an active and dynamic onboarding experience.

My Role

UX/UI Designer

Tools
  • Pen and Paper
  • Sketch
  • Principle
  • InVision
  • Illustrator
  • Abstract
CONTEXT

HotSchedules Essentials

As Mid-Market and National organizations have become the focus for HotSchedules, how can we continue to provide a solution for the businesses in the Local space? "Essentials" provides an opportunity for users to start a "Self-service" subscription and utilize the core features of the product without paying for Implementation or Training.

Original form for Essentials Onboarding

Signing up for Essentials was a relatively straightforward process. However, the user landed on a powerful and complex platform that required a series of complicated set up steps to be completed before it could be used. This was managed through a "Set Up Panel" that provided links to WalkMe tutorials.

The Challenge

How can we improve the set up process for a first time user who has landed on a platform that requires a lot of navigation and input before it can be utilized? A business that has signed up for a Free Trial of the Essentials platform must realize the ROI quickly in order to justify investing in the solution.

The Business Goals

The success of the Essentials platform was measured by KPIs that indicated the realization of this product as a revenue generating arm of the business. Besides the MRR realized from conversions to a paid subscription after the free trial, the self-service platform acts as a vehicle to capture Pre-qualified Leads (PQLs) for the sales organization. These are measured by 2 actions:

• The user Creates and Posts a schedule.
• Another individual is added to the platform and logs on.
• A Conversion from the Free Trial to a paid subscription.

DISCOVERY

Identifying Opportunities

I conducted an extensive audit of the current experience for a first time user.

Audit of user flow for Essentials Onboarding
Audit detail for user flow Essentials Onboarding

The landing page experience for a first time user didn’t provide any guidance at all. The icon that was used as the affordance to open up the Set Up Panel isn’t recognizable as anything at all and not even consistent with any other navigational element in the entire platform.

Original Set Up Panel for Essentials Onboarding

The Set Up Panel presented the user with 3 actions required to set up the site. These were short descriptions followed by a text link to the general support site and CTA’s that launched step by step tutorials using the WalkMe tool.

Multiple links are confusing and it fails to guide the user through steps that are mutually dependent.

Even after discovering the Set Up Panel, the user would be presented with links to a series of WalkMe tooltips that were inefficient and required many steps to complete.

Walk Me tutorial Essentials Onboarding
FIRST STEPS

Initial Improvements

Throughout this project I was fortunate to have a team that was ready to embrace the foundational aspects of Agile development and the iterative design process. I worked quickly with the Product team PM, PO, Engineering, and Dev to improve a few of the UX/UI issues in the existing product outlined above. At the same time, I worked with other key stakeholders including Marketing and Finance, to begin exploring more innovative solutions.

UI Design - Landing Page: Essentials
UI Design - Landing Page: Essentials
  • I utilized iconography from our Design System that was more consistent with the rest of the platform and included a text link to help users understand where the Set Up Panel lives.
  • There was plenty of real estate to place this on the page in a more intuitive location.
  • I worked with the Developers to ensure that the Set Up Panel menu would expand automatically for first time users. It made the location of the Set Up Panel learnable while also presenting the CTA's that were integral in setting up the site.
Set Up panel detail Essentials Onboarding re-design
Set Up panel detail Essentials Onboarding re-design
  • I made improvements to the copy at the top of the Set Up Panel. When a Task row was expanded, the Welcome message is hidden and the Task rows would collapse upwards, making sure that we communicated effectively with the use while helping them focus on the task.
  • I worked with the team to make sure the behavior of expanding and collapsing Task rows was simple and more elegant. This made it possible to design a better solution than surprising the user with a WalkMe tutorial when clicking on the CTA.
  • A user could still choose to leverage the step-by-step tutorials. However, for a more tech savvy user, the Primary CTA would take them to the part of the site where the action could be accomplished. The UI for understanding where you are in navigating the site is intuitive and learnable so this was a solution that streamlined the experience and reduced the number of clicks drastically.
INNOVATION

A Light Bulb Moment

Modal Design - Jobs Set Up

The next improvement to the Essentials Set Up experience was to consider the modals a user interacts with to add Employees and configure Jobs & Schedules. Essentials users were "Self Serve" but had the same modals for these steps as the users who had gone through Training and Implementation.

The modals where a first time Essentials user would set up each part of the site used components like input fields, drop down menus, and other interactions. These were inconsistent and added complexity by including more complex data that was not actually required to get started.

More importantly, I identified the complexity of mutually dependent set up steps that require input from previous inputs that are required to effectively complete following actions. For example, configuring a “Job” requires you to select a “Default Schedule”. But if no schedules have been configured, the user is forced to exit the jobs modal and begin the user flow for configuring schedules.

With a better understanding of the Set Up Logic I began exploring other ways we might solve this problem with the PO, Dev team, and even the Marketing team.

I knew there had to be a better way to onboard a first time user to the Essentials Platform. That was it! Why don't we embed the core Set Up actions in a simple, interactive, and elegant Onboarding experience?

I worked with the team to understand the constraints of where and how we surface the Modals to capture the user input required for setting up the site. I identified the minimum requirements and stripped them of the complexity inherent in the current process.

I then set to work researching what might solve the Set Up challenges through embedding the solution in an Active Onboarding Process Flow.

RESEARCH

Discovery/Insights

I studied several Onboarding experiences across many applications, platforms, and verticals like Canva, Duolingo, and Slack. I performed Competitive Analysis and took note of the solutions that I though worked well, and where improvements could be made.

With the Business goals in mind and a healthy spirit of collaboration with the key stakeholders, I outlined a few of the things I felt should be addressed in the MVP for a brand new Onboarding experience in the Essentials Platform.

  1. Keep it Simple
  2. Focus on User Control and Freedom
  3. Provide Effective Feedback
  4. Create Delight

Motivation is driven by Accountability and this is facilitated through Communication.

Designing The Solution

To keep it simple, I reviewed my research and distilled it down to the absolute minimum input required in order to provide the data we needed to set up a site. I stripped the original modals of unnecessary fields and inputs and then focused on the Set Up steps that users could complete to begin using the product immediately and also enable them to meet the business KPI's for success of the platform.

  • Create Default Schedules
  • Create Job Codes
  • Add Users
EXPLORATION

Rapid Wireframes

I started with some quick wireframes to show what these inputs would look like. I looked for feedback primarily on the User Flow for adding multiple items, the CTA to continue to the next step, and messaging. I brought these to a medium fidelity to test my ideas using a clickable prototype.

Some things I got right:

  • It's simple. There are only 3 steps indicated by the stepper at the bottom of the screen.
  • It's effective. The user is adding the data for setting up the site before being challenged with a complex system.
  • The copy is simplified and easy to understand. It speaks the language of the user.

Some things I need to explore:

  • Although it is a different pattern, the "Add Another" button is too similar to the primary Save and Continue button.
  • The user feedback isn't as elegant as it should be here. The metadata helper text disappears after the first input and becomes inline placeholder text instead.
  • I was also lacking some elements that would give the user more agency. In order to appeal to a busy restaurant manager, it would be essential that they had control and freedom over the onboarding process.

Iteration

While I worked out solutions for some of the issues in the early prototype designs, I started to explore ways to make it more engaging and provide feedback to the user.

Essentials Onboarding high definition wireframe

I made improvements to the form through simplifying the process even more. While still allowing for the input of multiple "Schedules", I limited to total number available during the onboarding process. There will always be time to configure more details using the in product tutorials, but for now we just want the user to get set up quickly and efficiently.

I eliminated unnecessary copy. Distilling the most important messaging, the user has a clear understanding of the task while also making it clear that they have a choice to continue and Save the default setting in this step.

The pattern I used for input fields is intuitive. The Save button is active so you can continue without any input. It's also clear that you can edit and re-name the pre-filled field and add a couple more Schedules if you wish.

Effective Feedback

UX/UI Design - Onboarding Wireframe

With the improved input flow I considered solutions for user feedback and success messaging. I wanted to think outside of our current patterns and push the team to deliver a more engaging and dynamic approach to the solution.

We front-loaded some of the set up process in the onboarding experience we were building. Although this would solve the problem of dropping a first time user into a complicated platform with no data, I thought that we could still provide the user with a "view" of the system.

I designed a creative solution that would not only give the user that view into the platform itself, but also inform a visual understanding of some key elements like top level navigation and where the input would eventually surface. I would also use this simple wireframe of the platform to provide dynamic feedback.

The design would provide the same solutions for the remaining 2 required steps to setting up the site; Creating Job Codes and Adding Users.

Onboarding Flow for Creating Job Codes

Following the research and logic I described earlier, I designed a dynamic flow for the Job Code creation task. Because a mapping to a Default Schedule is required for Job creation, the user has those options that she just input in the previous step to accomplish this.

I kept it simple through imposing a limit of 3 on the number of Job Codes that could be created in the onboarding experience. The messaging was straightforward. It simply explains the ability to add more later, with straightforward language about how to do that. Combined with the visual feedback of the dynamic wireframe, we are able to accomplish all of our goals through a simple, intuitive, and effective interaction.

Onboarding Flow for Adding Users

Creating Delight

Animation is a useful tool but I believe it should be used sparingly and with purpose. We have become use to micro-animations in nearly every interaction. In most cases these can lend a product the feeling of being modern and engaging. I think the most successful use of animation is when it is used in a way that also enhances the user experience by providing real feedback to user input.

GIF animation of onboarding flow
  • I leveraged the Wireframe to provide confirmation of user input while also providing a solid visual cue as to what the system actually looks like and where that input would be surfaced.
  • I leveraged the Wireframe to provide confirmation of user input while also providing a solid visual cue as to what the system actually looks like and where that input would be surfaced.
  • I leveraged the Wireframe to provide confirmation of user input while also providing a solid visual cue as to what the system actually looks like and where that input would be surfaced.
OUTCOMES

Measuring Success

I worked closely with the developers and engineers to ensure the new approach would be implemented correctly. During this time there was opportunity to collaborate even further and make decisions based on new information or constraints.

The new Onboarding flow for the Essentials platform was shipped and released in Q3 of 2019. The success of this project could be validated within the first few months of its release.

The success of this project could be validated within the first few months of its release. Month to Month from September to October, the Self Service Essentials platform for HotSchedules saw significant growth in key areas:

  • Gross Volume - +9.5%
  • New Customers - +2.9%
  • Successful Payments - +8.9%
  • Net Volume from Sales - +10.0%
  • Average Revenue per Customer - +1.3%

If we compare the combined growth of these 2 months with just the previous month of August in 2019 we see an amazing upward trajectory overall:

  • Gross Volume - +105.2%
  • New Customers - +47.8%
  • Successful Payments - +93.6%
  • Net Volume from Sales - +104.1%
  • Average Revenue per Customer - +8.0%

A dynamic and engaging onboarding process can transform the experience from simply filling out forms into an exercise that actually sets a user up for success, from the first touch point onwards. The use of animation does not have to be superfluous, but can also act as feedback that provides delight while also providing helpful guidance for a user and highlight the intuitive and learnable aspects of a complex platform.