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
4 months
Team
1 UX Researcher
1 Visual Designer
2 Product Managers
4 Developers
1 Visual Designer
2 Product Managers
4 Developers
Tools
Sketch
Invision
UserTesting.com
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.
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:
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e50003e0cd14032a2468025_Group%2074.png)
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
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e361d5f7c077b63bde2212f_icon%202.png)
The terminologies are confusing.
Connections, connector types, entities, metadata had different connotation for the internal team and the users, creating confusion.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e361d6d121267a009bba403_Vector%203.png)
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.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e5001b54227fda840c47497_Group%2054.png)
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.
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
7
Profession
Integration Engineers,
Dev Ops
Dev Ops
Experience level
2-5 years
Test Results
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e361d5f7c077b63bde2212f_icon%202.png)
Improved terminology communication
5/7 participants found it easy to understanding the terminologies used.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e361d6d121267a009bba403_Vector%203.png)
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.
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!
Take aways
What did I learn?
1
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.
2
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?
1
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.
2
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.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5f8c971beb866a0d583a3be2_blob%20orange.png)
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/629fbc4344191b5ac9e84b7e_Claims%20-%20Bulk%20Select.png)
Boost
Owned designs for an outcome-driven notification apps for students and universities.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/62952db0e9bad33fc1d23ee1_blob%20boost.png)
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/6295297b44499c61bfa0b3b4_Planner.png)
TIBCO Cloud Configuration
Helped dev teams with data replication by providing a visual data management experience.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5f8c8b0539466aef6bcab820_blob%20blue.png)
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5f8c9ce0c7688b8151f67c47_tibco%20config.png)
TIBCO Cloud Scheduling
Re-imagined the application scheduling experience on cloud management applications.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5f8c971beb866a0d583a3be2_blob%20orange.png)
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5f8c9deb24084b73bc4e6ec6_tibco%20scheduler.png)
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e4cb842e19c925e098bcdbd_Group%202.png)
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e4cb8593467633889e13b42_Group%203.png)
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5e587052f68ab80e48a6a4ce_Group%2087.png)
Stylo is a finalist for Cheng Wu Innovation Challenge 2020!
Stylo - AR Hairstyling
An augmented reality based hairstyling app that helps in communicating your hairstyle with your hairstylists.
![](https://uploads-ssl.webflow.com/5c95a7e8bf3e254ba25a720d/5f8c91fd0d48df73b848a9d7_mouse%20click.png)