top of page

Lucid Software

Web UX ; Visual & Interaction Design

IMP1_edited.jpg
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." 

  1. Users are unable to search for integrations.

  2. No visible indicators of pre-installed integrations.

  3. No information about the value of any integration.

  4. UI not user friendly [The UI was not as per Lucid Design standards]

123.png
2.png

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."

  1. All purchases/installs for a team of users are done by the client’s admin users

  2. The Integration Marketplace for such admin users is a completely different page - found elsewhere  - within the settings page.

  3. Admins can't install integrations for their team from the main Integration Marketplace page.

  4. 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.
Group 1780.png
  • 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.

In-editor link.png
Group 1844 1.png

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.

pi3.png
Group 1848.png

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.

Categories

  • Integrations were categorized based on Use Case, Type of Tool & Software.

  • Worked with *Business Development teams to finalise Use Cases & Types of Tools.

  • This provides for improved navigability within the integration marketplace enabling the user to discover the integrations that match her needs

Group 1834.png
5.jpg

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.

IMP39.png
Mask Group2.png

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
Screen Shot 2020-12-07 at 4.43 1.png

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

TASK ANALYSIS

100%

of the users were able to perform the
given tasks.

COGNITIVE ANALYSIS

96%

of the users were able to provide answers
to the questions.

What UI changes did the testing uncover?

Install icon

The icon for ‘install’ looked more like a download icon - needed to look more like a ‘connect’ icon.

Modal info

The modal needed to contain information about privacy in addition to helping the user find out more about the integration.

What I took away from this project...

  • I learned how to effectively balance User needs and Business needs.

  • I got to use effective research and testing methods.

  • I learned how to communicate and collaborate with multi-functional teams.

  • I am now familiar working with PM's and engineers in an Agile environment.

bottom of page