Integration platform

Integration platform
Project 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 visualise how the platform works
  • Design a set of custom illustrations that represents the platforms' features
Tools
Figma
Figma
Webflow
Webflow
Solutions
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

Solutions

Step 1

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.

Step 1

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.

Step 1

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.

Step 1

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.

Step 1

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.

Step 2

Atomic design approach

After UI inveratarization 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.

Step 2

Atomic design approach

After UI inveratarization 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.

Step 2

Atomic design approach

After UI inveratarization 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.

Step 2

Atomic design approach

After UI inveratarization 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.

Step 2

Atomic design approach

After UI inveratarization 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.

Step 3

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.

Step 3

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.

Step 3

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.

Step 3

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.

Step 3

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.

Step 4

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.

Step 4

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.

Step 4

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.

Step 4

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.

Step 4

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.

Step 5

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.

Step 5

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.

Step 5

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.

Step 5

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.

Step 5

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.

Step 6

Performance increasing

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

Step 6

Performance increasing

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

Step 6

Performance increasing

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

Step 6

Performance increasing

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

Step 6

Performance increasing

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

No items found.

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

More works

Looking for an expert?

Let's discuss how WebFolks can help!

Contact Us