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.
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.
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.
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 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.
I conducted an extensive audit of the current experience for a first time user.
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.
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.
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.
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.
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.
Motivation is driven by Accountability and this is facilitated through Communication.
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.
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:
Some things I need to explore:
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.
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.
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.
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.
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.
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:
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:
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.