Hexagon — Honey's Design System

I helped bring Figma to Honey (then PayPal), modernized our component libraries, and built out our federated working model across design and engineering.

Overview

As the design team grew to over 20 full-time designers, we needed to mature our design system (DS) beyond component libraries and tackle organizational and collaborative friction in our workflow.

In Q4 2020, I took over design systems from the incredible Sean Dillingham (who cleverly named our DS "Hexagon") to update the Figma tech of our component libraries, install DS ambassadors in a federated working model, and establish robust processes for working with the DS team.

Although I continued IC work on product features, I learned a lot about managing the output of a team and a cross-disciplinary roadmap, much like a PM.

UX research

Updating Components with New Figma Tech

The design team accrued a sizable amount of design debt over time as Figma kept steady on their release schedule, adding powerful tech to components, styles, and dev tools. Updating our component libraries as my first project was an easy win for the DS team.

New button set using configurable variants, built upon a base component set for fast and fully propagating changes.

I started at the most used component, the button, then moved on to input fields, dropdowns, and tags. I made sure to leverage autolayout, variants, and component descriptions when we updated these components.

I also introduced standards for corner radii, detailing how to use different values to create hierarchy and grouping within designs.

Corner radii standards to create hierarchy and grouping inside designs. Larger radii is used to group elements with smaller radii.

Hexagon DS Ambassadors

With the DS team consisting of me and my engineering partner, it was crucial to instate a formal federated working model across Design and Eng. Ambassadors would act as representatives of the DS team, being the eyes and ears during day-to-day meetings to help their teams work with DS to fulfill any emergent needs.

Slide from DS Ambassador presentation across product and eng. Each ambassador covers their own domain of expertise. These folks are superstars.

Hexagon DS Workflows Across PayPal

With the DS team consisting of me and my engineering partner, it was crucial to instate a formal federated working model across design and eng. Ambassadors would act as representatives of the DS team, being the eyes and ears during day-to-day meetings to help teams work with DS to fulfill any emergent needs.

Centralized Notion hub for working with Hexagon. The link to this page was pinned in every platform like Slack, Jira, and Confluence.

10,000 ft view of working with Hexagon — Inspired by Nathan Curtis on Design Systems Support. We wanted to lean heavily on ticketing to better track work being done.

Initiative: Migrate Hexagon to PPUI

A major initiative I launched was to reskin the robust and established PPUI (maintained and managed by a much larger team for much longer) to Hexagon by swapping foundational design tokens to Honey values.

Although the startup cost for this initiative was substantial, there was huge upside down the line for this effort as we'd be able to build once, and deploy three times on Honey, PayPal, and Venmo.

Context for the initiative in a presentation I made to Design and Eng

During my tenure as DS Lead, we were able to execute token swaps on colors, type, and corner radii. This was a large cross-functional effort across Honey, PayPal, and Venmo engineering teams. Shoutout to my engineering partner, SJ Ahn.

Exposing the token anatomy of common components across different PayPal properties

PPUI → Hexagon token map for color and type

Outcomes & Conclusion

I had high ambitions for my tenure as DS Lead, but was only able to deliver on a few key initiatives as I was juggling IC work at the same time. My roadmaps were packed and I inevitably fell behind. Good lesson learned on managing the amount of person-hours available.

I am proud of what I delivered and the skills I gained in roadmapping and cross-functional collaboration. I still have a passion for design systems — Working inside componentry and tooling is deeply satisfying for me as I'm able to use my engineering background for systems thinking.

Pat Capulong