Lucidchart

Improving software onboarding experience by making diagramming easier and efficient.

Challenge

Lucidchart is a diagramming software, 14,000 new users sign up and try Lucidchart each day. Irrespective of users’ technical proficiency or familiarity with diagramming tools, when a user comes into the product they want to be able to get started immediately. Lucidchart wants to create an onboarding experience that helps users become familiar and productive with the product in no time.

Course

Interaction Design Practice

Team

Ashita Soni
Drew Fagin
Ya-ching Tsao
Yunyu Zhou

Sponsor

Lucidchart

Duration

3 months

At a glance

What we found?
4 out of 6 participants use pen and paper for idea generation, which they later rendered on Lucidchart.
What this means?
Lucidchart is not helping a significant portion of users ideate.
Our design
By eliminating the need to 'drag and drop shapes', people can focus on the diagram and ideate.
View Design

How might we help users become familiar and productive with the web-based diagramming platform?

Research

In order to improve the diagramming experience, we wanted to understand the diagramming habits, working style, collaboration habits, product expectations, and the problems the software currently offers. 

A survey was sent out for interested participants that alsoinquired basic information about the users. Following graph represents the willing participants. Out of these, people participated in user interview and usability test.

User base
link to interview script

Synthesis

These user interviews revealed a lot of information for future action, but it was an overwhelming amount of information to process collectively. Thus, we used affinity maps to synthesize research information.

1. Most participants used pen and paper to draw rough diagrams, because it is easier and faster.

“I prefer pen and paper because it’s easier to generate ideas…”
-Graduate Student
“I would generally sketch out ideas on paper and pass them to my subordinates.”
-Software Engineer
“I once tried using Lucidchart directly to draw the diagram without having a raw framework, but it just took more time and was harder”
-Student

2. People diagram to gain clarity and communicate ideas.

“Generally, whenever there was a bug that needed fixing, or a new feature that had to be added, the team would make diagrams to share them with the Manager and tell him what we are planning to do and how.”
-Software Engineer

3. Teams working on projects are more likely to use visualization platforms as Lucidchart.

“My team would get together in the cafeteria and discuss and come up with a basic structure for our project’s diagrams and later one of us would digitalize that diagram using Lucidchart”
-Student

4. Diagramming is a group effort.

“My boss would usually make a very raw outline of the diagram he wants and it was my job to refine it and make a detailed version of the diagram. After this, I would share the diagram to my boss which would pass through multiple people who would review it and in the end, I had to make the final revisions to the diagram.”
-Investment Banker

Target Users

3 personas emerged through research, we focused on 2 personas of those as primary focus groups which had similar diagramming habits and pain-points.

Value Propositions

Empowerment

      Help users think clearly on software and communicate their ideas.

Efficiency

Help users diagram effectively and productively.

Design Principles

Delightful experience
The targeted users coming to the software are usually the ones who diagram due to a project requirement and thus don't necessarily enjoy it.
Afford the ease to think on software
To help people ideate on the software, it should offer an experience that facilitates thinking.
Reduce software usage complexity
To help users concentrate on the diagram’s structure and its elements

How might we help new users ideate on Lucidchart so that they can communicate their ideas within a team effectively? 

Initial Concept

Following softwares were used as design exemplars to curate a design solution to facilitate ideation.

XMind
Miro
MindMap

In order to help users think clearly on software, the concept was based on two hypotheses.

Restricting input to keyboard
We hypothesized that by the use of keyboard shortcuts to add and modify elements in the diagram, users can focus more on the structure and elements of the diagram.

Cleaner UI
We hypothesized that a cleaner canvas and UI would also facilitate user’s thinking and thus aid ideation.

Iteration #1- MVP Test

An MVP testing on 3 participants revealed following results and updations on the design.

1.

Result:

Eliminating the need to switch between keyboard and mouse enables users to focus on their diagram.
“I didn’t have to worry about dragging and dropping the shapes on MindMap.”
-Grad Student
Updation:
Keep the idea of keyboard shortcuts.

2.

Result:

A cleaner canvas didn’t really affect their thinking.
"Uhm I didn’t really care that much about the canvas. I don’t think it influenced my thought process."
-Grad student
Updation:
Scrape off cleaner UI idea, and thus a separate ideation mode.

Mid Fidelity Prototypes

After the MVP test, following are some of the mid-fidelity prototypes that were developed.

Iteration #2

After the first iteration, the first wireframes were tested on 2 participants..

1.

Observation:

The  basic menu to select shape works better.
“The circular menu to change shape is cute and fun but frustrating and is counter-productive.”
- Student
Updation:
The shape menu was altered to remain a simple box menu showing the keys corresponding to each shape.

2.

Observation:

It is unclear if a shape is added or changed.
“I didn’t know that this would change the current shape or add a new one.”
-Masters student
Updation:
The affordance of changing the current shape was communicated better.

Final Design

Through multiple rounds of design testing and iteration, the final design was generated.

The design eliminates the need to switch between mouse and keyboard, and dragging and dropping, to help new users think effectively on software. The ease of diagramming would not only affect new users first experience with the software. But also would extend to existing users.

The user is provided with keyboard shortcuts to add and modify elements in the diagram. This reduces the cognitive overload of using the software and helps focus on thinking about the diagram.

Userflow
Prototype

Next steps

Due to the lack of control over the software and usage data, we could not perform the following tests. The following two designs represent the trade off between ease of use and the extent of control offered to the user.

1.  If offered to change shape along with the affordance to add text, users will have more control over the diagram. However, this could result in increased complexity of use.

2.  If the menu to change shape is offered post entering text, the flow would be easier. However, users might not like this lack of control.

Retrospection

What I learned

What I'd do differently