Systems Architecture + Governance
Associate Creative Director
Web & app — 3 foundation libraries · 3 child libraries · 30+ layout files
Overview
Brightspeed's digital product suite spans a marketing website, e-commerce buy flow, and a native iOS app, each with distinct layout requirements, component needs, and team workflows. Building cohesive experiences across that ecosystem required more than good design. It required architecture.
It started with a migration. I led the move of the original buy flow and account files from a single Sketch page into Figma, setting up the teams, file structures, and shared libraries the ecosystem grew from.
I established and maintained a network of interconnected Figma libraries, foundation libraries plus product-specific child libraries, alongside a FigJam governance environment documenting global patterns, visual rules, and design standards for the full team. The handoff system standardized developer documentation, component specifications, and annotation conventions across web and app, creating a single source of truth that product, design, and engineering could all build from.
App Foundation
App System Governance
The app foundation established the visual and component standards for Brightspeed's iOS account management experience. Built around 390px layouts, a 4-column grid, 8pt spacing system, and Figma variables, every element was validated against WCAG AA before entering the applied component library.
App Style Standards → Applied Components
Visual standards established before any component was built — ensuring the system was consistent from the foundation up.
Web Foundation
Web System Governance
The web foundation defined the shared visual language across Brightspeed.com and the buy flow. Color tokens, typography scales, elevation, and motion principles were standardized here first, then extended through child libraries into both desktop and responsive web experiences.
Web Visual Foundation → Component Library
One foundation serving two distinct web products — maintaining consistency without limiting either.
Core Foundation
Core System Governance
The core foundation supported Brightspeed.com's high-velocity publishing environment. Reusable components for marketing pages, campaign layouts, promotional modules, and content templates gave the team the flexibility to move fast without drifting from the design system.
Core Standards → Page Components
Built for speed — a component library designed to support frequent content updates without requiring design intervention on every publish.
Outcome
One multi-library system. Three foundation libraries and three product-specific child libraries across web and app, serving as the single source of truth for design, development, and product teams.
Updates that flow through every layer. A layered system, from foundational tokens and variables through applied component libraries to local layout files, let design changes reach every flow step while preserving UX annotations, Confluence documentation, and live dev references.
A living rulebook. A FigJam governance environment documented global patterns, visual rules, and design standards for the full design team across 30+ layout files.
Consistent handoff. Standardized component specs, annotation conventions, and direct links to Confluence and dev references at every layer of the system.
More Projects
Follow me
All rights reserved | ©2012–2026 | Michael Miller
