3.jpg

LUCID SOFTWARE

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

I will now take you through my Design Journey.

RESEARCH

I started by interviewing about 10 stakeholders within the company. This gave me the opportunity to find out, in detail, what both Lucid and our users expect from the Integration Marketplace.

PAIN POINTS FOR NON-ADMIN 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. The UI is not as per current Lucid Design Standards.

123.png
2.png

PAIN POINTS FOR 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. The Integration Marketplace for Admin users is a completely different page - found within the settings page.

  2. Admins can't install integrations for her team from the main Integration Marketplace.

  3. 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 - 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 users to search for integrations.

  • Enable better discoverability of integrations by improving navigability and accessibility of the Integration Marketplace.

  • Help users to know how to use integrations.

  • Provide more information about the integration before installation.

Lucid Goals

  • Surface enterprise integrations to enable account upgrades.

  • Growing Integration installs makes your product more sticky.

  • Improve the navigability to increase User Engagement.

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 know what value she will be deriving out of the integration.

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

Integrations should sometimes be surfaced for the user based on their capability of cross-selling, upgrading, installing etc.

Visually indicate a) if an integration has already been installed & b) product compatibility.

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

 

DESIGN

Designing UI is probably my guilty pleasure as an aspiring Product Designer. Below are the various UI elements of my Design Journey.

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
2345.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
IMP1.jpg

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.

Participants from the Customer Success team

Tasks for the user to complete.

Screen Shot 2020-12-07 at 4.43 1.png

GOALS FOR TESTING

  • Created prototype on Figma.

  • The goal of Interview Sessions:

    • Since they 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 test out a prototype by giving users tasks which they had to complete.

      • Task #1 flow - Go to Integration Marketplace

      • Task #2 flow - Install Slack

      • Task #3 - find out how to use integration

      • “Is the difference between installed and ‘new’ integrations apparent?”

      • “What do you think the ‘coloured’ icons represent?”

  • I wanted to get insights on the exact type of information I should add within the pop-up information modal

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.

  • Instagram
  • LinkedIn

©2020 by Vignesh Kannan.