Overview

Brightcove had just started a major product initiative (see Beacon Studio) and a comprehensive brand update. The design system needed an overhaul. I formalized the design process for the design system, made numerous updates myself, and led the initial design effort for the new design system. I continued to support and, at times, lead the design system design team for several years after that.

Challenges

Modernize the design system: the old design system was missing tokens and other conveniences
Adoption across all teams: not all teams were even using the old design system
Design files for the latest tools: Sketch initially, and later Figma
New brand: well designed for marketing, but not well considered for product
Design process: we previously didn't have a design system team, a lead designer, or a formalized process for changing the design system
New design patterns: the upcoming product initiatives required new design patterns

Company

Brightcove
Titles

Senior UX Designer/Staff Product Designer/Principal Product Designer
Role

Lead Designer for the Design System
Responsibilities

End-to-End UX Research & Design, Establishing Design Process & Governance, Design Approval
Teams

Product Design, Product, Design System Team
Collaborators

Lead Engineer, Product Designers, Product Leadership
Timeline

2019 - 2022, 2023

Product Design Challenges with the Brand

The marketing team was under pressure to complete the new brand, and the product design team was brought in too late in the process to make a meaningful impact on the brand's direction. Thankfully, we were permitted to make changes to the brand for the Brightcove products.

The bold, high contrast colors work great for marketing but are fatiguing for long work sessions
The high contrast makes creating hierarchy in data dense interfaces difficult
Brand iconography was limited and more like small illustrations

Brightcove Brand Guidelines - provided by the marketing team

Styling

To kick off the initiative, we began with styling, including colors and typography. Some of the other designers made a first pass at this – I provided feedback and then took over for the final few passes. The strategy here was to start with a "paint the walls" approach – a quick win of changing the colors and fonts, followed by more in-depth work on the components.

Colors

I tweaked the colors to be less fatiguing while still passing contrast accessibility standards. I required that, at a minimum, we pass WCAG AA tests for text, and ideally, AAA in most cases. I advocated this throughout my time at Brightcove and served as the contrast police. Thankfully, this became less of an issue as we standardized these colors, their usage, and began creating tokens and components.

I conducted a contrast evaluation to ensure accessibility standards were met.

Color Usage Guidelines

Brightcove Design System Colors

Typography

We chose the secondary (non-display) brand font as our primary font for all products. I created a less dynamic typographic scale, based on a Perfect Fourth scale (1.33), to suit the high density of our interfaces.

Planning

Inventory of Components

I created and owned an inventory of existing and needed components, leading weekly meetings with design leads to discuss progress. The inventory became our component backlog, tracking status and designer assignments. I completed many designs myself while delegating and approving significant portions of the work.
Design Governance

I worked with design leadership to establish checkpoints for new design work. As a small team (~12 UX Designers), oversight remained informal. As design system lead, I provided feedback on design system compliance during reviews and critiques, and approved all design system changes.
Contribution Process

I documented the designer contribution process, which began with a conversation with me and included revisions based on my feedback. Complex patterns included customer usability testing. I approved designs, invited designers to present to engineers, and facilitated backlog inclusion.

Component Design

I designed the UI and micro interactions for many of the core components of the design system. The following are some examples.

Navigation Specs

Input States

Input Anatomy

Tag List States

Tag List Suggestions

Select States

Icon Toggle States and Specs

Header Saving Status States

Tile Selector

Iconography

While I've designed custom icons in previous roles, we had over 100 icons that needed brand updates—not a good use of time, given our workload. We selected Feather Icons as our foundation, and I delegated the integration process to a junior designer who collaborated with both design and development teams. Like all design system contributions, I reviewed and approved all icon choices before he committed them to the system.

Team Alignment

Front-end Guild: I joined the front-end guild meeting (mostly engineers), where I advocated the use of the design system and answered questions
Design Reviews and Critiques: I led critiques with the other designers on the team and mentored them on the use of and contributions to the design system
Product Leadership Presentations: I presented monthly to the entire product team to update them on the progress
Design Tools Training: I led training sessions for designers on how to use the design system in Sketch and later in Figma

Outcomes

Rebranded styles and components ready on time for the new initiatives
Improved accessibility across the platform, especially for contrast and keyboard navigation
Aligned design and engineering teams
Impact across the product line

Overview

Challenges

Company

Titles

Role

Responsibilities

Teams

Collaborators

Timeline