Lucidchart

Data Driven Design to improve an Onboarding Experience.

Background

Providing a better template picker experience

Lucidchart is an industry-leading online diagramming platform. When users arrive on the platform, a modal with 160+ diagramming templates is shown – designed to help them make progress faster, and reveal use cases for diagramming needs. I worked on a design project with a team of three to help improve this experience of selecting templates based of survey data provided. This was a part of the coursework for Interaction Design Practices at Indiana University.

Our team’s design was selected to be submitted to Lucid Software among designs by 12 teams.

Roles

Data Driven Design,
Sketching, Personas,
Wireframes, Mockups

Client

Lucid Software

Team Members

Emmy Beltre
Hwang Poppy
Somalia Jamall
Aditya More

Understanding the problem

The users do not find enough value in the template picker and hence skip it.

The template picker is a modal that allows the user to select a template from the 186 predefined and User’s custom templates. The current interface of the modal uses categorization of these templates as a means to help the user find the right template needed. The user can filter the templates based on the criteria and then click on a template to open it as a new document.

Research

Voice of the Customer Survey

The Lucidchart team provided exit survey data from customers in a free response format. We took 42 of these free responses and sorted them into 6 categories.

Insight

Many users struggle to find templates that suit their needs

When would it be helpful in your workflow to see diagram examples?

The Lucidchart team conducted a fixed response survey pertaining specifically to the template picker.

Insight

Users need help selecting a template in the beginning of their diagram workflow.

How could we more quickly help you find the template you’re  looking for?

The Lucidchart team conducted another fixed response survey regarding the new features desired.

Insight

There’s an opportunity for improvement. Users have a good idea of what they need.

Pain Points

Through research we identified two main pain points based on data that we received :

We decided to focus on the former, since the path to a solution has lower engineering costs and affects more users based on the survey data.

Users cannot find template

Templates are not intuitive

Personas

As indicated by Lucid, we created two distinct personas in order to understand the users better and address their goals and motivations.

Age

35

Occupation

Accountant

Farah

“Inspire Me”

Farrah just moved to Seattle with her family for half a year. They moved to Seattle because her husband Philip was transferred to a new department located there. At first she was reluctant to quit her original job. But luckily she found a job in at a company in Seattle as an accountant before they moved. Now she is learning to adapt to the new job and the new living environment. 

Age

26

Occupation

PhD Student

Anthony

“I know what I want”

Anthony is on his second year of pursuing his doctorate degree in Engineering. He loves what he studies, and he is passionate about it. People around him, including his professors and colleagues, all praise him as a smart and humble person. He knows how to manage time in a very efficient manner and he learns new things quickly.

Ideation

Based on the pain points, we collectively sketched different variations of the template picker, in multiple sessions. Between every session, we eliminated ideas by introducing constraints of feasibility and consistency. Our own engineering experience combined with expert consultation helped us ground our designs to reality.

Artboard 1

An animation showing the progression of the graph along with a description

Artboard 3

Tag based filtering of the templates along with low fidelity diagrams of user’s template expectations

Artboard 5

Netflix style list of horizontally scrolling templates with bigger thumbnails

Artboard 4

A search bar that allows the user to enter an approximate name of the desired diagram

Artboard 2

Auto-completion of diagrams by in place recommendation of the next shape. This functionality depended heavily on high end technology.

Artboard 6

Minimizable footer bar for creating a new document accessible from any part of the application.

Narrowing down

Trial and Error

Eliminating our initial ideas based on the constraints of feasibility and relevance of technology, we arrived at our final design idea. At the core of this design, we enabled the user to enter a ‘trial and error’ cycle.  The user can quickly glance through templates, without opening any actual document, thus not feeling invested while being able to peek into the document.

Final Design

Search

1.

The search bar allows the user to search for a specific template by its name. Its position in the header establishes the context of an overall search and not category level search. The results will be updated with every keystroke to allow the user to quickly guess the template name

2.

The preview window can be accessed by clicking the preview button that appears when hovered over the thumbnail without being obstructive to experienced users.

Preview

3.

The preview window provides the user with a way to quickly preview all the diagrams in the search results or category selection without going back to the main screen. The expanded image of the diagram is displayed at a zoom level such that the text is clearly legible

4.

On the bottom, the user can click on any of the thumbnails and quickly switch to some other template within the current selection. This context is clearly communicated through the title of the bottom section

Leave a Reply

Your email address will not be published.