Integration Platform - UI interface for connections - To illustrate the user-friendly UI interface that allows users to connect components and automate workflows seamlessly
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 visualize 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

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.

UX Analysis / UI Inventorization - Interaction flow improvements - To depict the improvements made to user interaction flows based on the UX analysis findings
UX Analysis / UI Inventorization - Interaction flow improvements - To depict the improvements made to user interaction flows based on the UX analysis findings

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.

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.

UX Analysis / UI Inventorization - Interaction flow improvements - To depict the improvements made to user interaction flows based on the UX analysis findings
UX Analysis / UI Inventorization - UI consistency audit - To illustrate the audit of UI consistency across different sections of the platform, ensuring a uniform look and feel

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.

UX Analysis / UI Inventorization - Interaction flow improvements - To depict the improvements made to user interaction flows based on the UX analysis findingsUX Analysis / UI Inventorization - UI consistency audit - To illustrate the audit of UI consistency across different sections of the platform, ensuring a uniform look and feelUX Analysis / UI Inventorization - User experience enhancements - To highlight the enhancements made to the user experience based on the findings from the analysis

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.

UX Analysis / UI Inventorization - Interaction flow improvements - To depict the improvements made to user interaction flows based on the UX analysis findingsUX Analysis / UI Inventorization - UI consistency audit - To illustrate the audit of UI consistency across different sections of the platform, ensuring a uniform look and feelUX Analysis / UI Inventorization - User experience enhancements - To highlight the enhancements made to the user experience based on the findings from the analysis

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.

Atomic Design Approach - Figma design system creation - To showcase the creation of a comprehensive Figma design system with all foundational elements, components, modules, and templates
Atomic Design Approach - Figma design system creation - To showcase the creation of a comprehensive Figma design system with all foundational elements, components, modules, and templates

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.

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.

Atomic Design Approach - Figma design system creation - To showcase the creation of a comprehensive Figma design system with all foundational elements, components, modules, and templates
Atomic Design Approach - Foundations and elements - To depict the foundational elements and their various states included in the design system to ensure consistency

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.

Atomic Design Approach - Figma design system creation - To showcase the creation of a comprehensive Figma design system with all foundational elements, components, modules, and templatesAtomic Design Approach - Foundations and elements - To depict the foundational elements and their various states included in the design system to ensure consistencyAtomic Design Approach - Polishing UI elements - To illustrate how the atomic design approach helped in identifying and polishing the necessary UI elements and componentsAtomic Design Approach - Consistent user experience - To showcase how the atomic design approach ensures a consistent user experience across the platform

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.

Atomic Design Approach - Figma design system creation - To showcase the creation of a comprehensive Figma design system with all foundational elements, components, modules, and templatesAtomic Design Approach - Foundations and elements - To depict the foundational elements and their various states included in the design system to ensure consistencyAtomic Design Approach - Polishing UI elements - To illustrate how the atomic design approach helped in identifying and polishing the necessary UI elements and componentsAtomic Design Approach - Consistent user experience - To showcase how the atomic design approach ensures a consistent user experience across the platform

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.

Visual and functional consistency - To illustrate the visual and functional consistency maintained across the platform due to the design system
Visual and functional consistency - To illustrate the visual and functional consistency maintained across the platform due to the design system

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.

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.

Visual and functional consistency - To illustrate the visual and functional consistency maintained across the platform due to the design system
Platform Redesign - Enhanced service listing - To represent the enhanced listing of cloud services, making it easier for users to navigate and connect their services

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.

Visual and functional consistency - To illustrate the visual and functional consistency maintained across the platform due to the design systemPlatform Redesign - Enhanced service listing - To represent the enhanced listing of cloud services, making it easier for users to navigate and connect their servicesPlatform Redesign - Intuitive user interface - To depict the intuitive user interface designed to simplify the management of cloud servicesPlatform Redesign - Performance optimization - To represent the performance optimizations made to ensure the platform runs smoothly and efficiently

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.

Visual and functional consistency - To illustrate the visual and functional consistency maintained across the platform due to the design systemPlatform Redesign - Enhanced service listing - To represent the enhanced listing of cloud services, making it easier for users to navigate and connect their servicesPlatform Redesign - Intuitive user interface - To depict the intuitive user interface designed to simplify the management of cloud servicesPlatform Redesign - Performance optimization - To represent the performance optimizations made to ensure the platform runs smoothly and efficiently

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.

Marketing Website - Site map creation - To depict the creation of a new site map and the revision of the website structure in collaboration with the client
Marketing Website - Site map creation - To depict the creation of a new site map and the revision of the website structure in collaboration with the client

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.

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.

Marketing Website - Site map creation - To depict the creation of a new site map and the revision of the website structure in collaboration with the client
Marketing Website - Page-by-page redesign - To highlight the systematic redesign of each page of the desktop version to enhance user experience and visual appeal

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.

Marketing Website - Site map creation - To depict the creation of a new site map and the revision of the website structure in collaboration with the clientMarketing Website - Page-by-page redesign - To highlight the systematic redesign of each page of the desktop version to enhance user experience and visual appealMarketing Website - Page-by-page redesign - To highlight the systematic redesign of each page of the desktop version to enhance user experience and visual appealMarketing Website - Brand refresh and redesign - To showcase the TriggerMesh brand refresh through the redesign of the marketing website

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.

Marketing Website - Site map creation - To depict the creation of a new site map and the revision of the website structure in collaboration with the clientMarketing Website - Page-by-page redesign - To highlight the systematic redesign of each page of the desktop version to enhance user experience and visual appealMarketing Website - Page-by-page redesign - To highlight the systematic redesign of each page of the desktop version to enhance user experience and visual appealMarketing Website - Brand refresh and redesign - To showcase the TriggerMesh brand refresh through the redesign of the marketing website

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.

Custom Illustrations - Consistent branding - To highlight how the custom illustrations align with the brand's visual identity, ensuring consistency across the website
Custom Illustrations - Consistent branding - To highlight how the custom illustrations align with the brand's visual identity, ensuring consistency across the website

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.

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.

Custom Illustrations - Consistent branding - To highlight how the custom illustrations align with the brand's visual identity, ensuring consistency across the website
Custom Illustrations - Illustrations as a branding tool - To represent the strategic use of custom illustrations as a powerful branding tool to strengthen the platform's market presence

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.

Custom Illustrations - Consistent branding - To highlight how the custom illustrations align with the brand's visual identity, ensuring consistency across the websiteCustom Illustrations - Illustrations as a branding tool - To represent the strategic use of custom illustrations as a powerful branding tool to strengthen the platform's market presence

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.

Custom Illustrations - Consistent branding - To highlight how the custom illustrations align with the brand's visual identity, ensuring consistency across the websiteCustom Illustrations - Illustrations as a branding tool - To represent the strategic use of custom illustrations as a powerful branding tool to strengthen the platform's market presence

Performance increasing

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

Performance Increasing - Improved website vitals - To illustrate the improvements made to key website vitals, ensuring better performance and user experience
Performance Increasing - Improved website vitals - To illustrate the improvements made to key website vitals, ensuring better performance and user experience

Performance increasing

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

Performance increasing

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

Performance Increasing - Improved website vitals - To illustrate the improvements made to key website vitals, ensuring better performance and user experience

Performance increasing

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

Performance Increasing - Improved website vitals - To illustrate the improvements made to key website vitals, ensuring better performance and user experience

Performance increasing

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

Performance Increasing - Improved website vitals - To illustrate the improvements made to key website vitals, ensuring better performance and user experience
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
Linkedin

Linkedin

More works

Looking for an expert?

Let's discuss how WebFolks can help!

Contact Us
WebFolks logo outline