Thumbprint
Design Systems, Foundations, Email
Over the course of 2 years I designed and wrote documentation for over 40 types of components. Thumbprint covered web.
Overview
Thumbprint is the design system of Thumbtack, a local services marketplace that connects people with pros who can get things done. Thumbprint enjoyed wide adoption across the product org and we collectively created a culture of collaboration around the system. Our team was quite proud of it.
Over the course of 2 years I designed and wrote documentation for over 40 types of components. Thumbprint covered web, iOS, android, email, illustration, and other supportive libraries. I also created educational sessions and fun demos to help socialize the system and get everyone bought into using it.
Building Foundations
Back when I first joined Thumbtack, we had a very rudimentary design system called Primo that was mostly just a loose collection of Sketch libraries. Designers would build on top of old mocks, developers would often be irritated at handoff, and ultimately the product suffered - it felt disjointed from page to page. There was so much tech debt built up from years of quick solutions that making any kind of global change to most things was hard.
The need for a more robust design system was clear. Designers needed a clear source of truth to design better experiences, and developers needed a system to be able to move quicker.
Setting solid foundations and cleaning up tech debt
By successfully auditing and improving small yet impactful areas of the system, we were able to achieve quick buy-in from those around us, while setting the stage for future work to be built upon.
We set out to not only reduce the amount of options or simply clean something up, but to apply systems thinking to everything from the naming to the experience of interacting with components in the design tool. But oftentimes, just the clean up is a huge task. It certainly was for us.
We set out to improve these 4 foundational areas:
Space
Color
Typography
Iconography
A new spacing system
Before we implemented a spacing system, designers would space elements in increments of 4. Developers were manually inputting space into each component. This resulted in content across the experience jumping around.
Upon audit, it was revealed that we had 821 separate instances of space in the product with 47 different increments. It was a bit daunting to grasp how bad the situation had gotten, but we had to do better.
The solution was a system of 8 spacing increments that gave designers enough flexibility but also allowed space to be tracked and controlled globally. Win-win-win. What resulted was a color-coded system that allowed designers to move quickly through spacing issues and to be more consistent across the product.
I also created assets in Figma to help designs apply space. This would help new designers get aquatinted with a spacing system quickly. Easily accessible cheat sheets were also made in Figma for quick reference.
Clarifying colors and making them more accessible
With Primo, an audit revealed that there were 133 different colors being referenced in the product. We able to get that down to 30 with a better system.
When Thumbtack rebranded in 2018, the colors that were set out were only WCAG AA compliant. I set out to expand the system to increase accessibility and contrast across the palette.
The solution was to leave the primary colors largely unchanged to avoid any large changes in the system, but we opened up another level of options in Figma in order for designers to drop into an more accessible palette if they want to. Accessibile colors were also updated and promoted in the system wherever possible.
Cleaning up typography
Typography was also cleaned up and improved. An audit revealed we had 65 different instances of type in the system. We were able to get that down to 25.
Only icons that spark joy
Icons were also cleaned up considerably. We ended up identifying 530 different icons in the old system, and we were able to consolidate that down to 152.
Results
After a year of work we had a rather mature library for web. However, we found that designers and developers who worked on native experiences were feeling left out. Luckily, we were about to start realigning our design process to be native-first, which gave us a good reason to start a native library.