LUCID SOFTWARE

Web UX ; Visual & Interaction Design

IMP1_edited.jpg

Overview

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?

Problem Statement

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

Role

UX Designer

Tools

Figma, Jira, Lucidchart

Duration

6 weeks

Team

Solo

 

My Redesign

Research

I started by interviewing members of the Lucid Customer Success team, as well as several end users. This helped me figure out what both Lucid and its users expected from the Integration Marketplace.

 
2.png

Pain Points for Client's Admin Users

Secondary User

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

Pain Points for end Users

Primary User

"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

I will now take you through my Design Journey.

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 their Integration Marketplace since Lucid was also planning to offer a suite of web tools to help their users plan, collaborate & communicate better.

A Recap of my Research Findings

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

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

Users need to be able to search for integrations.

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

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

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

Visual indication required for integrations already installed and  product compatibility

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

Below are some of the  UI elements that I designed for the project

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 giving users tasks which 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 exact type of information I should add within the pop-up information modal.

Overview of User Test

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.

Testing Takeaways

Tasks

Users were able to complete all tasks successfully.

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 Learned

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