LUCIDCHART ON-BOARDING

Web UX ; UI & Product Design 

Group 1863.png

Overview

Problem Statement

Creating an ideal onboarding experience that is concise, yet adequately informative and clear, interactive and intuitive. The goal was to make the user feel ‘at home’ within the shortest possible time

Context

A semester-long assignment in which I was tasked to create an onboarding experience that would help users become familiar and productive with the product - Lucidchart -  within the shortest time possible. I was expected to problem-frame and problem-solve simultaneously.

Role

UX Designer

Tools

Sketch, Figma, Google Docs, Slack

Duration

5 months

Team

Jaz Talley, Nikita Pinjare, Nan Jiang

How we defined On-boarding...
12\.png

Research Method Used

CLICK-THROUGH
ANALYSIS

QUANTITATIVE DATA ANALYSIS

USER INTERVIEWS & OBSERVATIONS

During my initial interactions with Lucidchart, I gathered that they wanted to make their diagramming software a tool everybody uses - not only enterprises, even students. Anyone and everyone was a potential Lucidchart user.

Group%204_edited.png

“Drag and drop is so different from the command of other diagramming software. I almost clicked on the shapes every time”

“The landing page gave me the impression that it is very enterprise oriented and not suited for small startups or individuals.”

Graduate Student

Design Studio Owner

Insights from Research

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

Features that users thought would be easier ended up feeling too ‘unnatural’.

Our Insights helped form our Design Principles...
untitled%402x-3_edited.png
Idea Generation

With the Design Principles in hand, I went into the concept-generation phase.

Group 5.png
Group%206_edited.jpg
Final Concept
  • This feature would suggest tutorials in real-time, as and when any feature/tool is being used. 

  • Current tutorials are intrusive.

  • Removes all ‘figuring out’ factors for a novice user

1

Command Suggestions

Group 1856.png

2

Add Shape

Group 1857.png

3

Edit Shape

Group 1858.png

4

Rotate Shape

Group 1859.png

5

Rotation Complete

Group 1859.png
dr1.png
Design Rationale
  1. Not obtrusive - placed in the bottom right corner.

  2. It can be disabled at any time.

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

  4. Enables faster accustomization for new users.

test.png

MVP #1 TEST DESCRIPTION

Gave users pre-made diagram to recreate.

Used post-it notes to simulate tutorial box.

A Leo team member acted as the tutorial system.

Timed how long it took users to complete diagram.

Took notes/made observations.

“I like that I can disable it anytime.”

User 1 (received aid of MVP)

MVP #1 RESULTS

FASTER COMPLETION TIMES

Users who received the MVP aid felt more confident in attempting a similar diagram than users who did not receive the aid

MORE FULFILLING FIRST DIAGRAMMING EXPERIENCE

Users who received the aid of the MVP felt more confident in being better at attempting a similar diagram than users who did not receive the aid.