Lucidchart
Onboarding
Overview
Context: A UX research/design project to redesign onboarding experience for Lucidchart users. The project was sponsored by Lucid and was a part of the graduate coursework.
Team: Chien-ChunWu, Jinchuan Zhanghe, Kamala Payyapilly Thiruvenkatanathan, Shikhar Mangla
Duration: 3 Months (September 2019 - December 2019)
Process: Research, Synthesis, Ideation, Prototyping
Design Tools: Adobe XD, Adobe Illustrator, Figma, Adobe After Effects
My Role: As the Team facilitator, I led the team throughout the design process. I was also the Lead User researcher as well as responsible for visualization and documentation of the process. Having said that, every member of the team had equal involvement in each phase of the project.
The Problem
Lucidchart is an online diagramming tool with a user base of over 4 million. Users of Lucidchart range from beginner/novice to expert users based on their technical proficiency and experience with diagramming. Irrespective of their skill level, Lucid aims to make the process of diagramming as comfortable as possible for its users, thereby helping them communicate visually. With 14,000 new users signing up each day, the design challenge is to understand the needs and expectations of new users and design an experience that enhances onboarding thereby allowing users to familiarize themselves with the product and start diagramming immediately.
Onboarding in our terms, is a continuous, recurring process i.e., every time the user learns to use Lucidchart and learns diagramming, onboarding occurs.
The problem is that the current diagramming experience assumes that users already know to communicate visually. In other words, the current design does not consider the needs of a novice user, who is new to diagramming.
The Solution
Shapes being the fundamental component of a diagram, the proposed solution is to ensure that usage and search for shapes is made easy even for a novice user.
In the Current design,
1) The “shapes panel” shows the exact shape name along with the shape when a user hovers over a shape.
2) The “shape search” text box expects user to enter the exact name of the shape that the user is looking for.
In the Proposed design,
1) The “shapes panel” shows a GIF of the shape usage along with the shape name, when the user hovers over a shape.
2) The user can search for shape either using its exact name or using a common example that the user would use the shape for.
The Process
The Double Diamond Process
Research
Research methods overview
Quantitative synthesis of data shared by Lucid, gathered from Lucidchart users.
Survey/Questionnaire for competitive analysis, gathered from Non-Lucidchart users.
User Interview to understand how user's view Lucidchart.
Contextual Inquiry to gather a user's first click-through experience of Lucidchart.
User Categories & Research Synthesis
Lucid categorizes its users based on their technical proficiency and experience with diagramming, with basic users performing fundamental operations like create shapes and documents while power users understand features like conditional formatting and linking data to shapes.
Categories of Users in increasing order of expertise
With our definition of onboarding focusing on users who learn diagramming during their usage of Lucidchart, user research, synthesis of research data and consequently ideation primarily focused on “Basic/Novice users”.
Secondary Research
Data from Lucid involving synthesis of quantitative data as well as Net Promoter Score (NPS) and user comments, showed that:
“Shape and Shape formatting” is the most searched category during the first week of usage and is continued to be searched for, even after 50 weeks of using Lucidchart.
Survey results showed that Lucidchart faces challenges from competitors like Adobe and Microsoft Visio. Further, it was observed that people prefer diagramming tools that are familiar, easy to use and have an established brand name.
Insights from contextual inquiry showed that the interface lacks some basic features like shape customization as well as clear description of icons/menus.
Primary Research
The three primary research methods used were User interviews, survey/questionnaire and contextual inquiry. Interview was conducted with 6 participants, all users of Lucidchart. 4 of the 6 participants were basic users while the other 2 were advanced users. Interview questions mostly involved queries about participant’s purpose of using Lucidchart, features that they use regularly, challenges they face as well as their overall experience with Lucidchart. A questionnaire was circulated, particularly to non-Lucidchart users to perform competitive analysis as well as gauge needs of users in a diagramming tool. Contextual inquiry was conducted with a new Lucidchart user who is familiar with other diagramming tools, to gather the first click through experience.
Interview responses from basic users showed that they find it difficult to visualize quickly and efficiently as the tool misses some basic features.
Survey results showed that Lucidchart faces challenges from competitors like Adobe and Microsoft Visio. Further, it was observed that people prefer diagramming tools that are familiar, easy to use and have an established brand name.
Insights from contextual inquiry showed that the interface lacks some basic features like shape customization as well as clear description of icons/menus.
Key Research Insights
#1 People prefer diagramming tools that are familiar and easy to use.
“Diagramming needs to be quick and efficient and should effectively communicate my thoughts to the team (for sharing/feedback)”
#2 People expect features that allow them to visualize quickly and efficiently.
“The core value a visual communicator looks for Lucidchart, as a visual communication platform, is making their jobs easier, faster, more efficient.”
#3
From the survey, almost 60% of people use their current diagramming tool owing to its ease of use.
Finding the Pain points
From key research insights, a user persona and user flow diagram was developed to map out the pain points during the user’s journey.
User Persona
User persona developed based on research
Synthesis
Mapping pain points to opportunities
Pain Point #1
As a beginner who is new to diagramming, users are unaware of diagram types, shapes used in each of the diagram type and how to use each of them.
Opportunity #1
From Insight #1 and Pain Point #1,
Introduce features on Lucidchart that allow even a non-visual thinker and a basic user to create diagrams easily.
Pain Point #2
A user new to diagramming is unaware of the names of each shape used within a diagram type thus consuming more time looking for each of the shape.
Opportunity #2
From Insight #2 and Pain Point #2,
Simplify usage of basic diagramming components like shapes and lines, so that even a novice user finds Lucidchart as a platform for quick diagramming.
Design Principles
From research insights and user responses, we derived two major design principles that would drive our ideation process.
From insight #1, Ease of Use
Diagramming made Easy and fast to learn even for a basic user.
From insight #2, Efficient
Being able to quickly communicate user's thoughts, visually.
During our process of “Divergent thinking”, we arrived at the third design principle. Although not evident in the interview data, considering the vast diversity of audience we interviewed, we observed that the goal for Lucidchart would be to make it usable & understandable to as many people as possible. So the third design principle was #3, Accessible
Ideation
Brainstorming
Based on the opportunities and design principles, we generated several divergent concepts. The ultimate focus was to enhance the overall experience for the user and not just a feature enhancement. So we thought big!
Voice UI
This concept focuses on using speech recognition to allow users to interact with Lucidchart interface using voice and use the same to create diagrams.
Free hand Drawing
This concept focuses on providing an empty canvas, that is stylus/touch compatible, to draw anything the user wants.
Hand drawing to Diagram
This concept focuses on converting hand drawn images to digital diagrams.
Among the brainstormed ideas, the concept of Voice UI seemed to satisfy all the design principles and enhance the overall onboarding experience. As a result, we speculated:
“What if “Hey Lucid! Draw a process followed by a decision” automatically creates a flowchart with the aforementioned shapes?”
Voice UI in Lucidchart was our Vision. With VUI being the future, we wanted Lucidchart to be integrated with Voice UI. However, we hit a roadblock where we were asked to start small. But we did not want to give up on the idea of VUI. We thought this through and came to a consensus that, for VUI to make diagramming easy, a user should be a visual thinker and be able to freely interact with the interface. In other words, users should already know diagram types, shapes and flow i.e., users must be advanced.
So the first step was to turn basic users to advanced users by helping them learn diagramming. To achieve this, we had to begin with the enhancement of an existing Lucidchart feature.
From Voice UI to Shapes
Implementation
Final Concept
Shapes being the fundamental component of a diagram, the current Lucidchart experience works on the assumption that users already know shapes based on their names and usage. However, this is not true for basic users. The suggested design change is to enhance the “Shape Search” and “Shapes Panel” features.
Shape search and Shapes panel in Lucidchart
Concept Evaluation
A quick evaluation of the concept was conducted with the help of paper prototypes. We created a generic prompt (Process of waking up) and set a predefined flowchart that contains common shapes like process, terminator, delay and decision. We created paper prototypes containing examples for shapes (symbolizing GIFs). We wanted to evaluate how the usage of GIFs for shapes and enhanced shape search, affects accuracy and time taken to draw.
Concept evaluation results showed that diagram created using GIF examples was highly accurate and consumed less time (3 minutes) compared to the one created with exact shape names (5 minutes).
Based on the results from concept evaluation as well as research data and insights, we proposed the final design solution.
Final Design Solution
Proposed design change in Shapes panel
Enhancement #1
Currently, the “Shapes Panel” shows the exact shape name along with the shape when a user hovers over a shape. The proposed change is to show a GIF of the shape usage along with the shape name, when the user hovers over a shape.
Design rationale: For a novice user who is new to diagramming, the pop up showing just the name of the shape is insufficient.
Support from concept evaluation:
“It would be helpful if I had a way to see how each shape is used in a flowchart”
Proposed design change in Shape search
Enhancement #2
Currently, the “Shape Search” text box expects user to enter the exact name of the shape that the user is looking for. The suggested design change is to allow the user to search for shape either using its exact name or using a common example that the user would use the shape for.
Design rationale: The text box expects users to type the exact name of the shape, which is difficult for a novice user.
Support from concept evaluation:
“I did not know terminator was the shape used for start and end. The shape names are confusing”
What Next
For now, create a high-fidelity prototype of the concept and perform an exhaustive A/B test of the concept to validate its success. To measure if the suggested solution achieves our goal of easier and quicker diagramming, the time taken for participants to finish the task and the accuracy rate of the shape they use are two important indexes because both show the level of increase in efficiency.
In the future, aim towards the bigger picture of implementing Voice UI. To begin with, speech recognition of a universal language can be implemented followed by languages across the globe.
Reflections
#1 Aim big but start small
During the process of divergent thinking, we thought big and dreamt of fancy ideas. We eventually realized that in order to achieve the big picture, we need to take the first small step.
#2 Connect research data and design solution to a cohesive story
In the beginning of our design process, we produced impromptu ideas. Although we knew they were logical, we could never provide a valid rationale. Ultimately, we understood that the idea and data that supports the idea must be tied together, to convey the complete story.
#3 Critiques lead to better design solutions
Throughout the project, we came up with varied ideas, most of which were criticized. Although it was initially disappointing, experience taught us that critiques help us grow as a designer.