Picker

A micro-project to redesign a template picker experience for online diagramming

CONTEXT  
Graduate Course Teamwork

SPONSORED BY
         Lucidchart

ROLE
UX Designer

TIMELINE
2 weeks (Oct. 2017-Nov.2017)

 TEAM
Manas Singh
Jiaqi Zhuo
Hope Kerkhoff

CONTRIBUTION
User data analysis 
Ideation
Prototyping
User testing

What I learned?
(check more reflection in my design blog)

1) Thinking big while doing small: given the time and resource constraints in a business setting, it's important to narrow down the problem space based on research.

2) Design thoroughly: design is in every detail. we should give every detail solid rationale.

3) Connecting the dots: it's almost inevitable to have conflicting voices in real user data. One way to deal with this is to put valuable small ideas together into an overall design picture.

4) Actively communicate with stakeholders and always have the backup plan in case one idea gets killed halfway.

Challenge

How can we help to improve the experience of the template picker for Lucidchart users to make progress faster. 

This is a 2-week micro-project, sponsored by Lucidchart, in one of my graduate design courses-Interaction Design Practice-at Indiana University. Lucidchart knows the Template Picker provides an experience that helps people make progress faster. but Lucid doesn’t believe they do a very good job of giving people what they want in the moment or what they are looking for when they first enter the product. We were given real survey data and user feedbacks and were asked to do small designs that have the potential to bring big impact.

Current Experience

Two operations within one "New Document" button

When new users first enter the product, they land in Document List. They can click on the “+ Document” button to open a new document, which creates a new document for them, using a blank flow chart template. If the users click on the “down arrow” next to the “+ Document” button, they can access the Template Picker.

Template picker as a pop-up window

Template picker is a modal that has 160+ diagramming templates - designed to help them make progress faster, and reveal use cases for diagramming needs. From this Template Picker, a user can start a new diagram by choosing one of many templates shown.

Understand Users

"I know what I want" User
●  May be familiar with diagramming already
●  May need a reference diagram as a starting point only
●  May need a template to edit and start building their own diagram
●  May not need an template to make meaningful progress

"Inspire me" User
●  Needs to see examples of a finished diagram so they know how to make one
●  May need an example diagram as a point of reference while they diagram
●  May not get a lot of value from “editing an existing template” as a start

Problems 

USER FEEDBACK ANALYSIS

There are three pain points in user experience: 1) Users Can't find desired template. 2) They have difficult to edit templates. 3) It's hard to start from a blank document.

Since we were provided with real user feedbacks from Lucidchart, the first thing we did was to go through the whole user experience and mapped out all the problems user mentioned. There are three main points in the timeline where users are experiencing problems:

01/

Can't find desired template

Insights from user feedback show: 28% users complained about not enough template or wrong template.

02/

Difficult to edit templates

All users are provided the same level of complexity regardless of their intent: “the templates are too specific/ not simple enough.”

03/

Hard to start from a blank document

Although 40% users choose to build their own document from blank template. Many of them want to return to template in order to get inspiration.

OPPOTUNITIES

Based on the pain points, we brainstormed three design opportunities.

01/

Better template view

We aimed at designing a better template view to deal with the information ambiguity and help users to find the desired template before committing.

Why
we chose this as our design focus?
02/

Different template complexities

We aimed at providing different template complexities, from simple shapes to filled-out templates, to help users diagram from templates.

03/

Open template as reference

We aimed at offering user the opportunities to open templates as references and go back to template picker at any time while they are diagraming.

Narrowing

SURVEY ANALYSIS

We chose to focus on "better template view" because survey data shows template picker is most valuable to users at the starting phase.

55.7%

Users open templates as a starting point:

41.3% keep template and edit shapes
15.3% open template as a reference and then delete 

76.3%

Users think templates are helpful before editing:

51% when creating a new document
25.3% when looking at templates

Design Goal

Allow users more opportunities to view templates before opening as document to help them find desired template.

"I know what I want" user:
Looking for specific template but the information is ambiguous

"Inspire me" user:
Want to review before committing

Exploration

ITERATION SKETCHES

Design narrowly and thoroughly: We give every decision solid design rationale.

Final Design

1.Click "Add New Doc" button to get to a whole screen template picker

Remove the down arrow beside the “+ Document” button, so users have to go through Template Picker page. Data shows that “forcing" users to see the template picker helps increase business value. Blank Template will always show in the first place in the Template Picker page.

Hover on thumbnail to open the preview

Allow users to preview the details of template before they open it in the editing page by hovering over to pull up preview option.

Better Preview and Click "use it" button to start editing 

In the preview, users can zoom in and out by controlling the slider. They can move to the last or next template directly by clicking the arrows or they can click back arrow at the top to go back to homepage.

A/B Testing Proposal

Test 1

To learn more about user behaviors: Why do 60.2% users start from new blank document?

This A/B test can help us distinguish Type C users from Type A and Type B: A) Users just want to start from a new blank template. Users can’t find the template they need in the Template Picker, so they start from new blank template. B) Users enter into the new blank editing page unintentionally. C) Users want to start from an existing template, but they don’t know where to open the Template Picker, so they click “+ Document” button and enter into the new blank page accidentally.

Current Design:

New Design:

Success Metrics:

we can measure the percentage of people who start from blank template in both current design and new design. If the percentage is lower in the new design, then we can infer that in current design, the button of opening the Template Picker is not very intuitive, so some people have trouble reaching it.

Test 2

To find out whether Template Preview can help users find the template they need more easily.

We will measure the time from when they open an existing template in the editing page to when they close that window, and name this period of time as “Engaging Time”.  If the “Engaging Time” is less than 30s, users probably opened the wrong template, and if they keep the template open after 30s, they probably found the right template and will start editing it. 

Current Design:

New Design:

Success Metrics:

We will calculate the ratio of users who close the template within 30s in both current design and new design. If the ratio is lower in the new design, we can say that the Template Preview function can help users find the template they need more easily, and our new design is a successful one.

CASE STUDIES--

Brand 

2018.5-2018.8 

UX/UI Design: An inline brand style system to accelerate MailChimp users' market content creation.

Group 

2019.1

UX/UI Design: A redesign of Yelp collection for groups.

Donor

2017.10-2018.4 

Product Design: An interactive donation box for CHI 2018

Menu 

2018.3 

UX/UI Design: A pleasant menu experiences and quicker in-store services for campus cafe shop.

Picker 

2017.10 

UX Design: A redesign of a template picker for online diagramming

Web Memo 

UX Design: A browser plugin for online courses

Cumulo

2016.9-2016.11 

UX Research: An educational kids' game for IBM

Lidro 

2015.5-2016.7 

Product Design: An intelligent product for home-made fruit wine

Web Memo 

UX Design: A browser plugin for online courses