Lucidchart

User Onboarding

Team Virgo
Ajaya Pournami, Animesh Gupta, Oliver Greive, Payoshni Kulkarni 1
Exploration

2
Problem Scenario

Lucy signs up for Lucidchart, and is led through the first

steps of the onboarding process.

3
Problem Scenario

She clicks through the tutorials, and creates her first diagram.

4
Problem Scenario

She comes back to her diagram occasionally, and encounters a

popup after a pre-defined period of time.

5
Problem Scenario

?!

She feels frustrated that her diagramming process was interrupted.

6
Problem Scenario

The current, time-based approach to

onboarding doesn’t address individual
progress or user frustration

7
Interview Insights
?!
● “These paywall pop-ups are very annoying and
they are don’t allow me to explore the
interface”
● “It feels like all they want me to do is pay.”
● “I’m not sure why this pop-up came up, I just
wanted to add a new shape to the template.”

During our interviews we recognized that people are getting frustrated with the same issue.

8
User Research

Methods Process Insight

● Interviews ● Identified specific frustration

● Moderated Remote Usability
Studies
● User Feedback
● Desirability Study
● A/B Testing
points during the diagramming
process
● Differentiated between
usability and user experience
pain points
● Explored why untimely
pop-ups, lack of clear
communication in the
freemium model interrupts the
onboarding process.
● Users are confused due to lack
of clear communication of
premium features.
● Poor timing of pop-ups in an
unmotivating language might
be the primary source of user
frustration
● Monetary details expected
even before the diagram is
finished aggravates the
frustration

9
 HYPOTHESIS:

After synthesis of our data we speculate that users are more willing to pay for premium features if they can
successfully complete their diagramming process without being interrupted by the paywall

10
Ideation

11
How we define onboarding

Allowing user to progress and enjoy diagramming

1 2

Not constricted by time Considerate of learning speed

Users should not be restricted by Different users have different needs

time to explore the software. Doing and learning curves. The onboarding
so hinders the learning curve of the experience should be considerate of
user. it.

12
Design Principles
1 3
Learning through
exploration
We feel that a task based metric
instead of a time based metric
would provide enough time to get
familiar with the interface
irrespective of their background
and experience
2
Create value & emotional
investment
If the user is allowed to have an
uninterrupted diagramming
process, she will find value in the
product and therefore be
emotionally invested in the
product.
To motivate and support
The user should be motivated
and supported throughout the
diagramming process. This will
have the user be invested in the
product.
13
Task List Visualization

Tasks are assigned a level of complexity

Task complexity is represented by size in

this visualization

The user will encounter a call to action

when the rectangle fills up to 60%

COMPLETE

14
Novice User Scenario

After 2 weeks

A novice user completes several small tasks and

encounters a call to action after 2 weeks of use

15
Expert User Scenario
After 1 week

An expert user completes a few complex tasks

and encounters a call to action after 1 week of use

16
Achievement Badges

Our user research suggests that if users are externally motivated during their diagramming process there is a better chance of
successful onboarding. The achievement list will act as external motivation to finish the diagram

Yes! I can
effectively use
Lucidchart for
tomorrow’s
presentation

17
Exemplar

Steam Badges

● The Steam Badges acts like a motivator for

exploring the software.
● The user gets a sense of achievement for
exploring the software
● It shows the user what proficiency level the
user is at.

18
Exemplar

LucidChart

● The Analytical team at lucid assign a point to

each activity as a measure of success.
● Taking this as a basis we can design the task
based evaluation for user levels and events
to track.

19
Exemplar

Spotify

● Clear communication helps spotify attract

users in a better way
● No time based trial
● Relies on the experience with the software
for purchases.

20
Exemplar

Rhino

● Rhino allows the user to explore the

software even after the trial period is over
thus helping the user gain proficiency
before they pay for it.
● The way the limit the user is by not allowing
the user to save his work.

21
How does gamification work with task based approach

● Gamification can be thought of as a train

which helps pulls users to achieve tasks
and eventually guide them towards
proficiency.

● The user can choose to work at his own

speed and follow an unguided path to
achieve proficiency.

● Since the end goal of the onboarding is to

achieve proficiency. The system will keep
evaluating the users regardless of their
path. Once they achieve proficiency, the
software will prompt the user to pay.

22
Recommendation

23
Mockups

Home Screen Achievement Badges Achievement Expanded

Milestone Pop-up Milestone-Paywall Pop-up Diagram with watermark

24
Mockups

Achievement Notification Badges

The user will be updated on how the
system is evaluating his proficiency in a
non-obtrusive way through achievement
badges.
The user can expand this section and see
his current proficiency.

25
Mockups

Expanded Achievement list

The expanded achievement will
display the tasks user has completed.
The user will have an option to learn
new skills if he clicks on an unfinished
task. The user will then be taken to a
sandbox environment to learn them.

26
Mockups

Milestone Pop-up
The Milestone popup will be a user
interruption which will inform the
user about the tasks completed,
demonstrating he is getting proficient.

Milestone Paywall
Pop-up
The milestone will transition
into a prompt for user to
upgrade to premium tier.
The popup will also provide the
user the option to continue
diagramming but with a
watermark.

27
28
Considerations

Viability: Feasibility:

● Minimal changes to the existing UI ● Balancing user satisfaction with business

● Engineering load of evaluating the task
List
● Accurately measuring task completion
● Scenario complexity leading up to
paywalls
constraints
● Effectiveness of watermarks as a
conversion strategy
● Risk of subtle Calls To Action translating
to lower conversion rates

29
User Testing Goals

To understand if diagramming without interruption will motivate the user to pay by:

To find out if a task based approach motivates the user

To observe if user frustration is reduced with our model

If users gain better proficiency of the software with our model.

30
MVP

Aim What How

31
MVP

Uninterrupted diagramming process

motivates the user to pay
Aim
Currently the main interruptions are dies to pop
ups. By controlling the pop ups the user
frustration can be reduced.

32
MVP

The achievement list, pop ups created for mocks

What
For the MVP we used the mocks created for
showing our concept. Using which we plan to test
our concept

33
MVP

Using screen software and our free account

How
We will be recreating Lucidchart environment
using our free accounts and screen sharing
software, team viewer. We will be controlling the
interruptions based on the task list

34
MVP Testing

Screen Sharing
for pop-up
control

Remote device Host device

Participant Observer A team member acting as Task List in the form of an

the algorithm for the excel sheet
Task List

35
Testing Takeaways

Through our testing phase, we discovered:

The time constraints of testing made it difficult to fully simulate time-based onboarding

Participants did not engage with the achievement list panel

Participants tended to repeat tasks, suggesting the need for a comprehensive scoring system

36
Our Takeaways

What we learned:

- The importance of reframing the question: there are many definitions of ‘onboarding’
- There’s no clear process when it comes to exploring a design space.
- The importance of user story to humanise the problem and to be able to relate to it.
- Finding subjects to test our design with was harder than we thought.
- Conducting interviews too was a learning process as we sometimes asked leading questions.

37
Pournami’s Takeaways

What we learned:

- Understanding the chaos of the design process.

- The importance of team dynamics and its role in progression of the design. As an individual when i
reflect back, it would not have been possible to conceptualize and create the project we have.
- Having come from a design background the process we followed was different in many ways. As an
architect the focus has been mostly on the aesthetic, flow and form.
- In the process we went through i liked how the ideas were founded on the basis of previous inferences.
At each stage of the process there was a concrete foundation to the idea.
- I would have liked to use the slack channel more to ask more questions, i do feel as a cohort we didn't
use the opportunity to be mentored in the process.

38
Animesh’s Takeaways

What I learned:

- The problem frame of onboarding that we redefined helped us understand the importance of doing
problem framing in a proper manner
- We realized that different team members have different perspective and that having a coherent
understanding of the process needs to be really important when it comes to having a functional group.
- Resolving team conflicts was one of the major learnings that I had with this project.
- Jumping in with solution first approach is not the best method to explore a design prompt, sometimes
we had to take a step back and relook at how we define the problem frame so that we get a better
output.

39
Payoshni’s Takeaways

- There are varied types of qualitative data, and not all the qualitative data is relevant.
- Choosing data that is important and relevant to the design process and to discard the other
- Design principles are not definite and meaningfully iterated
- A good design is an amalgam of varied constructive ideas, however not all ideas are productive or
feasible

40
Oliver’s Takeaways

Throughout this project, I’ve learned:

- Deduction will only get you so far – logic is helpful in certain scenarios, but adopting a
collaborative, playful, and open-ended mindset will deliver more interesting results

- Design is highly collaborative, so effective communication is a design skill in itself

- Fast-paced, cheap solutions are more helpful in the long run than drawn-out concepts

41
Appendix

42
 Appendix 01

User Stories

43

For the user stories we drew from the diverse professional experience in our team. This gives us clarity and
Architect
Lucid charts help me to
visually represent designs
to clients and manage
projects effectively.
User stories
understanding of user problems
Developer
Lucid charts can aid us in
deconstructing complex systems
to give our management and
design teams insights about
development process.
Journalist
Lucid charts enabled me to
design the structural workflow
of articles that helped in training
new journalists.
44
User Mapping

45
User Stories

46
Link to the diagram: https://drive.google.com/open?id=11M916m8d0Rrm0IgErDFLZWwv_rOymGE3
User Stories - What we did wrong

● Misunderstood user motivation as problem

● The problems illustrated were not simple, due to which
there was no clear line of thought.
● The stories don’t correlate to our hypothesis well.

47
 Appendix 02

Our Onboarding
Experience

48
Our Onboarding Experience

User gets locked out

from adding shapes
Large number of when the object count
templates might limit is at maximum. It
overwhelm the user, becomes a problem in
when the user just the case of using a
wants to use a blank templates.
statement.

Trial users get interrupted by

paywalls which cause them to not
convert into paid users.

The search function and the feature find function does not behave according to user intentions, as the functions of both these
buttons seems to be similar at first. The feature find’s location is not easily visible.

49
OUR ONBOARDING PAIN POINTS
Confusion managing text
with other elements
No status of Ambiguous writing,
onboarding progress unclear expectations

Fast transitions
Difficulty entering text
No BACK button
within objects
50
Insights from onboarding experience

51
 Appendix 03

Research Methodology
& Questions

52
Research Methods

53
Sample Interview Script

1. What do you mainly use Lucidchart for?

2. What other software do you use ? What do you like about them?
3. Can you tell us what you like about this software?
4. What feature did you find most helpful in your task?
5. What has been your best diagramming experience till now?
6. What was a frustrating moment in this experience? How would you want to do
it ideally?
7. Did you have a problem with lines, circles ? (and other pain-points from the data
given by Lucid)’
8. Do you work in a team environment? In what capacity do you contribute to
diagramming in a team?
54
Task-based interview

● Diagram the venn diagram of common interests between you and your friends and your family
○ Understanding shape manipulation, template use and how people use lines, borders, and colors
to differentiate shapes
● Diagram a flow chart of how would you turn on a computer
○ Understand the use of lines and shapes, if the use of flowchart shapes is clear
○ If the user can manipulate the diagram elements easily
● Create a new account and diagram a simple mind-map
○ Understand the onboarding experience of the user
○ Understand how efficiently can a novice user diagram
● Make an entity relation diagram for a website
○ Understand how a intermediate user uses an interface to diagram a complex entity relationship
diagram

55
Why we followed this methodology?

Onboarding (SEE) / Have the participant think out loud while going through the onboarding process
● What are your first impressions of this website?
● Was anything frustrating or confusing?
● What are your first impressions of this website?(after onboarding process)
● What did you encounter during onboarding?
● What caught your attention during onboarding? Was anything frustrating or confusing?
● Do you read the comment on the loading page

Why did we do this?

To get an idea about the relationships/metaphors the user forms while interacting with the software

56
Why we followed this methodology?

Usability (DO)

Go to task-based questions below about mind map

Anything else the user wanted to play with

Why did we do this?

To comprehend the user’s process, view his frustration and sense why is he frustrated even while doing the most basic things
like drawing shapes, arrows, etc.

57
Why we followed this methodology?

Reflection (Feel)

How regularly do you see yourself using this product? (for a week, month, semester etc.) why?
Do you see yourself using LucidChart to collaborate on projects like you would with Google Docs or a similar tool?

Why did we do this?

To see if the user liked the software, if he would come back, if the overall experience was good, and why was it good?
To understand if the user’s process has changed across time and other constraints.
Why is not onboarding process engaging enough?

58
 Why we followed this methodology?
Information Architecture (THINK)
● Can you access the tools you needed to make your diagram?
● Let me watch what you would do to find help or tutorial information.
● Do you think the tools in the sidebar are organized well for what you want to do?
● Do any elements or icons not make sense on the toolbar?

Why did we do this?

To understand how the user interacts with icons, is he able to bring prior knowledge of diagramming to the software. Is he able
to understand what the icons mean in one go or he takes time to get used to the
shapes, arrows and is he able to ascertain basic usability of the icons? One of the goals was also to understand if the user
accesses the help option.

59
 Appendix 04

Research Findings

60
Quotes from the interviews

“I skipped tutorials because I like learning on the go and the tutorial bored me”

“I identify as a software engineer and a ux designer” (When the interface asked to choose who the user is,
“teacher, student, etc)

“These paywall pop-ups are very annoying and they are hiding the interface”

“Since it knows I am making a Venn diagram, it should help me”

“It’s like a power-point but nicer”

“I don’t want to use all of it’s features, but I'm okay getting what they are providing in the free tier”

“Assuming I knew what I was diagramming, I would use a blank document”

61
General Findings

● Accessibility for colorblind users is a new consideration

● Most people use blank templates when they already have a mental model of what they want to
diagram
● It is rare that people read pop-ups when they have a task to perform
● Some Engineers we interviewed like the Lucidchart’s interface.
● Users find it comfortable because of its similarity to microsoft office.
● When non popular products like Venn diagram, equations, etc are selected understanding the basic
tool set like arrows, shapes, process-related shapes is an issue.

62
 Appendix 05

Analysis of Data

63
NPS Data

Promoters

Passive

Detrators

We categorized the NPS data to understand the plus and pain points of users. This was done
searching keywords in the data.

64
Quantitative Data

● Areas highlighted in orange show that

basic tool set (shapes, lines & text ) are hard
to learn.
● The same problems (shapes, lines & text)
persist even after 3-6 months of usage.

65
Quantitative Data

The highlighted portions of the

graph show that when users
upgrade in usage levels there is
better retention.

66
Insights from Data Analysis

67
 Appendix 06

Our Journey

68
Our Design Rationale

69
Our Design Journey

Initial

Reiterated

70
What We Did Differently

Interview
Group activity Reverse thinking
Methodologies

- The first methodology - Dedicating time to play with - Solutions were explored
focused on emotional the software every week to during discussions which
experiences and gain newer insights went tangential
expressions. - Reiterating the user stories - We worked backwards
- The second focused on as we progressed (and arranged our slides
user tasks to understand
accordingly) to
usability problems.
understand the crux of the
problem we are solving.

71
Where We Went Wrong

Incorrect
Dead End Analyses Hypotheses

- Competitive analysis - “Loyal user bases generate

- SWOT analysis more collaborators and
- Combined user-stories creators.”
and user-journeys - “Premium users don’t find
- User mapping (we tried value in the product due to a
to specify a target lack of tools.”
audience) - Making the learning curve
“less steep” will lead to easier
onboarding
- Making tools more usable will
make onboarding more
digestible
72
What We’ve Learned
It's difficult to understand user
experience problems with
usability problems arising first
It became difficult to understand
the user experience by asking
’how do you feel using this tool’ as
it made participants feel
uncomfortable
Many questions we asked felt
like they led participants down
a certain line of thought
73
 Appendix 07

HYPOTHESIS:

After synthesis of our data we inferred that users are more willing to pay for premium features if they can
successfully complete their diagramming process without being interrupted by the paywall

74
Problem illustration

‘I’m not sure why this pop-up came up, I just wanted to
add a new shape to the template’

Free users get interrupted by paywalls when

they add more that 60 objects

75
 Problem illustration

The elements responsible for

object count not mentioned
ex: the youtube tutorial

When 60
objects are
added to the Youtube tutorial
canvas free shown is 20
users are not objects which is
able to access never
the shape communicated
toolbar. to the user.

76
Reason for Inclusion

Not able to communicate about premium features

When adding For free users

Free user is No clear
extra shapes templates with
taken back to the communication
reached the limit more than 60
paywall and on which
of 60 objects and objects can be
unable to templates are
stopped from loaded onto the
diagram premium
diagraming canvas.

77
 Appendix 08

HYPOTHESIS:

Users expectation of intuitiveness is based on previous interactions with softwares. Lucidchart should try
to understand this and cater to it by creating its tool more contextual to it.

78
 The icons highlighted
are not easily
noticeable especially
the feature find

Most of the tab is similar to

Though the overflow microsoft office while the
menu looks similar to highlighted options are not
microsoft the options similar and are too close to these
provided are not. options confusing the users

79
 I expected the overflow menu to work exactly like
microsoft office, no wonder I couldn’t find the arrange
option

80
Reason for Inclusion

Users are confused because

Look and feel of The interface is Making tools

the interface is bloated with too more contextual
similar to many options will help reduce
microsoft and tools not the effort to
powerpoint behaving in teach tools and
similar manner features

81
Design Exemplars: Contextual Tools

A kitchen table serves multiple

purposes: meals, work, etc.. The
elements needed for each
activity are introduced
contextually, with the blank
tabletop staying the same. We
noted the benefits of
context-specific tools

We then thought about how

context-sensitive, intelligent user
interface tools such as Microsoft
Office Assistant (Clippy) can help,
teach, and potentially annoy users.

82
 Appendix 09

HYPOTHESIS:

We believe new users will be retained if the they can successfully achieve
diagramming by learning the tools faster and efficiently with the help of interactive
learning.

83
Reason for Inclusion

From the quantitative data

Users have
trouble learning Users continue Problems with
basic tool set like to have issues basic tool set
shape, lines, with help and persist even
adding colour. feature find after 3-6 months

84
Design Exemplar: Interactive Tutorials

The 44th Anniversary

of the Birth of Hip
Hop google doodle is
a great example of
how you can teach a
user how to use the
interface in a quick
The hovering effect
and efficient manner.
used in Photoshop
acts as a “revision” for
novice users

Link : https://www.google.com/doodles/44th-anniversary-of-the-birth-of-hip-hop 85
Introduction

The following concepts are detached from the hypotheses and

user stories outlined above

We performed these exercises assuming that usability was not a concern,

in order to explore higher-level user experience concerns

86
Process

Personas - We created several “edge case” personas to outline extreme examples

“What if…” - We brainstormed ways that Lucidchart could be redesigned for

future-facing, unconventional situations

Concepts - Each of us brought together points from the above activities to create
novel design concepts

87
 Appendix 10

Personas

88
 Daffy Duck

Influencing Factors:

- Short-tempered personality
- Accessibility concerns (manual, voice)
- Familiarity with technology

Daffy Duck, 82 years old, Uncle

Needs Obstacles

- Brainstorm gift ideas for his nephew - His feathery hands make it difficult to use a
- He needs Lucidchart to address mouse and keyboard
accessibility and usability concerns - His lateral lisp makes voice interactions
more difficult

89
Image source: cartoonbucket.com
Samantha

Influencing Factors:

- Highly driven personality

- Family time constraints
- High desire for efficiency and value

Samantha, 39 years old, Entrepreneur, Mother

Needs Obstacles

- Visualize the long and short-term - She has many demands on her time and energy
strategy for her business - She has a low tolerance for ambiguity, and is
- She needs Lucidchart to be easy to willing to shop around until she finds the right tool
learn in as little time as possible

90
Image source: mostvaluablenetwork.com
 Robert

Influencing Factors:

- Factors
Larger-than-life
that influence
personality
behaviour such as
- No managerdemographic
- Lack of money

Robert, 27 years old, Musician

Needs Obstacles

- Visualize his band’s tour requirements: - He has

Needs, Obstacles very little structure and needs guidance
Design
supplies, venues, hotels, schedule - He can only use the free version until he
- Share the plan with band mates becomes famous

91
Image source: clipartkid.com
 Appendix 11

What-If ‘Lucidchart’ was....

92
Redesigned for Smart Cities
Display charts in public
places to build community,
share history, show
schedules
Illustrate mail routes, repair
schedules for citizens
Show personal mind maps on
shared display surfaces,
show your status, schedule,
mood
Google maps and Lucidchart
partner and make a diagram
of the city highlighting areas
where riots are happening
An AI interface embedded in
Lucidchart and Google maps
that predicts the user’s day
and moods and gives
suggestions to visit coffee
shops,bars etc through a
mood board or mindmap
Google Maps
Creating a route specific to
the user and their
understanding.
Illustrating routes in the
form of diagrams.
This will be helpful in places
where in the routes are
complicated
Nested view of the city.
Where you can move
between different layers of
detailed view
Pipeline connectors to show
flow of data(Diagramming
with spatial and temporal
component )
93
Redesigned for Smart Cities

Takeaways and Insights

- Lucidchart can pan into a wide range of audience and that audience can want to diagram anything. For
eg, right now there are no templates for environmentalists, doctors, nurses, smart city planners,
lawyers etc.

94
Redesigned for Video Games
Diagramming personal
gaming history, to share
in-game progress like
rankings and achievement
Make associations and build
comfort for younger user
base
Having a “mario” like game
for teams before they begin
to collaborate on high
priority projects to inspire
trust among the team and
reduce stress
A theme based usage of
Lucidchart. For eg, if the user
selects ‘Harry Potter theme’
he will get everything except
the essential tools in that
theme and he will be more
engaged
To have a tutorial of a game
in Lucidchart.
To create cheat sheets with
Lucidcharts.
To use Lucidchart as a game.
A fun ending screen which
gives a sense of
accomplishment and
satisfaction
Just in time tutorials like
Monster Hunter
Gamification of tutorials
Mapping shortcuts to a
radial wheel for easy access
Diagramming to make levels
for video games
95
Redesigned for Video Games

● Understanding games through diagramming.

● Looking at lucid charts to help create a game
● If Lucidchart can have achievement medals or such symbolism to inspire users to finish their
diagrams then users will feel a sense of accomplishment.
● If there is game format of going through a tutorial rather than a simple video, the user will be more
engaged in the learning process which lead to a better diagramming process which will lead to the
user feeling more confident in himself.

96
 Appendix 12

Concepts

97
Concept 1

Public Display Mind Map

- Ambient, public data visualization

- Can display a person’s schedule,
mood, activities
- Can set status to do not disturb
- Projected on public surfaces
(smart walls)

98
Concept 1 Design Principles

Ambient as opposed to interactive visualizations

Sharing timelines, schedules and personal details in social situations

Changes to interactivity status bridging non-verbal (visual) communication gaps

99
Concept 2

100
Concept 2 Design Principles
What is the concept?
A lot of people are visual thinkers and comprehend information better when it is portrayed visually.

Often people are confused if they are thinking in the correct way about the information they consumed.

Hence, if people are able to just load information into Lucidchart’s newly updated AI interface which will then diagram
intuitively for the user. The user will be satisfied, and would feel confident about his thinking because of Lucidchart.

101
Concept 3 - Make Lucidcharts like paint

What's the idea?

The idea is what if Lucidcharts was more like MS Paint. We are exploring the possibility of Lucidcharts
imbibing features of MS Paint as a possible next step in its evolution.

Why?
Lucidchart could be more than a data visualization platform.
The idea was to broaden the user base to kids and help them learn diagramming.
The idea also helps users not feel intimidated with the software by letting them use it in a context other than
data visualization.

102
Concept 3 - Make Lucidcharts like paint
Simple layout and toolbar
Exemplar of the idea helps users to understand
the options available.

* The large empty canvas

gives the user confidence
that he can do anything he
wants.

103
Concept 4 - Nested Diagramming

What's the idea?

The idea came from redesigning lucidcharts for smart cities. we thought of diagramming to illustrate the map
of the cities to show different levels of details. We believe this idea can be implemented in Lucidcharts for
diagramming complex ideas.

Why?

Easy to show high-level ideas and detailed view at the same time
Helps you show map the progress made so far in terms of research about a topic
Helps communicate complex ideas which would otherwise require multiple graphs and diagram to get the
point across

104
Concept 4 - Nested Diagramming

The charts could be made interactive wherein detailed view can be

nested within a high level view. This nested view can be expand
upon when clicked on the high-level view which contains it.

105
 Appendix 13

UI Feature

106
UI Feature

107