Md Aseer Intiser – UX & Product Designer

Convay Design System

Convay’s fast growth created a need for consistency and scalability, but the platform had no design system in place. As the only UX designer assigned to the task, I took the initiative to create Convay’s first design system from scratch. With guidance from the product team and close collaboration with developers, I built a scalable foundation defining colors, typography, spacing, components, and patterns.

This design system unified the platform’s visual language across light and dark themes and improved team workflows—making handoffs easier, updates faster, and new features more consistent. Today, it supports Convay’s core platform and upcoming features across web and mobile, enabling the product to scale with confidence.

CATEGORY:

Design System,

Web Design,

Mobile Design, Responsive Design, Accessible Design

ROLE:

UX / UI Designer

TOOLS:

Figma

Convay at a Glance

Convay is a video conferencing platform built for modern collaboration. Unlike traditional tools, it supports the full meeting lifecycle, from scheduling and hosting to AI-powered transcription, file storage, and post-meeting follow-ups.

Designed with scalability in mind, Convay now supports meetings with up to 10,000 participants and is trusted by governments and international organizations in over 46 countries.

Key features include:

High-quality video and audio conferencing
AI-based transcription and meeting summaries
Cloud storage for meeting files and chat logs
Real-time whiteboard, chat, and screen sharing
Enterprise-grade security with on-premise and cloud options

Convay brings everything into one platform to simplify meetings, improve productivity, and support high-stakes collaboration at scale.

Convay has been used in global events like SIDSSA 2025 and secured a €5M government contract through its scalable architecture and reliable UX.

Visit convay.com to learn more.

Overview

When I joined Convay, the platform already had a range of features live, but each had been designed in isolation, without shared styles or reusable components. This lack of consistency created visual misalignment, slowed down development, and made scalability difficult.

I was tasked with bringing order to this growing system. I began by auditing the existing UI and identifying inconsistencies across layouts, colors, typography, and spacing. From there, I built a flexible design system in Figma, introducing a unified visual language that could scale across teams, features, and devices.

This system became the single source of truth for Convay’s product design, enabling the team to maintain consistency across light and dark themes, support rapid iteration, and future-proof upcoming features.

Defining Global Variables

To build a scalable design system, I started by defining global variables for Convay. These variables include foundational elements like colors, spacing, stroke widths, and corner radii, which create a consistent look and feel across the platform. By centralizing these core design properties, we can quickly make updates or adjustments across the entire platform without manually editing individual components.

Color Variables: I defined a palette of brand colors and content colors, with different shades for light and dark modes. Each color has specific uses, such as distinguishing primary actions from secondary ones, ensuring clarity and consistency throughout the interface.

Spacing: To maintain uniformity in layout and padding, I established a range of spacing variables (e.g., XXS, XS, M, L, XL). This spacing structure supports flexibility across different screen sizes while keeping the design cohesive.

Stroke Width: Stroke widths were standardized with variables like "Thin," "Thick," and "Thickest" for borders and outlines, ensuring that lines maintain a consistent weight throughout the platform.

Corner Radius: For rounded elements, I defined corner radius variables ranging from "None" (sharp corners) to "XX-Large" and "Circular," adding visual balance and hierarchy depending on the element’s function.

These global variables form the backbone of Convay's design system, allowing the team to apply consistent styling across multiple features quickly and effortlessly.

Establishing Styles for Text, Effects, and Grid Layouts

After defining the global variables, I moved on to setting up Figma styles for text, effects, and grid layouts. These styles are essential for ensuring a unified appearance across the platform and enhancing readability, visual hierarchy, and accessibility.

Text Styles: I created a comprehensive set of text styles to cover various use cases, including titles, subtitles, body text, and captions. Each style was carefully defined with font size, weight, and line height for both web and mobile. This typographic system ensures consistency in text presentation across different screens and enhances the readability of content.

Effect Styles: To add depth and focus to elements, I developed elevation (shadow) styles in both light and dark modes. The shadows range from subtle (Shadow 02) to more pronounced (Shadow 64), allowing us to highlight elements based on their importance. For example, higher shadow values are applied to modals and pop-up elements to help them stand out against the background.

Grid Styles: For a structured layout, I established grid styles for different devices and layouts, including desktop, tablet, and mobile views. These grids, such as the 12-column layout for dashboards and adaptive columns for various sections, support a flexible and responsive design. By using a standardized grid, we ensure that components are evenly aligned and that the platform scales smoothly across different screen sizes.

These style definitions add structure to Convay’s design, ensuring that text, effects, and layout grids remain consistent and visually appealing across various components.

Applying the Design System to Components and UI Elements

With the foundational variables and styles established, I applied these elements to create a cohesive, scalable design system for Convay’s UI components. This step involved building out reusable components using the defined colors, text styles, spacing, stroke widths, and effects, ensuring each part of the UI adheres to the new design standards.

Buttons: I used the global color variables and spacing options to design different button states, such as primary, secondary, active, hover, and pressed. Each button is visually consistent with the brand colors and provides clear feedback to users during interactions, enhancing usability.
Icons and Badges: The icons and badges across Convay were updated to align with the new color scheme, using accent colors for alerts and notifications. Each icon’s stroke width and corner radius were adjusted based on the defined variables, ensuring they are visually harmonious across all screens.
Forms and Input Fields: The design system also covers form components, including text fields, dropdowns, checkboxes, and radio buttons. Using standardized text styles, colors, and spacing ensures that all forms look consistent and feel intuitive, reducing cognitive load on users.
Modals and Dialogs: Modals were designed with proper elevation styles to give them prominence on the screen. The standardized corner radius and shadow effects make dialogs visually distinct, helping users recognize important messages or actions.

By applying these styles across various components, we achieved a unified look and feel for Convay. This structured approach improves user experience, making interactions more predictable and intuitive, while also making it easier for developers to implement consistent designs.

Buttons: I used the global color variables and spacing options to design different button states, such as primary, secondary, active, hover, and pressed. Each button is visually consistent with the brand colors and provides clear feedback to users during interactions, enhancing usability.
Icons and Badges: The icons and badges across Convay were updated to align with the new color scheme, using accent colors for alerts and notifications. Each icon’s stroke width and corner radius were adjusted based on the defined variables, ensuring they are visually harmonious across all screens.
Forms and Input Fields: The design system also covers form components, including text fields, dropdowns, checkboxes, and radio buttons. Using standardized text styles, colors, and spacing ensures that all forms look consistent and feel intuitive, reducing cognitive load on users.
Modals and Dialogs: Modals were designed with proper elevation styles to give them prominence on the screen. The standardized corner radius and shadow effects make dialogs visually distinct, helping users recognize important messages or actions.

Buttons: I used the global color variables and spacing options to design different button states, such as primary, secondary, active, hover, and pressed. Each button is visually consistent with the brand colors and provides clear feedback to users during interactions, enhancing usability.
Icons and Badges: The icons and badges across Convay were updated to align with the new color scheme, using accent colors for alerts and notifications. Each icon’s stroke width and corner radius were adjusted based on the defined variables, ensuring they are visually harmonious across all screens.
Forms and Input Fields: The design system also covers form components, including text fields, dropdowns, checkboxes, and radio buttons. Using standardized text styles, colors, and spacing ensures that all forms look consistent and feel intuitive, reducing cognitive load on users.
Modals and Dialogs: Modals were designed with proper elevation styles to give them prominence on the screen. The standardized corner radius and shadow effects make dialogs visually distinct, helping users recognize important messages or actions.

Buttons: I used the global color variables and spacing options to design different button states, such as primary, secondary, active, hover, and pressed. Each button is visually consistent with the brand colors and provides clear feedback to users during interactions, enhancing usability.
Icons and Badges: The icons and badges across Convay were updated to align with the new color scheme, using accent colors for alerts and notifications. Each icon’s stroke width and corner radius were adjusted based on the defined variables, ensuring they are visually harmonious across all screens.
Forms and Input Fields: The design system also covers form components, including text fields, dropdowns, checkboxes, and radio buttons. Using standardized text styles, colors, and spacing ensures that all forms look consistent and feel intuitive, reducing cognitive load on users.
Modals and Dialogs: Modals were designed with proper elevation styles to give them prominence on the screen. The standardized corner radius and shadow effects make dialogs visually distinct, helping users recognize important messages or actions.

Enhancing Scalability and Future-Proofing Convay

Creating a design system for Convay not only unified the visual and interactive aspects of the platform but also improved scalability and future-proofing. Before my work, Convay’s design elements were not standardized, making it challenging to maintain visual consistency across new and existing features. Now, with a well-documented design system, Convay’s design and development teams can easily introduce new components and features that align with the established look and feel.

Easier Development Process: With predefined styles and components in Figma, developers now have a clear guide for implementing UI elements. This reduces the need for design adjustments in each iteration, speeding up the development cycle and reducing the risk of inconsistencies.
Scalability Across Platforms: The design system supports Convay’s expansion plans, allowing it to scale seamlessly across web, tablet, and mobile platforms. With predefined grid and layout styles for various screen sizes, the design system ensures that the platform remains visually consistent and responsive, regardless of the device.
Efficient Updates and Maintenance: Whenever Convay’s branding or style needs to be updated, changes can be made within the design system. This approach eliminates the need to adjust individual components manually, as updating a global style or variable automatically applies the change across all relevant components. This flexibility allows Convay to adapt to new branding or design trends without extensive rework.
Future Enhancements: With a solid design foundation, Convay is well-positioned to add new features and user interactions. The design system provides a structured framework that allows for modular additions, enabling the design team to focus on user-centered enhancements without disrupting the core look and feel.

Overall, the design system I built has streamlined Convay’s design and development workflow, creating a sustainable framework that supports the platform’s current needs and future growth. It serves as a long-term asset, ensuring that Convay’s design remains consistent, user-friendly, and adaptable to new challenges and opportunities.

Easier Development Process: With predefined styles and components in Figma, developers now have a clear guide for implementing UI elements. This reduces the need for design adjustments in each iteration, speeding up the development cycle and reducing the risk of inconsistencies.
Scalability Across Platforms: The design system supports Convay’s expansion plans, allowing it to scale seamlessly across web, tablet, and mobile platforms. With predefined grid and layout styles for various screen sizes, the design system ensures that the platform remains visually consistent and responsive, regardless of the device.
Efficient Updates and Maintenance: Whenever Convay’s branding or style needs to be updated, changes can be made within the design system. This approach eliminates the need to adjust individual components manually, as updating a global style or variable automatically applies the change across all relevant components. This flexibility allows Convay to adapt to new branding or design trends without extensive rework.
Future Enhancements: With a solid design foundation, Convay is well-positioned to add new features and user interactions. The design system provides a structured framework that allows for modular additions, enabling the design team to focus on user-centered enhancements without disrupting the core look and feel.

Easier Development Process: With predefined styles and components in Figma, developers now have a clear guide for implementing UI elements. This reduces the need for design adjustments in each iteration, speeding up the development cycle and reducing the risk of inconsistencies.
Scalability Across Platforms: The design system supports Convay’s expansion plans, allowing it to scale seamlessly across web, tablet, and mobile platforms. With predefined grid and layout styles for various screen sizes, the design system ensures that the platform remains visually consistent and responsive, regardless of the device.
Efficient Updates and Maintenance: Whenever Convay’s branding or style needs to be updated, changes can be made within the design system. This approach eliminates the need to adjust individual components manually, as updating a global style or variable automatically applies the change across all relevant components. This flexibility allows Convay to adapt to new branding or design trends without extensive rework.
Future Enhancements: With a solid design foundation, Convay is well-positioned to add new features and user interactions. The design system provides a structured framework that allows for modular additions, enabling the design team to focus on user-centered enhancements without disrupting the core look and feel.

Easier Development Process: With predefined styles and components in Figma, developers now have a clear guide for implementing UI elements. This reduces the need for design adjustments in each iteration, speeding up the development cycle and reducing the risk of inconsistencies.
Scalability Across Platforms: The design system supports Convay’s expansion plans, allowing it to scale seamlessly across web, tablet, and mobile platforms. With predefined grid and layout styles for various screen sizes, the design system ensures that the platform remains visually consistent and responsive, regardless of the device.
Efficient Updates and Maintenance: Whenever Convay’s branding or style needs to be updated, changes can be made within the design system. This approach eliminates the need to adjust individual components manually, as updating a global style or variable automatically applies the change across all relevant components. This flexibility allows Convay to adapt to new branding or design trends without extensive rework.
Future Enhancements: With a solid design foundation, Convay is well-positioned to add new features and user interactions. The design system provides a structured framework that allows for modular additions, enabling the design team to focus on user-centered enhancements without disrupting the core look and feel.

Takeaways

Building Convay’s design system from scratch was one of the most formative parts of my UX journey. It taught me that consistency doesn’t mean limitation, it creates clarity, speeds up decisions, and gives users a more trustworthy experience.

I learned how important it is to think beyond just individual screens and start designing systems that scale. I also saw firsthand how even small, well-documented choices, like setting a corner radius or shadow style, can reduce confusion for developers and improve long-term product quality.

Most importantly, this project reminded me that great UX isn’t just about clean visuals or polished components, it’s about creating a foundation that helps people work faster, build smarter, and grow with confidence.

“Good design systems don’t just guide designs,

they unlock better collaboration.”