Web UX ; UI & Product Design
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
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.
Sketch, Figma, Google Docs, Slack
Jaz Talley, Nikita Pinjare, Nan Jiang
How we defined On-boarding...
Research Method Used
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.”
Design Studio Owner
Insights from Research
Users first impression of Lucidchart was that it is heavily focused on enterprise customers.
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...
With the Design Principles in hand, I went into the concept-generation phase.
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
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.
“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.