Garage Design System

There were two unique skillsets I could bring to Garage that made it a role in which I could both deliver value and make life on the design team a bit easier.

The first was a track record in designing and maintaining visual systems in Figma, and the second was personal experience taking those systems further into front-end implementation.

Garage - by its nature an incubator of new and confidential projects - came with design requirements that were unique in comparison to the broader organizational landscape:

While Visa already has a robust and well-staffed design system, Garage had to create a fundamentally different kind of design system to meet the needs of its own ventures.

The principles guiding this design systems were that at a bare minimum it would have to support designer needs and developed with flexibility and regular collaboration in service of users. Like any design system worth it’s weight, it of course would also have to be well-considered and robust.

At the time that I joined, each venture was in its early stages and deliverables were mainly low-fidelity - but would be transitioning into higher fidelity as brands started to emerge.

There were a few areas of contrast between Visa’s core design system and the Garage design system. Key differences include the ability to support multiple product visual design languages with their own visual differentiators - interface density, support for light and dark theming, sharp vs. rounded corners, semantic color variables, deep tokenization, and a broader and codified color scale system. This is all on top of the typical typography, interface components, and asset primitives one would typically find in a design system.

While those were the declared differences in terms of requirements, there were also requirements of similarity - most notably faithful adherence to Visa Guidelines for Accessibility Requirements (VGAR).

As a solo designer and administrator of this system that would be used across all Garage ventures, it was important that this system would not only do all the things it was supposed to - but do them in a way that balanced each team member's priorities and ways of working.

But before that, there had to be scaffolding in place to meet the challenge of creating something that anticipated design entropy while being flexible enough for others to learn and use.

On any given week, about 60-80% of my time would be dedicated to product design, and the remaining 40-20% to maintaining a decent(ish) level of design system debt. Part of this balancing act would entail regular syncs with team members just to figure out how to prioritize the service of their needs.

During one of our regular team syncs, a designer mentioned that they were sinking a ton of cumulative time into finding and downloading icons through Icons8. When digging into this a bit more, it was not only about organizing the icons themselves and naming them appropriately - but also anticipating that people may not be able to find an icon by how it just happens to be named in the system.

One of the more popular things I was able to implement for GDS was an extensive icon set tagged by related keywords contained in their Figma component descriptions.

Underneath all of this stuff lies a series of progressive typographic and spacing systems acting as the glue which enables the visual harmony we were all striving to achieve.

Another sort of unglamorous problem to solve was how to navigate certain ventures requiring product design of varying levels of information density without detaching component primitives. Since I had already set up spacing value tokens, we just had to add a few scaling modes that could be assigned to each venture mode (90% for compact, 100% as default, and 110% as roomy).

I'm kind of just a big nerd about this stuff to begin with so it was cool to see it subsidize this lift. I don't know if everybody retroactively applied unit variables to their designs (and I don't blame them) but at least moving forward it was helpful.

While there's tons of cool theory and heads-down time to be spent on a design system like this, the most important part of it was the opportunity to better understand and improve based on the needs of the team. It's very much about relationships.

In the background I also developed a framework for taking an emerging venture brand principles, and applying them methodically to define visual product design. This ended up being super useful because it helped us navigate what otherwise would be pretty subjective and opinion-based conversations with stakeholders.

There's a lot more I can share here about this - something that I will get around to doing soon.

I just love design systems. It's like a puzzle that you solve while you're building it, and there's tons of cool inspiration out about the next best thing. Special shoutouts to Radix, Linear, Untitled, Material, IBM Carbon, and of course the Figma team for releasing variables at a very opportune time.