Lucidchart User Onboarding Team Virgo Ajaya Pournami, Animesh - - PowerPoint PPT Presentation

Lucidchart User Onboarding

Team Virgo

Ajaya Pournami, Animesh Gupta, Oliver Greive, Payoshni Kulkarni

1

Exploration

2

Problem Scenario

3

Lucy signs up for Lucidchart, and is led through the first steps of the onboarding process.

Problem Scenario

4

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

Problem Scenario

5

She comes back to her diagram occasionally, and encounters a popup after a pre-defined period of time.

6

Problem Scenario

She feels frustrated that her diagramming process was interrupted.

?!

Problem Scenario

7

The current, time-based approach to

• nboarding doesn’t address individual

progress or user frustration

8

Interview Insights

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

• “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.”

?!

User Research

9

Methods

• Identified specific frustration

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

• nboarding process.

Process

• Users are confused due to lack
• f 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

Insight

• Interviews
• Moderated Remote Usability

Studies

• User Feedback
• Desirability Study
• A/B Testing

10

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

Ideation

11

How we define onboarding

12

Allowing user to progress and enjoy diagramming

Not constricted by time

1 2

Considerate of learning speed Users should not be restricted by time to explore the software. Doing so hinders the learning curve of the user. Different users have different needs and learning curves. The onboarding experience should be considerate of it.

Design Principles

13

Learning through exploration

1

Create value & emotional investment

2

To motivate and support

3

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 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. The user should be motivated and supported throughout the diagramming process. This will have the user be invested in the product.

14

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

15

Novice User Scenario

After 2 weeks A novice user completes several small tasks and encounters a call to action after 2 weeks of use

16

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

Achievement Badges

17

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

Steam Badges Exemplar

18

• 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.

LucidChart

19

Exemplar

• 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.

Spotify

20

Exemplar

• Clear communication helps spotify attract

users in a better way

• No time based trial
• Relies on the experience with the software

for purchases.

Exemplar Rhino

21

• 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.

22

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.

Recommendation

23

24

Mockups

Home Screen Achievement Badges Achievement Expanded Milestone Pop-up Milestone-Paywall Pop-up Diagram with watermark

25

Mockups

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. Achievement Notification Badges

26

Mockups

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. Expanded Achievement list

27

Mockups

The Milestone popup will be a user interruption which will inform the user about the tasks completed, demonstrating he is getting proficient. 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.

Milestone Pop-up Milestone Paywall Pop-up

28

Considerations

29

Viability:

• Minimal changes to the existing UI
• Engineering load of evaluating the task

List

• Accurately measuring task completion
• Scenario complexity leading up to

paywalls Feasibility:

• Balancing user satisfaction with business

constraints

• Effectiveness of watermarks as a

conversion strategy

• Risk of subtle Calls To Action translating

to lower conversion rates

User Testing Goals

30

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.

MVP

31

Aim What How

MVP

32

Aim

Uninterrupted diagramming process motivates the user to pay Currently the main interruptions are dies to pop

• ups. By controlling the pop ups the user

frustration can be reduced.

MVP

33

What

The achievement list, pop ups created for mocks For the MVP we used the mocks created for showing our concept. Using which we plan to test

• ur concept

MVP

34

How

Using screen software and our free account 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

MVP Testing

35 Remote device Host device Participant Observer A team member acting as the algorithm for the Task List Task List in the form of an excel sheet Screen Sharing for pop-up control

Testing Takeaways

36

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

Our Takeaways

37

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.

Pournami’s Takeaways

38

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.

Animesh’s Takeaways

39

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

• utput.

Payoshni’s Takeaways

40

• 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

Oliver’s Takeaways

41

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

Appendix

42

User Stories

43

Appendix 01

User stories

For the user stories we drew from the diverse professional experience in our team. This gives us clarity and understanding of user problems Architect Journalist Developer Lucid charts help me to visually represent designs to clients and manage projects effectively. Lucid charts enabled me to design the structural workflow

• f articles that helped in training

new journalists. Lucid charts can aid us in deconstructing complex systems to give our management and design teams insights about development process.

44

User Mapping

45

Link to the diagram: https://drive.google.com/open?id=11M916m8d0Rrm0IgErDFLZWwv_rOymGE3

46

User Stories

47

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.

Our Onboarding Experience

48

Appendix 02

Our Onboarding Experience

Large number of templates might

• verwhelm the user,

when the user just wants to use a blank 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. User gets locked out from adding shapes when the object count limit is at maximum. It becomes a problem in the case of using a templates. 49

OUR ONBOARDING PAIN POINTS

50

Ambiguous writing, unclear expectations No BACK button Fast transitions Difficulty entering text within objects Confusion managing text with other elements No status of

• nboarding progress

Insights from onboarding experience

51

Research Methodology & Questions

52

Appendix 03

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

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

Why we followed this methodology?

Research Findings

60

Appendix 04

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

Analysis of Data

63

Appendix 05

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

The highlighted portions of the graph show that when users upgrade in usage levels there is better retention.

Quantitative Data

66

67

Insights from Data Analysis

Our Journey

68

Appendix 06

69

Our Design Rationale

70

Our Design Journey

Initial Reiterated

71

Interview Methodologies Group activity Reverse thinking

What We Did Differently

• The first methodology

focused on emotional experiences and expressions.

• The second focused on

user tasks to understand usability problems.

• Dedicating time to play with

the software every week to gain newer insights

• Reiterating the user stories

as we progressed

• Solutions were explored

during discussions which went tangential

• We worked backwards

(and arranged our slides accordingly) to understand the crux of the problem we are solving.

72

• “Loyal user bases generate

more collaborators and creators.”

• “Premium users don’t find

value in the product due to a lack of tools.”

• Making the learning curve

“less steep” will lead to easier

• nboarding
• Making tools more usable will

make onboarding more digestible

Where We Went Wrong

Dead End Analyses

• Competitive analysis
• SWOT analysis
• Combined user-stories

and user-journeys

• User mapping (we tried

to specify a target audience)

Incorrect Hypotheses

73

It's difficult to understand user experience problems with usability problems arising first

What We’ve Learned

Many questions we asked felt like they led participants down a certain line of thought It became difficult to understand the user experience by asking ’how do you feel using this tool’ as it made participants feel uncomfortable

1

74

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

Appendix 07

75 Free users get interrupted by paywalls when they add more that 60 objects

Problem illustration

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

76

Problem illustration

Youtube tutorial shown is 20

• bjects which is

never communicated to the user. When 60

• bjects are

added to the canvas free users are not able to access the shape toolbar. The elements responsible for

• bject count not mentioned

ex: the youtube tutorial

77

Reason for Inclusion

Not able to communicate about premium features

Free user is taken back to the paywall and unable to diagram No clear communication

• n which

templates are premium When adding extra shapes reached the limit

• f 60 objects and

stopped from diagraming For free users templates with more than 60

• bjects can be

loaded onto the canvas.

2

78

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.

Appendix 08

79

The icons highlighted are not easily noticeable especially the feature find Though the overflow menu looks similar to microsoft the options provided are not. Most of the tab is similar to microsoft office while the highlighted options are not similar and are too close to these

• ptions confusing the users

80

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

• ption

81

Reason for Inclusion

Users are confused because

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

82 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.

Design Exemplars: Contextual Tools

3

83

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. Appendix 09

84

Reason for Inclusion

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

From the quantitative data

85 The 44th Anniversary

• f 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 and efficient manner.

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

Design Exemplar: Interactive Tutorials

The hovering effect used in Photoshop acts as a “revision” for novice users

86

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

Introduction

87

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

Process

Personas

88

Appendix 10

89

Daffy Duck

Needs

• Brainstorm gift ideas for his nephew
• He needs Lucidchart to address

accessibility and usability concerns Influencing Factors:

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

Daffy Duck, 82 years old, Uncle Obstacles

• His feathery hands make it difficult to use a

mouse and keyboard

• His lateral lisp makes voice interactions

more difficult Image source: cartoonbucket.com

90

Samantha

Needs

• Visualize the long and short-term

strategy for her business

• She needs Lucidchart to be easy to

learn in as little time as possible Influencing Factors:

• Highly driven personality
• Family time constraints
• High desire for efficiency and value

Samantha, 39 years old, Entrepreneur, Mother Obstacles

• She has many demands on her time and energy
• She has a low tolerance for ambiguity, and is

willing to shop around until she finds the right tool Image source: mostvaluablenetwork.com

91

Robert

Needs, Obstacles Design Factors that influence behaviour such as demographic Robert, 27 years old, Musician Influencing Factors:

• Larger-than-life personality
• No manager
• Lack of money

Needs

• Visualize his band’s tour requirements:

supplies, venues, hotels, schedule

• Share the plan with band mates

Obstacles

• He has very little structure and needs guidance
• He can only use the free version until he

becomes famous Image source: clipartkid.com

What-If ‘Lucidchart’ was....

92

Appendix 11

93

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

• f 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 )

94

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.

95

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

96

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.

Concepts

97

Appendix 12

98

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)

Concept 1

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

100

Concept 2

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

102

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.

103

Concept 3 - Make Lucidcharts like paint

Exemplar of the idea

* The large empty canvas gives the user confidence that he can do anything he wants. Simple layout and toolbar helps users to understand the options available.

104

What's the idea? The idea came from redesigning lucidcharts for smart cities. we thought of diagramming to illustrate the map

• f 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

Concept 4 - Nested Diagramming

105 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.

Concept 4 - Nested Diagramming

UI Feature

106

Appendix 13

107

UI Feature