Lucidchart is an online diagramming platform. Anyone with internet access and a modern browser can create diagrams online and easily share them with others.

In this project, I worked in a team of four to redesign Lucidchart onboarding experience.

Team: Ashita Soni, Ya-ching Tsao, Drew Fagin, Yunyu Zhou(Me)
Role: UX Designer
Time: Sep - Dec, 2019

The Challenge

Improve THE Onboarding Experience

14,000 new users sign up and try Lucidchart each day. When new users first enter the product after registering, they land in their Document List to create their first diagram.

Lucid wants to create an onboarding experience that helps users become familiar and productive with the product in no time.

Design Process


The challenge is too broad. Researches are needed to define the problem space. We used 3 different methods to gain insights:

Heuristic Evaluation
Form Assumptions
Data Analysis
Verify Assumptions
Generate Insights
User Testings & Interviews
Verify Assumptions & Insights
Find Reasons behind insights

current onboarding doesn’t work

There is a huge amount of searches for basic diagram skills like drawing shapes, lines and inserting text right after registration. But the searches drop quickly in the first 5 weeks. That means current onboarding doesn’t function well, users have a rough start using Lucidchart.

Insight I. Users Like to Get started immediately

“I don’t like going through tutorials, I just, you know, want to get my work done.”

— Paige, Bank Analyst.

Some just want to skip the onboarding tips and get started immediately because they have a lot of work to do and they don’t know how long the tutorial would be.

While others simply think the tips are not helpful, they would rather explore by themselves.

Insight II. Users remember nothing from the tips

Most users just quickly and passively click through all the onboarding tips. They couldn't really remember the tips.

define the Design Space

onboarding tutorial

The research reveals that the biggest pain point of current onboarding is the onboarding tips. But fixing the biggest pain point doesn’t necessarily solve the problem. We shouldn't be confined by the form of the current pain point, so we try to define the right problem space by asking:

What is the goal of onboarding?
For User
learn how to use Lucidchart quickly.
For Business
Want users to become familiar and productive with the product in no time.
How to achieve the goals?

Both goals could be achieved by an onboarding tutorial! An onboarding tutorial is not onboarding tips. A better tutorial could help users learn using Lucidchart quickly, and it can achieve the business goal to make users become familiar and productive with the product in no time.

Design Principles

We came up with 3 design principles to guide the tutorial design.


Help users to learn how to use this tool to empower their work and help them better communicate their ideas.


Bring wonderful experience and positive emotion through the tutorial.

Experience, not usability

Focusing on usability at the beginning constraints creativity. So instead of fixing the usability of current onboarding tips, we think more about the whole onboarding experience.

Learn by doing

How do people learn in real life?

Tutorial in its nature is a learning experience. So we explored the real world to find out what good learning experience looks like. We asked different people to share their best learning experience. Here is what we got:

Video Game
Adobe Photoshop

Photo by Felicia Buitenwerf, Lucas Ortiz, amirali mirhashemian, tommy boudreau, Mikaela Shannon and  Caroline Attwood on Unsplash

All these positive learning experience has one thing in common: People learn them by doing them. They all put their hands on the things they learn. We asked more to understand why learning by doing makes learning experience so good:

Hands-on Experience
The best way to learn something is to get hands dirty and actually doing it. People clarify and reinforce the knowledge in their minds by externalizing them.
Tolerance for mistakes
Learning by doing creates a safe environment where people are allowed to make mistakes without being criticized. Mistakes are allowed during learning.
Doing makes learning more engaging. People learn actively, instead of just sitting there passively absorbing knowledge.
Sense of Accomplishment
As the result of learning by doing, people will accomplish something at the end of the learning. That sense of accomplishment is important because it makes people confident.

Incorporate Learn by doing into the tutorial

The current onboarding tips doesn’t include any hands-on experience. It just lets users click through the tips. The doing part happens after the learning. So we decided to incorporate the doing part into the new tutorial so that users can learn the skills by drawing a diagram.

Design Process i

tutorial FORM - GHOST

How to incorporate learn by doing into the tutorial? We need to find a form for the tutorial. Here are a few interesting design exemplars we got from the research:

youtube videos VS Ghost Cars

People watch youtube videos to learn
People race with Ghost cars to improve

Here is what we get from them:
1. Video tutorials make learning easier.
2. It is annoying to pause and switch between the tutorial and the software.
3. Both the videos and the ghost cars follow the principle of learn by doing.

ghost as the form of the tutorial

Ghost as the form of the onboarding tutorial is the best choice for the learn by doing principle. The ghost will draw a diagram and the users will follow. Also, watching the ghost to draw is the same as watching youtube videos, only better, because users don't need to pause and switch.

The Ghost Tutorial
Design Process ii

Tutorial content - 80/20 Principle

80% of the diagrams are drawn by 20% of the skills

We found that 80% of the diagrams could be drawn by 20% of the skills of Lucidchart. That’s the 80/20 Principle. We called that 20% of the skills "core skills".

cover Only core skills in the tutorial

So we only cover the core skills to make the tutorial short and to the point.

Teach only core skills in the ghost tutorial

Also at the beginning of the tutorial, we give an estimated time, 3 minutes,  so that users know the tutorial is short and would be less likely to skip it.

Give estimated time at the beginning
Design Process iiI

Tutorial outcome - A Cool Diagram

Why we need a cool diagram?

“I remember when I learned Photoshop, I saw a tutorial teaches you to put a car in the air. That was so cool. I wanted to learn how to put a car in the air so bad!”

— Jeff, Freelancer.

We want to include that kind of "put a car in the air" excitement into the tutorial, so we need to make the final outcome of tutorial cool. In that way, users will be more likely to finish the tutorial. Also after they finish, they will have a stronger sense of accomplishment.

What makes a diagram cool?

We showed different diagrams to people and asked them which one they think is cool. And we found aesthetics is the most important factor of the coolness of the a diagram.

People all want to create something beautiful.

One Simple But Beautiful Diagram

So the final outcome of the tutorial will be a aesthetic pleasing diagram. Also the tutorial should be short, hence the final diagram can't be too complicated. It would look similar to the diagram below:

An example of a simple beautiful diagram

We definitely need to make more of this kind of diagrams and test them in the future, to find out the coolest diagram.

Validate the Design

Considering the ghost concept might take a lot of resources to develop, we decide to run some tests to see if the ghost concept works.

We used the Wizard of OZ method to show the ghost tutorial to users. We used remote control to act as the ghost from other computer. Users were asked to go through both the ghost tutorial and the original onboarding tips.

The result shows the ghost tutorial is better than the original onboarding tips because:
1. Ghost tutorial is easier to follow.
2. Users say the ghost tutorial is more effective because they learn more from it.



Other Projects

Improve the shopping experience of PatPat’s mobile website.
VR Hands
Create a new interaction method for Virtual Reality.
Back to Home