Integration Platform Design

UI 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

Let's see how This Dot can help you

Are you looking for a development consulting firm that can provide staff augmentation, architectural guidance, and consulting to your company? Look no further than This Dot Labs. Our team of experienced developers and managers can help you implement and teach modern web best practices, and deliver your projects on time and within budget. Contact us today to learn more about our services and how we can help you achieve your development goals.

Get in touch