LUCIDCHART ON-BOARDING

Web UX ; UI & Product Design 

Overview

Problem Statement

Creating an onboarding experience so that it is clear and concise but very informative, interactive, and intuitive. The goal is to make the user very comfortable with the product within the shortest time possible.

Context

A semester-long assignment in which I had to create an onboarding experience that helps users become familiar and productive with the product - Lucidchart -  in no time. I also had to learn 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...

Research Method Used

CLICK-THROUGH
ANALYSIS

QUANTITATIVE DATA ANALYSIS

USER INTERVIEWS & OBSERVATIONS

"From 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 is a potential Lucidchart user."

“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...
Idea Generation

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

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

  • Current tutorials are intrusive.

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

1

Command Suggestions

2

Add Shape

3

Edit Shape

4

Rotate Shape

5

Rotation Complete

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 aid of the Minimum Viable Prototype while completing the assigned task as part of the test finished considerably faster than the users who received no 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.

  • Instagram
  • LinkedIn

©2020 by Vignesh Kannan.