Tibco - Configuration

Tibco Cloud Configuration

Helping dev teams with data replication by providing a visual data management experience.

TIBCO Cloud Configuration

The Challenge

TIBCO Cloud Integration (TCI) is a suite of tools that provide data replication and integration solution for cloud services. The TCI Team found that the number of user’s reaching out to customer support to understand data replication is high. The UX Team was tasked with studying the issue & proposing a redesign of the feature.

My Role

I conducted user research & testing and lead workshops for Product Managers and Developers to design interactions for TCI.

Duration

May 2019 - August 2019
4 months

Team

1 UX Researcher
1 Visual Designer
2 Product Managers
4 Developers

Tools

Sketch
Invision
UserTesting.com

1. Released Design

Visually assisted data replication

When moving data from the source cloud hosting to target, the new design shows the data moving visually, making the process easier to understand.

My Proposed Design: Replication between source connection (on left) and target connection (on right)

Previous design: heavy & confusing layout for the users.

New Design System components

New Cloud Connection cards were incorporated into TIBCO's design system which will be used in other products like Flogo.

Released design reduced errors on the user’s end by 15%

In addition to reducing errors, the new design also improved time required to configure by about 30%.

2. RESEARCH

Understanding the challenge

To understand why user’s face issues with data replication, I decided it was important to focus on the user’s journey when they want to use this feature.

TCI Applications are created to replicate data from a source cloud server to another cloud server. So, what steps do they go through in the existing solution? I organized workshop session with TCI and Flogo team managers and developers to create a user journey map as follows:

Expected engineer's journey to configure a data replication application.

Interviewing engineers

I talked to dev ops & integrator (based on our personas) from other teams in Tibco and checked this user story with them. During the 5 interviews, it was evident that the user’s journey and the TCI team’s expected journey is different. The pain points interview is the following.

Pain Points

The terminologies are confusing.

Connections, connector types, entities, metadata had different connotation for the internal team and the users, creating confusion.

User's don't know what entities can be replicated.

The feature to add recommended entities did not explain which entities it is going to replicate, which seems unreliable to users.

3. Ideation

Brainstorming Workshops

It was evident that to reduce erros, clarifying the terminologies to the user can be a possible way. I took my research findings back to the team and conducted a mixture of online & offline workshop with them. During the workshop, participants wrote down different sections of the feature and what it does. We tried to arrange these sticky notes in a visual model that better represents what their function is. This workshop lead to the following model of application configuration.

I have omitted confidential data here.

Workshopped model of an application’s configuration

Sketching design concepts

As I showed the model we created above to our engineers, it seemed effective in visually conveying how data replication works.

The visual efficiency of the model meant it can be developed into a concept and be tested further. I iterated 5 - 6 variations, starting from the current design and adding elements to improve it's experience.

Very first design concept. Trying to visualize source & target connections.

Snippets of various iterations. Some were crazy ones and others a little timid.

Final concept taking shape after 5 iterations & communication with the team.

Released design. This screen was design after the testing in next section.

4. User Testing

Testing the prototype

7 participants took part in the user test on UserTesting.com. Me and the UX Research Team sat down and discussed the outcome of the test as follows. Seeing the success, the PMs and developers gave a go ahead to the proposed design.

Participants

Profession

Integration Engineers,
Dev Ops

Experience level

2-5 years

Test Results

Improved terminology communication

5/7 participants found it easy to understanding the terminologies used.

Reduced Misconfiguration

6/7 participants were confident with the configuration they were asked to do. Their configuration were correct.

5. Design Deliverables

Improving the Design System

As the tests showed promise, the team wanted to bring the components into TIBCO's design system. I proposed including components like the green connection cards as these can be improved upon and include in other tools like Flogo.

As I have grow as a UX Designer, I realized the color selection and the component placement is confusing and it's does not conform to WCAG standards. These components can definitely be improved by using the accessibility guidelines I created for the team after this project.

I have omitted confidential data here.

Snippet of the specification for Connection Card

Documenting the component for Tibco's Design System proposal.

Design Hand-off to the dev team

I worked closely with the developers to hand off design and specification sheets which they can use to develop the feature. This feature has been launched in Dec 2019 on TIBCO Cloud Integration 2.0. and planned to be brought into TIBCO Flogo in 2020.

Due to restrictions I cant share all the design details on this case study. Feel free to get in touch to learn more about!

Completed connection configuration with entities selected

Target connection being added

Configuring the connection and connector

Take aways

What did I learn?

While creating a user centric design is what is expected off me, the design should be considerate of the business and engineering considerations as well.

The more managers and developers are involved in the design process, the more trusting and fruitful environment is created, which leads to good designs.

What can I improve?

The source to target connection layout will be challenging to create in a mobile interface. Although this tool is desktop only, it's a good point for me to take into future designs.

The visual design of the components can be improved to pass the WCAG 2.0 accessibility guidelines.

Other Design Case Studies

BMI Audit

Defined product ecosystem and built product designs for an enterprise insurance audit service company.

View Case Study