Work
Convay Design System
When I joined Convay, its interface had grown feature by feature, each one designed on its own, with no shared colors, type, or components holding it together. As the only UX designer on the team, I built Convay's first design system from the ground up: a single Figma source of truth for color, typography, spacing, and components, developed in close collaboration with the product and engineering teams. It's now the foundation every new Convay feature is built on, across web and mobile.
- Role
- UX / UI Designer
- Category
- Design System, Web Design, Mobile Design, Responsive Design, Accessible Design
- Duration
- Sep 2023 – Jul 2024 (Convay tenure)
- Tools
- Figma
Convay at a Glance
Convay is a video conferencing and collaboration platform built for governments, enterprises, and institutions that need to keep control of their own data. Used in more than 45 countries, it covers a meeting from start to finish, from scheduling and live video to AI transcription, file storage, and follow-up, all inside a system that can run entirely on a client's own servers.
Convay is the platform behind Bangladesh's national government communications system, built for the Bangladesh Computer Council and designed to scale to 200,000 users. In 2025, it was also selected over Zoom and Google Meet as the official platform for the Sustainable Infrastructure Development Symposium (SIDSSA), a G20-linked summit hosted in South Africa, supporting government officials and policymakers from 27 countries.
At Evercare Hospital Dhaka, a 425-bed hospital and the first in Bangladesh to receive JCI accreditation, Convay has run telehealth appointments and meetings for two and a half years, according to the hospital's head of IT.
- Countries
- 45+
- Government platform capacity
- 200,000
- Participants supported in a single meeting
- 10,000
Capabilities
- Enterprise-grade security: sovereign deployment on cloud, on-premises, or hybrid, with data kept in the client's jurisdiction
- High-quality video and audio: built for low-bandwidth and unstable network conditions
- AI transcription and meeting summaries: around 93% accuracy, in five languages: English, Bangla, French, Portuguese, Spanish
- Real-time whiteboard, chat, and screen sharing: with cloud storage for meeting files and chat logs
- Cross-platform: web, iOS, and Android, with 10,000+ mobile installs
References
Explore ConvayThe Problem
When I joined Convay, the product already had a full set of features live: scheduling, live video, transcription, file storage, chat. But each one had been designed on its own, without shared styles or reusable components. Buttons looked different depending on which feature they were in. Spacing was inconsistent from screen to screen. Colors were picked case by case instead of pulled from a shared palette.
This wasn't only a visual problem. Every new feature meant redesigning basic elements from scratch, and every small inconsistency made the product harder for developers to build and harder for users to trust. As Convay kept adding features and expanding into new markets, that lack of a shared foundation was only going to slow the team down more.
Approach
I started by auditing Convay's existing interface, screen by screen: cataloging the colors, spacing values, corner radii, and type styles already in use across every feature. The audit turned an abstract problem into a concrete one. Elements that should have matched didn't, and there was no shared reference to check anything against.
Rather than starting with components, I built the system bottom-up: global variables first, then reusable styles, then components on top of both. Getting the order right mattered. Variables like color and spacing needed to be settled before anything was built on top of them, since every component would inherit from them, and getting that sequence wrong would have meant reworking components every time a foundational value changed.
I worked closely with the product team, who set direction on priorities, and with developers, who needed the system to map cleanly onto how they'd actually implement it in code. Variable names, states, and structure were shaped as much by what was implementable as by what looked right in Figma.
Foundations
I started with the smallest, most foundational decisions: the variables everything else would be built from. Centralizing these meant a single update to a variable could ripple across the entire platform, instead of requiring a manual pass through every component that used it.
Color
I defined a palette of brand and content colors, each with light and dark mode variants. Every color was assigned a specific role, primary actions, secondary actions, status, content, rather than existing as a generic swatch, so a designer or developer reaches for the right color by what it means, not by picking the closest match visually. Building color as roles rather than one-off values also meant light and dark themes could both be supported without redesigning each screen twice, useful for anyone working in a bright office, a dark room, or anywhere in between.
Spacing
Padding and layout spacing were reduced to a defined scale, from None up through XXS, XS, S, M, L, XL, and beyond. Every component pulls from this scale rather than arbitrary pixel values, so spacing stays consistent whether it's inside a button or between two page sections.
Stroke width and corner radius
Border and outline weights were standardized into four values, Thin, Thick, Thicker, and Thickest, so a divider and a focused input border use a deliberate weight instead of whatever felt right in the moment. Corner radius follows the same logic, from None for sharp-edged elements up to Circular for avatars and icon buttons, with defined steps in between. The radius applied to an element now signals its role: sharper corners read as structural, rounder corners read as interactive.
Styles & Patterns
With the variables in place, I built the styles that reference them: type, elevation, and layout grids. This is the layer between raw variables and finished components, the set of rules that determines how a screen actually looks and reads.
Type
Titles, subtitles, body copy, and captions were each defined down to font size, weight, and line height, with separate specifications for web and mobile. That meant a designer or developer picking "Body 2" got the same result every time, regardless of which screen they were working on.
Elevation
Elevation is handled through a defined set of shadow styles, in both light and dark mode, ranging from a subtle lift (Shadow 02) to a pronounced one (Shadow 64). Modals and pop-up elements use the higher end of that range, so their prominence on screen is a deliberate choice rather than an accident of whatever shadow got applied.
Grid
Layout is governed by a defined set of grid styles, desktop, tablet, and mobile, including a 12-column dashboard grid with defined auto-column variants down to 6, 5, 3, and 2 columns for narrower layouts.
From Tokens to Components
With the variables and styles in place, I built out Convay's core components on top of them: buttons, form fields, icons, badges, modals, so every piece of UI in the product traced back to the same foundation instead of being redrawn from scratch each time.
Buttons carry states, primary, secondary, hover, active, pressed, built entirely from the shared color and spacing variables, so a button behaves and looks the same no matter which feature it appears in. Form fields (text inputs, dropdowns, checkboxes, radio buttons) follow the same type and spacing rules as the rest of the product, which matters more than it sounds: forms are where users spend the most deliberate attention, and inconsistency there creates friction fastest. Icons and badges use the same accent colors as the rest of the system, reserved for alerts and status rather than decoration. Modals and dialogs use the elevation styles defined earlier, so their prominence on screen follows the same logic as everywhere else, instead of being a one-off treatment.
None of these components were designed in isolation. Each one is a direct application of the variables and styles defined earlier, which is what makes the system a system: change a variable, and every component built on it updates with it.
Outcome & Impact
The design system has been in active use since 2024. What follows reflects my experience working with it day to day and building on top of it as new features shipped, not a formal usage audit or a quantitative study.
- Every feature built on Convay since has drawn from this system instead of starting its visual design from zero.
- Both light and dark themes are covered by the same components, not maintained as separate design efforts.
- Handoff to developers changed shape: instead of redlining every screen individually, developers could reference named variables and components directly in Figma.
- The system is still what Convay's core platform and new features are built on today, across web and mobile.
Reflection
Building Convay's design system from scratch was one of the most formative projects of my early career. It taught me that consistency isn't a limitation, it's what makes speed and trust possible at the same time.
I learned to think beyond individual screens and design for systems that scale, and how much a well-documented decision, a corner radius, a shadow value, can reduce confusion for the people building on top of it.
Most of all, this project reminded me that a design system isn't really about visuals. It's about building a foundation that lets a team move faster and build with more confidence, together.
Good design systems don't just guide designs. They unlock better collaboration.