Template Picker

A 2-week group project to redesign the Template Picker of Lucidchart

Team

Davis Chen, Libby Gress, Ryan Leibering

ROLE

Competitive Analysis, Insight Generation, Mockup


What did I learn from this project

  • Working on real-world design problems, we listen, think, and present what we get.

  • Generating insights and defining a problem space from a reliable and huge amount of data.

  • Keeping iterating again and again in order to get the specific design.

  • Post-mortem meeting is a good way to not only increase morale but see our blind spots clearly.


Lucidchart Template Picker (2017/11)

Lucidchart Template Picker (2017/11)

Background

Lucidchart is an online diagramming platform. The Template Picker allows users to start a new diagramming by choosing one of the templates from its library.

In this group project, we are asked to redesign a new Template Picker experiences for Lucidchart users. (2017/11)

 

OUR PROCESS

1. Competitive Analysis

At the beginning of this project, we did a competitive analysis. It led us to the insight that Lucidchart overall gave more guidance than competitors in their chart-making experience, but seemed to have the same amount of guidance as their competitors in the template picker itself.


2. Data Analysis

Lucidchart's research team provided a template survey collected from different workflows / information sources in of their product. While analyzing the survey, we categorized customer complaints into three broader sections of issues.

It tells us...

41.3% say they use the diagram as a starting point, keeping and editing the shapes.

40.4% say they never use example templates, only blank templates.

15.3% say they look at the diagram as a reference, and then delete shapes and make their own.


3. Conclusions Made

If users use the templates, they do so in two main ways:

1. as a starting point

2. as a guide


4. Problem Space

From analysis, we got our problem space:

How can we rethink the navigation and guidance within the template picker to design for users?

and two key issues:

1. Provide further visual info and guidance for users.

2. Offer a navigational shortcut for users.

 

FINAL MOCKUPS

1st: Lefthand Navigation Pane

For our prototype, we decided to move the navigation pane from the righthand side to the lefthand side. Our competitive analysis shows that a lefthand navigation pane seems to be an industry standard among template pickers. And through a more casual analysis of desktop applications, lefthand navigation panes also seemed to be the standard as well.

2nd: Search Bar

Based on our research, we wanted to re-introduce the search bar to provide a navigational shortcut for users.