top of page

Lucidchart Onboarding

TEAM LEO: Jaz Talley, Nikita Pinjare, Nan Jiang, & Vignesh Kannan

ROLE: Researcher & Designer

DURATION: 3 Months

TOOLS: Figma, Google Slides, & Adobe Illustrator

METHODS: Click-through Analysis, Quantitative Data Analysis, Interviews, Personas, User Journeys, Ideation Generation, & Minimum Viable Prototyping

Challenge

To understand the needs and expectations of users coming into Lucidchart and design an experience that helps them with their first experience using the product.

Onboarding

​

On-boarding for us begins when the user enters the Lucidchart landing page via an external route (Facebook Ad or text message). It ends when they make their first deliverable diagram. We aimed to make their onboarding experience:

Click-through Analysis

​

  1. The UI from the landing page to the document page is inconsistent and feels overcrowded.​

  2. Initial confusion between Feature Find Search and Shape Search.​

  3. Initially, there isn't enough shapes and importing new ones are confusing.

Research Takeaways 

Our Insights helped form our Design Principles.

Design Process

Research

Quantitative Data Analysis

​

  1. Basic tools like editing and adding shapes remains confusing after 1-3 months.​

  2. Users with previous experience continued using the product - indicates product works for ‘familiar’ user.​

  3. The higher level the users reach, the higher their retention rate would be.

Interviews

​

  1. Users feel like Lucidchart is enterprise oriented.​

  2. Users completely ignored the “knowledge center” and skipped the tutorial no matter their technical background.​

  3. Users felt that ‘basic’ tools/features weren’t intuitive enough.

Defining Users

After conducting research on Lucidchart's users, we separated and categorized its' users into 2 general categories while onboarding the website; knows diagramming and doesn't know diagramming.

 

We then created a scale to measure and place the user’s based off their external diagramming background experiences because some users previously used other softwares to create diagrams.

Personas

Based off of our user research, we created 5 personas to reflect their technical backgrounds and their ultimate goal behind using Lucidchart.

User Journeys

We categorized our personas as either Creators, Collaborators, or Consumers based off their primary roles while using  Lucidchart (we understand these roles aren’t completely distinct and they may overlap). We follow the journeys of the Creator, Collaborator and the Consumer right from the ideation stage up to completion. 

We also defined the Creator to report to the Collaborator & the Consumer. The Collaborator reports to the Consumer.

Ideation Generation

​

We wanted to think outside he box and have more creative ideas. Therefore, we started thinking "What if Lucidchart collaborated with..." to visualize different design opportunities.

  1. This feature would suggest tutorials real-time when any feature/tool  is being used.

  2. Current tutorials are intrusive.

  3. Makes the ‘figuring out’ factor almost cease to exist for a novice user.

Real-Time Tutorial Suggestions

Final Concept​

How does this help onboarding?

​

  1. Enables faster customization for new users.

  2. Not obtrusive - placed in the bottom right corner.

  3. Helps in idea generation since it shows all possible ‘next steps’.

  4. Can be disabled any time.

Feedback

The most significant feedback we received included:

​

  1. There are concerns on the 3D map due to upholding maintenance.

  2. There are concerns on how the application would react to unavailable items.

  3. It would be interesting to incorporate audio so people don't always have to refer to their phone.

  4. There are concerns on the security and privacy settings of the shopping cart due to them being accessible to everybody.

  5. Will it be possible to generate the quickest route and navigate through the least crowded areas?

  6. It'll be interesting on how detailed you are able to get when picturing items for customers.

We tested our MVP on 4 individuals; 2 with the tutorial & 2 without the tutorial.

Minimum Viable Prototype

​

Once we agreed on a final concept, we decided to create a minimum viable prototype by placing sticky notes to the bottom left portion on a computer screen.

Prototype

MVP Results

Process

  1. FIGMA - Create clickable tutorial prototype (include gifs) on Figma.

  2. SMART PHONE - Export to cellular device and place phone on bottom right corner of laptop.

  3. COMPUTER - Have users click through tutorial on cellular device when help is needed.

Voiced

​

“Like that I can disable it anytime.”

 

“This is a good idea for new people with less experience”

Design Strategy

​

Timeline

​

0-1 Month: Future MVP                                 2-6 Months: A/B Testing                              > 6 Months: Final Launch

​

Success Metrics

​

User Feedback & Ratings                    Number of diagrams created in first month                   User Level growth over time.

QUICK LEARNING

INTERACTIVE

INFORMATIVE

INTUITIVE

RESEARCH

INSIGHTS

PROTOTYPING

IDEATE

  1. Click-through Analysis

  2. Quantitative Data Analysis

  3. Interviews

  1. Design Principles

  1. Minimum Viable Prototypes

  2. Design Strategy

  1. Personas

  2. User Journeys

  3. Ideation Generation

Enterprise focused

Users first impression of Lucidchart was that it is heavily focused on enterprise customers.

Skipped tutorials

During the interview, we observed 4 out of 6 users skip the tutorial. 

‘Basic features’ not intuitive

Basic tools like editing and adding shapes remains confusing after 1-3 months.

Inclusive

Supportive

Discoverable

Design Principles

Insights

Design Principles

IDEATE

High-Tech Background

Low-Tech Background

Micheal | 29 yrs. Old

Senior Position at Modern Company

​

Wants to access Lucidchart for their collaboration features and start as a free individual user.

Jackie | 47 yrs. Old

Owner of Piping Company

​

Wants to decide on whether or not he wants to adopt Lucidchart for his company and will begin as a Premium user.

Tito | 22 yrs. Old

Student

​

Wants to create a visually pleasing stakeholder diagram that will get him a good grade and will start with a free edu account.

Marlon | 27 yrs. Old

Employee at SAAS Start-Up

​

Wants to create a free individual account to judge Lucidchart based on how easy and intuitive it is and  begin as an individual user.

Jermaine | 48 yrs. Old

New Senior Position

​

Wants to get comfortable with the company workflow ASAP and will begin as an enterprise user.

1.  Command Suggestion

2.  Selecting Tutorial

3.  Controlling Shapes

4.  Selecting Tutorial on Shapes

5.  Controlling Lines

6.  Selecting Tutorial on Lines

Future MVP

​

We planned to create another MVP utilizing Figma, a smartphone, and a personal computer.

Viewed

​

Kept forgetting to drag and drop.

 

Would forget to use tutorial.

“How do I rotate this thing?”

 

“These arrows aren’t working with me.”

 

“This is hard Jaz.”

Trouble/confusion using lines.

 

Couldn’t find fill color.

 

Wasn’t sure how to add text with different tools.

Tutorial

No Tutorial

bottom of page