Lucidchart

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.

ROLE

I participated in varying capacities throughout the process with major contribution during research synthesis, persona and design principle curation, wireframing, and user tests.

TEAM

Drew Fagin (UX Designer)
Ya-ching Tsao (UX Designer)
Ashita Soni (UX Designer)
Yunyu Zhou (UX Designer)

SPONSORED BY

Lucidchart

DURATION

1.5 months
Sneak peek to the design

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

SO WHAT IS THE PROBLEM?

Users found it easy to get familiar with the product, but it was very hard to be productive on the platform during ideation.

66% of researched participants used pen and paper to ideate as ideation on Lucidchart wasn’t efficient.

Dragging and dropping shapes made it hard to focus on the idea and instead caused distraction.

Being a visualization platform, Lucidchart failed to support ideation and only supported creation and sharing of diagrams.

AND HOW DO WE SOLVE IT?

To aid ideation, we use keyboard shortcuts to bring focus to the act of 'thinking' and reduce distraction caused by application's usage.

Ideation platforms like XMind and MindMap provide users with keyboard shortcuts to curate the whole mind map.

Without the need to drag and drop, and switching the attention between mouse and keyboard users can concentrate on the diagram and ideation.

Facilitating diagram creation through keyboard reduces the software's usage complexity so that the user can concentrate on diagram instead of the application.

The design uses keyboard shortcuts to enter text, and add/modify shapes to help users think while diagramming

EXIT TEXT MODE

A rectangular shape exists by default, user is guided through prompt to exit text mode through the use of 'Enter' key. This prompt will only be shown the first time and will disappears as soon as the user hits Enter.

MODIFY SHAPES

Timely prompts placed over the top of current shape helps user modify the current shape without much need to look for the options. The one-time introductory prompt disappears as soon as the user changes shape.

ADD SHAPES

The user can add more shapes in the desired direction through the use of direction based keys. The one-time prompt explaining the use of this feature will disappears as soon as the user adds a shape.

DISCOVER

Empathize

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 and interested participants were interviewed for 45-60 minutes.

Link to interview script

Filtering research participants
DEFINE

Digging deep

Through multiple rounds of research synthesis, we were able to see patterns and recognize insights. The most relevant insights have been listed below.

INSIGHT #1

Participants utilized physical tools like pen and paper along with Lucidchart to ideate because ideation on the application was time taking and complex.

INSIGHT #2

Diagramming is used as a tool to gain clarity and communicate ideas.

INSIGHT #3

Teams working on projects are more likely to use visualization platform due to the collaborative nature of diagramming.

Design principles

Research synthesis and persona curation naturally paved way for formulating design principles. Before we jumped into brainstorming, designing and testing, we needed some principles that would help us stay grounded and tie our design back to the research.

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

AFFORDING THE EASE TO THINK

To help people ideate on the software, it should offer an experience that facilitates thinking.

REDUCING USAGE COMPLEXITY

To help users concentrate on the diagram’s structure and its elements, application should be frictionless and easy to use.

DESIGN

Facilitating ideation

The team conducted various rounds of brainstorming through divergent thinking and exemplar collection. This resulted in 2 hypothesis for the design concept. These hypotheses summarize what we thought would facilitate ideation.

HYPOTHESIS #1

Restricting input to keyboard eliminates the need to drag and drop shapes and helps users concentrate on the diagram's structure.

HYPOTHESIS #2

Cleaner canvas removes the visual clutter on the diagramming canvas that might act as distraction on the application.

VALIDATE

Pivot

The team tested out the above 2 hypotheses through MVP testing. The results helped us validate one hypothesis and falsify the other one. This proved to be a pivotal point in the project as we thought both of them would work, but only one of them did. Below is a summary of the results and how it influenced the design's direction.

The keyboard shortcuts did work and proved to be aiding ideation as the users didn't have to drag and drop shapes. Instead, they could focus on the diagram's structure.

Cleaner canvas didn't really affect people's thought process much as they were not really concerned with the visuals of the application during ideation.

KEPT THE KEYBOARD SHORTCUTS

Hypothesis 1 validated!

SCRAPED OFF CLEANER CANVAS

Failed to validate hypothesis 2.

DESIGN

Realizing the design

We explored various possibilities on how the user could diagram through keyboard and what interface elements would facilitate this flow. Below are some variations that were experimented and tested.

Exploring design variations
VALIDATE

Which one works?

All the above variations were tested through another round of user tests and critique. Following are the observations gathered in this round of testing and how it affected the design.

Observation:

The circular menu to select shape is counter-productive and time consuming.

Iteration:

The shape menu was altered to remain a simple box menu.

Observation:

Lack of clarity concerning the addition or changing of shape.

Iteration:

Rephrasing the call to action.

FINAL DESIGN

Voila!

After 2 rounds of user testing, we were able to reach a final design. The proposed design facilitates ideation through the use of keyboard shortcuts. The user is guided through the use of introductory prompts when they're introduced to the design. The video below is a brief walkthrough of what ideating with this design would look like.

The design uses keyboard shortcuts to enter text, and add/modify shapes to help users think while diagramming
NEXT STEPS

It's a matter of trade-off

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

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

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

  • It is important that we keep our designs cheap and dirty. Test them iteratively and develop further on the basis of the results of design.

  • Disagreements and conflicts are very common but they can get toxic while working in teams. It is helpful to discontinue the meeting and come back in the next meeting with a fresh mind to discuss matters again.

What I'd do differently

  • We spent a lot of time synthesizing research data  and I think we could have saved some time if we had switched to designing earlier. I think the key is to switch to design once you realize that you have some meaningful key insights to move forward.