Richmond

Overview

Richmond is a fork of the Ant component library built for Angular, reskinned and extended to serve the specific needs of StreamSets. When I joined StreamSets there were no established branding guidelines — a logo existed, but the website and existing products were built with a patchwork of Bootstrap and Materialize components. That fragmentation was an opportunity: rather than patch, we built something unified and customizable.

Strategic Decision

We chose to reskin Ant instead of building from scratch. Ant gave us a robust, well-tested component foundation, which freed the team to focus on the custom components the product actually needed — pipeline canvases, dense data tables, complex filter bars, and specialized visualizations.

Icons

The product needed a comprehensive icon set — general UI icons plus specialized pipeline stage icons for dozens of data sources and destinations. I assembled the library from a mix of custom work, contracted illustration, and reconstructions of legacy PDF assets. Every icon was drawn as a scalable vector and aligned to the core color palette.

Tables & Filtering

User research surfaced a specific pain point: experienced users wanted rich, bookmarkable filters and the ability to slice tables in complex ways, while newer users got overwhelmed by the same interfaces. The table system balances both by exposing simple filter chips by default while tucking advanced query building behind a progressive disclosure.

Pipeline Designer

The canvas-based pipeline designer is the heart of StreamSets. The hardest design problem was maximizing usable screen space while still surfacing the contextual information users needed — error states, runtime metrics, and configuration — without overwhelming them.

Challenges

• A hard timeline while keeping the design and engineering teams aligned
• Earning buy-in from engineers already deep in the existing codebase
• Keeping pace with a rapidly expanding engineering team