Carta Iconography

Improving icons in Ink, Carta's design system

After only three months at Carta, I took on the task of improving the iconography in Ink, our design system. I lead the project and worked closely with Ink visual designers, as well as designers from the brand and marketing teams. It started with a thorough audit of the current icons, which at the time, were inconsistent in stroke, metaphor, and naming, and included outdated logos and duplicates. I worked with visual designers to rework every icon, iterating and refining until we had a cohesive iconography, and more importantly, proper documentation and guidelines. These guidelines are also part of our contribution model, allowing any Carta designer to contribute to Ink. After approval from the product design teams and leadership, I implemented the changes to all of the icon components in Ink, tested and tested again, and finally shipped the changes to production, all before my first six months at Carta.

Inconsistent icons

When I first joined the Ink Design System team at Carta, the first thing I noticed was the inconsistency in the icons. They were all over the place in terms of stroke, metaphor, and naming. Some were too detailed, some were too simple, and some were just plain outdated (I'm lookin' at you Silicon Valley Bank, Twitter bird, and old Carta logo).

The guidelines were virtually non-existent, and there was no documentation or captured context of any kind, so I did not know what the original intent was for many of the icons.

Clear words, clear ideas

There were a lot of problems, and I had a lot of ideas on how to fix them. So the first step is to simply start writing. The act of writing is a way to organize my thoughts and quickly add clarity to the project. It also creates an artifact that others can read, and react to, asynchronously. As my colleague Naveed once said, “Clear words, clear ideas.”

At Carta, we use a Starts With Why (SWW) template.

Digging deeper into the data

Part of my research was to understand which icons were the most used and which weren't used at all. This would help in multiple ways: prioritize which icons to work on first, which I could safely deprecate, and how much impact icon improvements would have.

Luckily, Ink was already tracking component usage, providing how often components were referenced in Carta's Github repositories. The problem was this usage was only at the component level, and icon types were defined as a property.

So I extended the tracking to allow you to click on a component's property, and see a list of the possible values, and how often they were refrenced.

This feature is now commonly used by our team to understand the impact of changes, helping us make more data-driven decisions.

Exploring & documenting

Working with Tammy and Joseph, Ink's visual designers, we iterated through every icon, refining, exploring, asking questions. As we explored, I made sure to document all of our decisions as we discovered and changed them. This would serve as a key deliverable for this project, as it provided context and a guide for any designer to contribute icon ideas to Ink.

Compare & Contrast

Once we did a first pass on all of the icons, I started to apply them to our components and product pages--first in Figma, then in code. Thanks to these tests, we were able to catch a lot of issues with visibility and sizing, and make adjustments before we shipped.

Ink Icons Improved

Throughout the project, I had regular check-ins with directors and presentations with product teams. We discussed progress, got feedback, and made sure we were on the right track. So by the time I was ready to implement all of the icon changes, there were no surprises, and I was able to ship an improved iconography into production with confidence and full support.