Lucid Software

Web UX ; Visual & Interaction Design

Overview

Lucid Software - Workflow management & team coordination tools for remote working

Macro Problem

How might we help distributed teams conduct end-to-end agile planning so that they can connect strategy to vision, generate cross-departmental ideas, and successfully deploy software?

Role

UX Designer

Tools

Figma, Jira, Lucidchart

Problem Statement

How might we increase the discoverability and installations of useful integrations related to a certain persona or use case?

Duration

8 weeks

Let's take a quick look at the redesign before getting into the process...

Research

WHAT WAS THE PROBLEM?

Every design process starts here, the Research

PRIMARY USER

Pain Points for end-users

"I don't know which integrations I have already installed. I don't know how to use the integrations I have installed. Nothing in the editor tells me to use an integration. It just never comes up."

Users are unable to search for integrations.
No visible indicators of pre-installed integrations.
No information about the value of any integration.
UI not user friendly [The UI was not as per Lucid Design standards]

SECONDARY USER

Pain Points for client-side Admin users

"This is the only useful integrations page for the admin of any team. It is easy to guide the user on this page, rather than the Integrations Marketplace."

All purchases/installs for a team of users are done by the client’s admin users
The Integration Marketplace for such admin users is a completely different page - found elsewhere - within the settings page.
Admins can't install integrations for their team from the main Integration Marketplace page.
This page's UI is completely different from any other page in Lucid's product.

An Exemplar Analysis revealed many possible features that could be included.

I looked at how various platforms (not only direct competitors) handle their integration marketplace. Some were - Google, Miro, Monday.com, Atlassian, Slack etc.
All the above examples gave the user the ability to search for integrations.
The integrations were also categorized based on use case & type of tool - which made the discovery of integrations easier.
Miro.com also allowed users in-editor access to integrations that can be used on the canvas (eg. Jira).

I was especially interested in how Google handled its Integration Marketplace since Lucid too was planning to offer a suite of web tools to help their users plan, collaborate and communicate better.

So what were the findings from my research?

User Goals

Allow us to search for integrations.
Enable better discoverability of integrations by improving navigability and accessibility of the Integration Marketplace.
Help us to know how to use our integrations.
Provide us more information about the integration for us to select the same

Lucid Goals

Increase stickiness of products through more integration installs
Enhance Revenues through account upgrades - by surfacing enterprise integrations
Enhance User engagement by improving the navigability of the Integration Marketplace

CREATING THE COMPASS FOR THE RE-DESIGN

I then went to form my Solution Principles. These basically formed the rule-book for my designs.

1.

Users need to be able to search for integrations.

2.

Users should be able to figure out the value they will get out of any specific integration.

3.

Admin users should be able to easily view active integrations of the team, and also be able to deactivate them easily.

4.

Integrations should be surfaced for the user based on its capability of creating cross-selling and upgrading opportunities

5.

Visual indication required for integrations already installed and product compatibility

6.

Users should be provided with an interface in which integrations are categorized based on the type of tool, use case, compatibility etc., thereby allowing the user to discover, explore and install useful integrations

Design

A deeper look into the re-design.

A new Entry Point

The first step I took to enhance discoverability was to add an entry point to the integrations which the user can use on the Canvas.
I also added a link to the Integration Marketplace itself so that the user can find the specific type of tool she is looking for.

Card Design

I explored different versions of the design for the card for individual integrations.
I ensured the design was scalable for all existing content requirements.

Product Identifiers

I also explored how the different product identifier options designed by the branding team could be incorporated into my design.
This was done in order to allow the users to see which tools in the Lucid suite a particular integration would work with.

Hover States

I also designed hover states of the cards.
One main reason was to allow the user a chance to request for team-oriented integrations.
Based on the number of requests, the integrations used could be re-assessed.

More Context

Upon clicking on the integration card, a modal pops up with more information about the integration.
This modal will include GIFs/tutorials on how to use the integration along with a list of features.
The goal here is to tell the user why she should install this integration.

Requesting a new Integration

I made the button to request for new integrations more prominent.
I also allowed the option for users to build their own integration with the Lucid suite of products.

A few more features...

I added the ability to search for integrations.
Used the term 'Apps' instead of 'integrations' since I felt it made them seem more approachable.
Apps are recommended to the user based on her background/role (answered during onboarding process).

I then set out to test my designs.

Testing

Goals for Testing

Created prototype on Figma.
I wanted to test out my prototype by assigning users certain tasks that they had to complete. The tasks were such that I could perform both a task analysis and a cognitive analysis of the user.
Since the participants were from the Customer Success Team, I wanted to specifically ask about the issues that Users typically faced around the Integrations flow.
I wanted to get insights on the type of information I should add within the pop-up information modal.

Overview of the User Tests

TASK ANALYSIS

3 Tasks for the User to perform under observation.

Task #1 flow - Go to Integration Marketplace
Task #2 flow - Install Slack
Task #3 - find out how to use integration

COGNITIVE ANALYSIS

2 questions related to how well the User understands the UI and its features.

“Is the difference between installed and ‘new’ integrations apparent?”
“What do you think the ‘colored’ icons represent?”

Results of User Test