Integration Platform Design

Cloud Native Integration Platform Design

Overview

Product and Marketing redesign of Cloud-Native Integration Platform in a Serverless World - TriggerMesh.

The platform creates an integration layer for cloud-native applications and automation workflows by allowing users to connect components using a UI interface.

Tasks

Redesign the existing platform incrementally using Material design
Improve UX for the main platform parts like create automation(Bridge) or manage users' integrations
Build and document the product design system
Redesign marketing Website and migrate it from WordPress to Webflow
Create a custom animation that visualize how the platform works
Design a set of custom illustrations that represents the platforms' features

Tech-stack

Solutions

UX analysis / UI inventorization

As a part of the platform redesign, we did UX analysis of the existing main features as well as UI inventorization to understand what and how we can improve.

Stack Details interface, featuring an editor with a YAML option, a list of stack components on the left

Three different views of the TriggerMesh interface: the first view shows the Task Runs section; the second view shows the Create Secret section; the third view shows the Channels section

TriggerMesh interface, focusing on the Service section, which includes tabs for details, pods, YAML, monitoring, and call function

Atomic design approach

After UI inventorization we had an understanding of how many elements and components we need to polish. We've created a Figma design system with all the foundations, elements & its states, modules, and templates. That allowed us to speed up the design process.

Design system for buttons, showcasing different types, sizes, and states of buttons

Design system for input fields, illustrating different types, sizes, and states

Design system for tables, illustrating various elements such as table headers, item names, and dates

TriggerMesh user interface for configuring a bridge includes options to select a provider, set up a repository, and configure settings

Platform redesign

The main focus was on the creation of a Bridge experience, listing and connecting users' cloud services. Due to we use the design system that we've created we achieved consistency over the all parts of the platform.

Displays various screens of the TriggerMesh user interface, showcasing different configurations for creating and managing bridges

Bridges management screen it lists various bridges along with their names, icons, statuses, and creation dates.

Bridges configuration screen shows a bridge named little-friendship with various configuration components

Various configuration screens within the TriggerMesh user interface

Marketing website

In the next step of the TriggerMesh brand refresh, we redesign the marketing website and migrated it from WP to Webflow. We've created a site map and revisioned the structure with the client. After that, we started to redesign page by page the desktop version, the responsiveness was done right in Webflow.

Conceptual sitemap for the TriggerMesh website

Shows a comparison of the TriggerMesh website's homepage before and after a redesign

Shows a before-and-after comparison of the TriggerMesh product webpage

Sections of the TriggerMesh website, highlighting the How it works, What we offer, and Meet the Team sections

Custom illustrations

As a part of the marketing redesign, we've created a set of custom illustrations that represents the platforms' features and make the web presence more solid.

Collection of blue line illustrations representing various cloud computing and integration concepts

Performance increasing

As the end result we the Marketing website was fully redesigned as well as the key website vitals was improved.

Before and after comparison of web performance metrics for both mobile and desktop views

Outcome

Fully redesigned platform UI with a bunch of UX improvements
Well documented design system for developers and further design changes
New marketing website migrated from WP to Webflow with improved web vitals
Set of custom creatives including illustrations and animation

Clients Success Stories

Explore Story

This Dot Client

AI-Driven Insights: Elevating the CPO Experience with AI Assistants and Data

Data-driven decision-making is paramount. This Dot Labs partnered with Knoetic, a leader in people analytics solutions, to revolutionize how CPOs leverage technology. By developing Genie 2, an AI-driven HR assistant, and enhancing Knoetic's People Analytics platform, This Dot Labs help Knoetic empower CPOs with access to strategic insights.

Explore Story

This Dot Client

Empowering Teams with Comprehensive Tech Stack Assessments

Teams often face challenges in evaluating their tech stacks and implementing new technologies efficiently. This Dot Labs provided an organization an extensive technical assessment, resulting in an 80+ page detailed report that provided in-depth analyses and actionable recommendations across maintainability, performance, security, and accessibility.

Explore Story

This Dot Client

Leveraging a RAG AI Chatbot for Efficient Search and Information Extraction from Video Archives

This Dot Labs developed an AI-powered solution to help the team quickly search through hundreds of hours of recorded video meetings, podcasts, and interviews.

Explore Story

This Dot Client

Daily Polished, a members-only e-commerce platform focused on luxury beauty and wellness products

This Dot Labs took over architectural decision making and development for the e-commerce store and provided a seamless transition with timely deliver of the platform.

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.