
Lucidchart Onboarding
Making online diagramming
less intimidating for new users
Overview
Background
Lucidchart is a browser-based digital diagramming tool.
Lucidchart helps users communicate visually. If not practiced, communicating using diagrams can be an intimidating task. Lucidchart wants to design an onboarding experience that helps users become comfortable with their first experience with the product. Onboarding is the first step towards customer engagement and retention, and hence important to the business.
We learned that
Diagrams are essentially visualizations of ideas, using text, shapes and flows.
When a user starts creating a diagram, a lot of time is wasted in unnecessary labour like finding shapes, adjusting them, connecting with lines, and so on. This interrupts a user’s ideation process and annoys them.
Proposed Solution
Project Details
Sponsor
Lucidchart.
One of Top 2 teams to receive special recommendation from Lucidchart
Role
UX designer, Research Lead.
I took the lead to conduct more interviews/ contextual inquiries, have more clarity in our process, along with taking initiative to talk to software engineers about implementation.
Team
JeenaReem
Mary
Riya
Timeline
Sep 2019 - Nov 2019
(a semester)
Process
Research
Interviews
Contextual Inquiries
Competitive Analysis
Synthesis
Affinity diagramming
Personas
Concept
Wireframing
User Testing
Prototyping
Iterations
Evaluation & Strategy
User Feedback
SCRUM based MVP launch plan
Research
Exploration
As the design brief was open-ended, we decided to do a general exploration of the space of digital diagramming tools. We felt it was necessary to analyze tools apart from Lucidchart as well to get a holistic idea.
-
We learnt that the tools have similar UI elements, like a big canvas in the center, with the tools on the side or top.
-
Templates were a standard and consistent feature across the tools. It helped us understand the kind of diagrams that are generally made by different users. We also noted how most diagrams have a flow in the form of shapes and its connectors


Lucidchart
Visio
Looking at the kind of diagrams, we noted 3 potential user categories: Students, Professional, Casual.
We believed that each of these users’ diagramming contexts would lead to reveal needs and pain points in depth. This also helped us to recruit appropriate candidates for interviews and contextual enquiries.
Draw.io

Gliffy
Interviews
We brainstormed on what diagramming means and includes. Going beyond just the scope of digital tools, we asked ourselves what the most primitive form of diagramming was: The answer was good old pen and paper. By juxtapositioning these 2 different medium, we aimed to explore and deep dive into the diagramming process.

Interview Outline
We interviewed 4 students (Informatics, design, business), 2 professionals and 2 casual users. The interviews were over 30-45 minutes each and conducted in a semi-structured manner to let their stories and experiences flow naturally. Hence, the setting was also kept casual and informal (in their room or living room).
Post interviewing, I took the initiative to also perform contextual inquiry with 3 of the interviewees. All 3 had regular diagramming experience but hadn’t used Lucidchart. Their main task was to signup and create a typical diagram on Lucidchart and think-aloud as they perform the tasks (e.g. ‘now I am trying to find a shape’, ‘I am confused about this option’). I observed and took notes and also screen recorded the whole process. Afterwards, I asked them follow-up questions to understand some specific actions or feelings.
We performed an affinity mapping of all the data we had gathered from our primary research, to narrow down our major insights.
Major Insights
1
People use diagramming to visualize and generate ideas. They also use it to understand or explain complex information to others.
“I like visualizing whenever I have to think logically.”
“[Diagramming] makes it easier to comprehend what I’m presenting because I’m conveying the data to the audience using workflows.”
“It is easier and quicker to explain a concept to someone else this way.”
2
People see pen and paper as a comforting medium for quick and rough visualization.
“I use pen and paper when I need my ideas there instantly."
“I use these physical media to get a rough idea, as it doesn’t have to be presented anywhere”
“I like that it is raw, doesn't have to look perfect and it's fun.”
3
Compared to pen and paper, digital tools can become stressful as they induce a sense of perfectionism.
“Digital tools give me a perfection pressure. I start focusing on aligning, moving the shapes around instead of completing my visualization.”
4
Digital tools have the benefit of being aesthetically consistent and professional. But they can become time consuming as the user needs to do manual work like finding, dragging and dropping shapes, connecting them and so on. Combined with availability of too many customization options at once, this hinders their ideation process.
“[Digital tools] normally take longer. I have to know/learn where to drag and drop and connect properly. ”
“I want to quickly put out ideas, but I see extra [customization] options so my focus is going there. I would have used Adobe Illustrator if I wanted so much choice" (while using Lucidchart)
Personas
We also created personas to better empathize with our diverse set of users and stay mindful of their diagramming environment before beginning the ideation phase.

Concept
From our insights, we knew there was a higher cognitive load in digital diagramming vs. Pen and paper. This led us to propose the following what-if:
What if users didn’t have to worry about shapes and lines at all?
How could we enable users to focus on their ideas first?
Wireframes
We had a design idea to let users type out their thoughts first, without any kind of interruption. The words would then get converted into an appropriate flow diagram, by clicking a ‘create’ button. Building up on the idea, I developed a quick wireframe to demonstrate the idea to Lucidchart.

Some exemplars which inspired our design were:
-
Dual screen while coding a website
-
Notetaking using bullets

User Testing
We used ‘Wizard of Oz’ testing with participants to simulate the idea. We used Microsoft Word to simulate the text editor, and Lucid’s existing interface as the diagram maker for our dual screen.
Participants were asked to think of a scenario where they needed to make a simple flow diagram, and then type it out in an indented list in Word.
One of our teammates would create a diagram on Lucid on a separate laptop. They would be shown the diagram in the end.

Client input : Lucidchart liked our idea and found it interesting. If the users spend less time worrying about diagram structures, or trying to find features, they can utilize that saved time elsewhere effectively.
They also gave us a new requirement to see how this idea could be implemented on a small scale, i.e. without changing the UI too much for current users.
Final Design
From our user testing and Client input, we were able to gather sufficient feedback to iterate and improve our design.

The new feature is integrated into Lucidchart’s original UI in a non-interruptive way
Incorporated feedback: The client wanted to see the feature’s implementation on a smaller scale
User starts typing their idea.
An automatic shape appears and the text is reflected inside at the same time.
Incorporated feedback: During testing, participants wanted to see the diagram being made live as they typed, instead of seeing it after typing their full idea out.
_gif.gif)
_gif.gif)
By pressing “enter”, a new shape is created.
On pressing “tab”, it becomes nested with the shape above it, and gets automatically connected.
Instead of a bullet, users can see a small representation of their shape on the left panel.
When selected, it will be highlighted on both canvas and left panel.
Incorporated feedback: During testing, participants were confused by the bullet points in the left panel. They needed a visual indication to make the connection between panel and canvas.


The idea also works when a template is selected, and for different kind of diagrams.
Incorporated feedback: We wanted to include a way in which this design also works for cases where user doesn’t start with a blank canvas or wants to make a non-flowy diagram.
Implementation
I took the initiative to talk to 2-3 software engineers to understand how our design could be implemented and what the potential timeline would be. As these engineers were not from Lucidchart, we assumed a team of 2-3 engineers would be available to work on this feature. Adopting the SCRUM methodology, we proposed the following timeline:

Reflections
As the design prompt was open-ended, during our first exploration of Lucidchart and its competition, we focused majorly on usability issues. We learnt to look beyond usability and understand how we could design an 'experience'. Not clear about which direction we could take, we decided to go back to the basic roots of diagramming : pen and paper and take inspiration from the user experience that it entails.
Mid-way during the project we were introduced to a new client requirement : To not hinder the existing UI by much and have the concept implemented on small-scale change. It was an interesting twist to scale down our idea and design a non-intrusive addition. In moments of confusion, I took a step back and looked at our major insights as our design anchor.
In my past professional experience, I had collaborated with multiple stakeholders to arrive at solutions. In this project, I learnt how to advocate for design clarity by taking the lead among other designers at each stage and taking initiatives to understand the challenge on a deeper level as a team.