Since March 2022, I’ve been working as a product designer at Built, creating a new design system from the ground up. We call it Timber.
Timber aims to be a shared language between design and engineering that clarifies communication and increases collaboration.
It’s a collection of components, styles, guidelines, and interaction patterns that increase speed and ease-of-use while decreasing rework and decision-making—but it’s more than just a new component library.
Timber marks a shift to a more systematic approach to design and development. Using a standardized set of small building blocks, Timber empowers the designers and engineers to create experiences that accomplish our customers’ goals while maintaining a cohesive visual style and consistent user experience.
Designer and developer experience is also a top priority for Timber. Our goal is to make Timber so nice to use that not using it is actually harder and a much worse experience. I believe this is key for the adoption, growth, and evolution of any design system.
Timber is still in its infancy and there’s tons more to do—but below you’ll find some of my key focus areas and a small selection of visuals.
Color System
One of my first challenges at Built was to create a brand new color system for Timber. While Built did have a set of frequently used color swatches, what we lacked was a system of colors and a framework for applying them to the UI. Many of the colors also felt a little dull and didn’t meet the necessary contrast ratio requirements in their standard use cases.
While creating the palette, I paid close attention to vibrancy, contrast ratios, and how the colors would be used throughout the Built platform.
Taking the system one step further, I also created “functional” color swatches abstracted from the color scale values to aid and speed up the process of selecting colors for use in the UI.
Timber Foundations
Every design system needs a solid set of foundations to build upon. There’s a reason people say that the foundation is one of the most important aspects of any building.
While a lot of these styles were somewhat unofficially in place before I started, I worked to update, standardize, consolidate, and document what the foundations of Timber should be. I also collaborated with engineering to ensure that the design foundations were available to developers in the form of design tokens—with matching names in Figma and code to make sure everyone was speaking the same language.
Components
Timber Foundations is the backbone of the design system, but the true heart of Timber is the standardized, reusable components published to the design and engineering team.
I’ve worked diligently with designers and engineers to push the visual design and standardize component patterns and usage across Built. My philosophy when it comes to crafting components for the team is basically that in order to make a system that is fast, enjoyable, and scalable, usability should always be the primary emphasis. (What good are components if no one wants to use them?)
I try to shape Figma components so that designers don’t have to think about how to use them and can instead focus on solving the problem at hand. Working with engineering to align on component architecture is also a focus for me, so all props and variants share similar naming and structural conventions. This makes collaboration much faster and so much easier.
For continued success and adoption, I believe documentation is key. Aligning on (and writing down) usage guidelines plays a huge role in keeping everyone in sync, and it also makes it really easy for designers and engineers to know which component to use when, and why.
Timber Grid
A lot of Built’s platform is grid/table based. Our customers need access to their data, and they need to be able view and manipulate it in a familiar format.
Over the years, the implementations of grids across Built have strayed wildly from a common standard, so a huge focus of Timber has been to establish global visual styles, interaction patterns, and guidelines to bring everything together harmoniously.
I’ve led the charge for establishing these global standards and of course worked with the design and engineering teams to make sure that we’re making the right choices to solve the right problems for our teams and customers.
Guidance, Education, & Mentorship
In addition to working with engineers and designers to actually design Timber, I also like to guide, educate, and mentor the team with video recordings, presentations, 1:1 design sessions, processes, and sometimes large working sessions with the entire team.
I think it’s really important to bring everyone along and give each person a voice in shaping Timber. After all, the designers and engineers are essentially Timber’s customers! It’s also really important that everyone understands the reasons for design decisions and knows how to put those decisions in to practice.
As I mentioned before, Timber is still very young, and while we've already had some great success, we have big plans for what's next.