← All work

CSX  ·  Design Systems  ·  Developer tools

One standard for an enterprise built by acquisition

CSX hired me to build a design system that could scale across its applications. Over seven years it grew from a component library into the foundation for how the company designed and built software, and the role grew into leading Digital Experience.

Role
Design leader, later Director, Digital Experience
Team
8 designers
Users
Engineering teams across the enterprise, and the employees using their apps
Scope
Components, patterns, icons, accessibility, documentation, and governance
CSX Starter Showcase home Icon library with 644 searchable icons Application color palette Button specifications and states Modal specifications

Results

Day one

new engineers productive immediately instead of two weeks of setup

644

searchable icons with metadata in one library

30+

enterprise app icons rebuilt on one template

1

source of truth for patterns, code, and documentation

01  StrategyThe problem

Every acquisition brought its own interface.

Applications inherited through mergers looked and behaved differently, from search to navigation to labels. Rail employees who moved between several apps a day carried the cost in confusion and slower work. Developers carried it too, copying outdated code or inventing patterns because there was no standard to build on.

Consistency
One look and behavior across applications.
Onboarding
Easier for employees moving between apps, and for new engineers joining teams.
Speed
Faster development from approved, reusable components.
Quality
Better code by building on tested patterns instead of copies.
A spread of legacy CSX applications with inconsistent layouts, colors, and controls
The starting point: inconsistent look and feel across applications.

02  ExecutionHow it was built

Audit, standardize, document, govern.

Goals and audit
Aligned stakeholders, designers, developers, and product managers on objectives, then audited every component, type style, color, and icon in use.
Guidelines and library
Set principles for accessibility, scalability, and brand, and built a reusable component library with states, interactions, and usage rules.
Documentation
Centralized guidelines in one wiki connected to the CSX Starter Showcase, so designers and engineers worked from the same source.
Governance and adoption
A contribution and review process for changes, scheduled reviews, and training through UX University to drive adoption.

A hierarchy teams could build with.

Components as the basic building blocks, modules that combine them into working sections, and page templates for common layouts. The UX team also built custom modules for needs unique to rail, like a train route visualization.

Accessibility guidance with color contrast checks
Accessibility built in: a color palette tested against web accessibility guidelines.
Standardized enterprise app icons
One template used to rebuild 30+ enterprise app icons.
A custom module for rail: the train route visualization. Illustrative recreation with fictional stops.
Icon library
644 searchable SVG icons with metadata.

03  ImpactWhat it changed

Speed to market, measured in people.

A senior project manager who had always budgeted two weeks of startup time for new team members reported they could start immediately. Engineers saw the same effect in their own work.

“Using the Showcase drastically lowered the development time.”Software Engineer, CSX
Karyn Nesby

Contact

Let's talk about what you're building.

Open to full-time and fractional leadership roles.

LinkedIn AI Lab