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
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.
The challenge is too broad. Researches are needed to define the problem space. We used 3 different methods to gain insights:
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.
“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.
Most users just quickly and passively click through all the onboarding tips. They couldn't really remember the tips.
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:
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.
We came up with 3 design principles to guide the tutorial design.
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:
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:
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.
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:
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 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.
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".
So we only cover the core skills to make the tutorial short and to the point.
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.
“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.
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.
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:
We definitely need to make more of this kind of diagrams and test them in the future, to find out the coolest diagram.
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.