Skip to content

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

Figma LogoFigma
Webflow LogoWebflow

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

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

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.

Prefer email? hi@thisdot.co