Overview

Template Picker is a UX design project for Lucidchart, an online diagramming platform, focused on improving the template selection experience.

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

Challenge

Users were struggling to find the right templates quickly, leading to frustration and decreased productivity.

Constraint

• Don’t change the diagram categories
• Only use Lucid’s design components to design a solution

Research Data

Lucid have run surveys and collected data from different sources. In this project, we want to analyze the below data they provided:

• Voice of Customer (Payment Cancel Survey, Header Cancel Survey)
• Template Survey
• Prior A/B Tests

Design Process

1. Competitive Analysis: Reviewed competitors' template selection interfaces to identify best practices and areas for improvement.
2. Data Analysis: Analyzed user feedback and survey data to understand pain points and user needs.
3. Key Assumptions & Insights: Identified key assumptions and insights from the data analysis to inform design decisions.
4. Problem & Sketches: Defined the problem statement and created sketches of potential solutions.
5. Final Mockups: Developed high-fidelity mockups of the new template picker design.

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.

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.

Conclusions Made

	As a starting point	As a guide
	Users use a template as a starting point and manipulate the template directly.	Users look off of a template as a guide while building their own template.

Key Assumptions & Insights

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.

Problem Space

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.

Final Mockups

1st Design: Lefthand Navigation Pane

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.

What I learned from this project

1. Working on real-world design problems, we listen, think, and present what we get.
2. Generating insights and defining a problem space from a reliable and huge amount of data.
3. Keeping iterating again and again in order to get the specific design.
4. Post-mortem meeting is a good way to not only increase morale but see our blind spots clearly.