About Telnyx

Telnyx is a wireless and video-focused communications API that developers use to integrate communication solutions with their applications.

Telnyx's Mission Control is an enterprise customer portal used for setup, account management, product and resource configuration, and debugging.

Context

I joined the company in 2019. The core team decided to migrate the Portal front-end from Angular to React. Upon joining, I discovered that while there was purportedly a design system in place, upon closer examination of the design files and codebase, it became evident that it was more of a style guide and a React component library that did not seem to scale or be adopted across the platform.

Some of the identified issues were:

• Absence of a component library.

• Mismatch between the style guide and production implementation.

• Lack of a single source of truth.

• Custom components and styling.

• Lack of common patterns.

• Poor accessibility.

• Challenging designer-developer handoff.

My role

I was a solo designer leading efforts on the design side and supporting the front-end development team.

Problem

The process from ideation to production was slow and painful.

Challenge

Make communication easier between designers and developers.

Solution

While we lacked resources to build a fully-fledged design system, we decided to iterate over existing elements and focus more on shared language and less on processes and tools.

Interface inventory

After auditing our portal application, I found numerous inconsistencies in styles, particularly in colors and typographic hierarchy. Additionally, there were many accessibility issues and custom/recycled components that were meant to have the same appearance and behavior but did not.

Color palette and mapping

Image: Original colors in Figma vs Code, and failed color contrast ratio.

Based on existing colors and brand guidelines, I reduced the number of shades and simplified the palette. Additionally, I adjusted some colors to meet accessibility standards (WCAG 2.1 level AA).

Components

Since I was the sole designer working concurrently with other initiatives, the strategy for building or fixing components was to address them as needed for new projects. The scope was to fix or create the React component, its Figma counterpart, and add basic documentation.

Image: Component structure in Figma, code, and component rendered.

Handoff

With limited development resources, I collaborated with various front-end developers depending on the project we were implementing at a given time. Consequently, the handoff process varied, as some engineers were less detail-oriented and some were more familiar with Figma than others.

Architecture

Until that point, styles and components for the product and website were separate in Figma but shared in the front-end. I decided to align the Figma library structure with this and reduce maintenance overhead.

Documentation

Since there were no plans to open-source or release this as a public-facing system and lacked resources for a dedicated documentation site, I set up a Notion space in a couple of days. This served as a place to document components, styles, and design decisions.

Advocacy and education

In addition to technical work, I shared concepts and best practices with designers and engineers less familiar with design systems, aiming to not only educate but also encourage usage and collaboration.

Results

Although we lacked a proper tool to measure results and impact, we used Jira metrics and anecdotal evidence from consumers for insights on improvements.

• ~ 15% Improve in implementation time.

• Significant improvement in task completion rate.

• More efficient design <> developer collaboration and handoff.

• Evident consistency in the product's UI.

Image: Examples of improved UI.

Learnings

Small changes can make a big impact

Establishing a shared language and a simple, well-architected component library improved communication between teams and increased efficiency.

Share the problem

Sharing problems and pains with developers fostered trust, empathy, and partnership beyond designers. One of the main reasons I attribute the success of this project is the help I got from engineers.