LUCIDCHART ON-BOARDING
Web UX ; UI & Product Design
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...
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.
“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.
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
2
Add Shape
3
Edit Shape
4
Rotate Shape
5
Rotation Complete
Design Rationale
Not obtrusive - placed in the bottom right corner.
It can be disabled at any time.
It helps in idea generation since it shows all possible ‘next steps’.
Enables faster accustomization for new users.
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.
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.