Lucidchart Onboarding

Redesigning Lucidchart’s onboarding using real-time tutorials

Web-Service Design

Role

Duration

Team

UX Designer
UX Researcher

Aug 2019 (3 months)

Nikita Pinjare
Jaz Talley
Nan Jiang
Vignesh Kannan

Opportunity
New users find Lucidchart challenging and making their first experience overwhelming
Due to its steep learning curve, Lucidchart challenged us out to make users onboarding and learning easier.
Lucidchart is an online diagramming tool with 14,000 new users signing up each day.
How might we ease and empower new users during onboarding?
Solution
Through research we found that Lucidchart has an extensive set of tools. New users were unfamiliar with these tools and the current learning experience was not effective.
To familiarize them with these tools quickly, we proposed real-time tutorials that provides tips based on user's current activity.
Tutorials based on current diagramming activity
A modal window appears with a list of tips based on the current tool being used by a user.
GIF based tutorials to encourage learning by doing
Selecting of a particular tip leads to GIF based tutorial to show how to use the tool. This helps in learn the tool while using it.
Process
We used double diamond
Our team went through several converging and diverging throughout our process. As we did so, we challenged ourselves to think both about the user goals and the business goals.
Research
To explore our design space, we started with research.
Lucidchart provided us with quantitative data to narrow down the scope of the problem. Additionally, we observed both new and seasoned users while they diagrammed. This helped us explore various painpoints during onboarding.

Assumptions

To form initial hypothesis

Quantitative Analysis

To validate our assumptions and form new hypothesis

Interviews

To observe new and seasoned users using Lucidchart

Research Insights
Through NPS (Net Promoter Score) data and interviewing a mix of 6 new and seasoned users, we found a 3 key insights.
1. Users have trouble getting started making Lucidchart stressful and hindered creativity
"I really wanted to draw this nice shape, but I can't figure it out. Are we done?"
-Student (New User)
According to data, users used 'feature find' feature for the first 5 weeks suggesting they had trouble getting started. Additionally, during our interviews, we found 3 users abandoned their first diagram. They had trouble searching and using tools making it frustrating to diagram.
2. Users tend to skip the tutorial because it hinders the diagramming experience
Lucidchart provides a modal tutorial during their onboarding which cannot be accessed again. 6 out 8 of our users skipped these tutorials. They thought these were either a hindrance or could be figured out later while diagramming.
"Let's skip this. I can figure it out later."
-Engineer (New User)
"I just want to diagram already. I have used softwares like this. Should be easy."
-Student (Seasoned User)
3. Users have trouble with basic tools long after getting started
According to data, users utilized feature find tool 3-6 months after getting started to search basic tools and function. This suggests users have trouble using basic diagraming tools.
4. Progress in learning increases user retention
The graph below shows that users who made progress while learning retained with Lucidchart. This shows that learning the tool and increasing familiarity is an important success metric from business perspective.
To make onboarding a learning-supportive environment.
Through our research insights, we narrowed down our problem space to the learning process of user’s onboarding. To understand this further, we honed in on painpoints specific to this space
Narrowing Problem Space
Painpoints
Through our research, we found painpoints specific to the learning process during onboarding.
1. Interruptive tips
Frequency of verbal contribution often leads to someone taking credit of someone else’s work.
2. Limited tips that are displayed once
Interviews with managers revealed when conversation is hijacked by only a few participants, it decreases team motivation
How might we make a need-based long-term learning supportive onboarding experience?
Product Goals
Using our insights and painpoints, we were able to distill down to these design principles to guide us.
1
2
Learnability
Enable an easy learning curve irrespective of a user's experience level
3
Discoverability
Empowering the user to learn by doing
Efficiency
Reduce the amount of time to complete a task uninterrupted
Ideation
We didn't let feasibility and viability constrain us. We challenged ourselves to think about new user types, markets, and devices
To think creatively and beyond the existing system, we conducted a series of 'what if' exercises.
To pick one idea, we took a step back to review and balance user and business goals.
Among all concepts we finally landed on real time tutorials.
Design Rationale
  • Showing relevant tips only when user active the tool
  • Playing tutorial video automatically without interrupting user’s flow
  • User can review the tips as many times as they want
  • Increases familiarity as user diagrams
Testing
We tested the concept using a Minimum Viable Prototype (MVP)

Sticky notes worked as the modal window, and a team member acted as the prompting system. Participants were requires to recreate a premade diagram using basic tools. A control group drew it with the original tutorial and the others drew it with real-time tutorial.
User Feedback
The real-time tutorial did help users perform better
Less time
Users took 36s lesser time on average to complete the diagram
Thought more creatively
Users with tutorials, drew after the premade diagram as they enjoyed it
Made fewer errors
They made fewer errors trying to find tools and using them
Low fidelity wireframes and testing
We found that users found it intuitive to use however, would like to minimize it or disable it when needed.
Following our test, we built a low fidelity wireframe and tested it.
Final Design
After validating our design, we built a cleaner UI and made changes according to user feedback.
Tutorials based on current diagramming activity
A modal window appears with a list of tips based on the current tool being used by a user. While the user is not using any tools, the modal recommends tutorials based on common searches.
GIF based tutorials on select to encourage learning by doing
As a user selects a tutorial, a gif play to show the functionality of the tool. This visual way is more intuitive than reading thus allowing the user to diagram uninterrupted.
Disable when required
Once the user is well acquainted with the tools, they can disable it. The user has the option to enable it while encountering a new tool.
Reflection

© Designed with ❤️ by Nikita Pinjare

Let's get in touch! 👋

If you’d like to connect, just give me a shout!