top of page
Main_2.gif
INTRODUCTION

Innovaccer Inc. is a Silicon Valley-based tech company in B2B space providing solutions to healthcare (Nurses and Doctors etc.). In June 2021 I was tasked to re-build their existing User Onboarding and user education framework. 

Team
1 Designer, 2 Technical Writers, 1 UX Writer 
Timeline
2 months
My role
I was responsible for research analysis, conceptualisation, and deployment, along with my Design Manager Anant Garg
Something to know about our system

Imagine a pizza, that pizza base is Innovaccer platform and toppings are the Products and the plate is the web browser where our Platform lives

The Challenge

Reimagining User Onboarding and Education - Establishing a new and improved set of guidelines and frameworks for onboarding and educating users.

Little to start from

Limited Guidelines and Use cases
At the time, Innovaccer had limited guidelines for Onboarding users and was designed for very few use cases.
These guidelines were made keeping in mind Technical scriptwriters who are responsible for the deployment of onboarding walkthroughs.
limited guidelines.png
These limited guidelines were not following the design system causing inconsistency in the whole platform

These fragmented onboarding methods create a poor user experience.

In June, my Design Manager and I set out to redesign the onboarding and engagement experience for our new and existing users.

How might we build a system that permits our designers to create the perfect user onboarding regardless of the product they are working on?
High level goals
My role

Me

I was responsible for research analysis, conceptualisation, and deployment, along with my Design Manager Anant Garg

June 2021 July 2021

Desired Outcome

With this project we wanted to achieve a consistent and harmonious exchange of designs within our internal stakeholders

How were these challenges translating into UX problems

The first step in creating a framework for my design team was to discover how the challenge affects our users and why our designers couldn't overcome it.

To understand current problems with onboarding, I interviewed our Subject Matter Experts, In-person trainers and analyzed user behavior through analytics.
 

Some of the problems faced by our Users
Why is our team unable to solve these problems? 

To understand why our internal challenges translate into the user's life, we sat down with our Designers and Technical Writers.

The constant back and forth of designers and Technical Writers when it comes to designing and deploying user onboarding and engagement patterns

Walkme- A bane or bone

We use Walkme as our Digital Adoption Software for onboarding. Walkme didn’t allow much custom development, meaning our Designers and Technical Writers were not on the same page regarding user experience.

  • It doesn’t support a comprehensive list of UI Patterns

  • GIFs and video support is limited

Not being able to solve this problem means a lot of users were missing on their ‘Aha’ moment and a lot of dependency on In-person training

Conceptualisation

I started brainstorming ideas and concepts that encapsulate all the opportunity spaces with the problem spaces identified.

The Solution

We designed a framework that would help designers achieve a unified and seamless user experience for new and experienced users.

The framework consists of -

Design guidelines
Pattern library
Pre-built Walkme Templates
Presenting H.E.E.D User Onboarding and Engagement

Designed for Onboarding, Assistance, Adoption, and Learning patterns. These guidelines were made keeping in mind Designers and secondary stakeholders Technical Writers.

Each letter of the framework represent the stage user is at -

Hype 🙌 - User yet to experience the product

Enable 🕹 - User first time experiencing the product

Explore🧭 - Showing new features and capabilities

Device 🔧 - Helping users to get on the right path when they are lost

Design Decisions
Persona based onboarding 👩👧👨👩‍🦲

Introduced persona-based onboarding to let users take things at their hands and pace; earlier users were forced to see all the onboarding screens, whether contextual or not.

Before & After

Earlier Users were directly dropped into the application; without understanding their contexts, they were directly shown walkthroughs whether they opted for it or not. We introduced an Onboarding modal that allows our users to see what they want to learn.

Breaking flows
Tutorial steps were limited to 6; during the research phase, we discovered that the optimal steps for users are 6; after 6 we saw an 80% drop rate.
User flow (Before & After)‍
Content Discovery and user engagement

Enhancing how new improvements and features are showcased.

Earlier, we only had a modal directing our users about the new features and bug fixes. This approach was not the best UX pattern nor fulfilled all the use cases.

We introduce three methods for Content discovery, each with its set of rules on usage and use cases.

Screenshot 2022-02-23 at 11.08.13 AM.png
Modal

Modal was relook to focus on visual cues, allowing even the glancing users to know what the new feature is all about

Defining Use cases and Scenarios

Every UI pattern was elaborated with usage, and use cases. Where to avoid and where to use it. Ensuring that the designers and developers make conscious choices.

Frame 654.png
Dos and Don'ts

Defined where the patterns break, where to use them and where not to consider them.


I also collaborated with the UX Writer and defined the breakpoints and character limit for the Onboarding patterns copy.

Under the surface

During the ideation stage, we piloted and tested various methods to showcase new features based on our use cases, and what way works best for our users and Walkme .

Pattern library

We created a pattern library on Figma; this file contains all the UI patterns and components required to create designs; these patterns can easily be replicated and follows our Design System guidelines. These Pattern libraries also served as a guide to develop templates for Walkme.

Walkme Templates

We replicate our Pattern library on Walkme; this enables our designers to communicate better with our Technical Writers responsible for deploying the User onboarding and engagement system.

This helped them achieved
  • A faster way to deploy walkthroughs and new feature announcements

  • Less customisation from their end

  • A platform to communicate better with designers

Results
  • Within a couple of months of deploying the designs guided by the framework, we noticed-

  • Drop out rates were lowered by 14%

Things that I learned

Learned to understand analytics

Learning how to make sense of data provided me insights on user behavior without actually talking to the users, which was a real moment of me in this project

How to create a well-balanced User Interface

When I started my internship my goal was to deepen my understanding of Design in organisations, during the course I realised the UI holds a very crucial place and I as a design intern should embrace it properly, lack of UI knowledge means I was missing a major skillset

Figma documentation and file management

Documenting is an essential part of work. These documents help you while researching and consolidating your insights. Reading documentation is tough when you are super busy. I tried to keep workshops to tell them about these verbally through stories. This helped my stakeholders to understand the idea better.

Would you like to know more? ✌️ 
 

Most projects showcased here are just sneak peeks into the work that went in and is not case studies. If you'd like to know more about any of them, drop me an email and we can catch up. I usually respond within a day.

 

View the full presentation here
 

bottom of page