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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fl12KzU7qOwOmi7ejwVPjDxIGoA02%2FZJF64KrkqE3j6LwsWUB6%2F26996b36-977b-4f54-9f35-90c57e508c2f.png?alt=media&token=a61a93b0-90cb-4a8f-9923-196d875f374f","id":"26996b36-977b-4f54-9f35-90c57e508c2f","width":1600,"height":1200,"filename":"Color System 1.png","type":"image/png","caption":"Color scale overview","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fl12KzU7qOwOmi7ejwVPjDxIGoA02%2FZJF64KrkqE3j6LwsWUB6%2Fcf88eac5-8a00-4a07-8e58-18063e5a8668.png?alt=media&token=c1484076-7c1a-47a5-97c7-78ac365503e9","id":"cf88eac5-8a00-4a07-8e58-18063e5a8668","width":1600,"height":1200,"filename":"Color System 2.png","type":"image/png","caption":"Functional color swatches","border":false}]}
```

## **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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fl12KzU7qOwOmi7ejwVPjDxIGoA02%2FZJF64KrkqE3j6LwsWUB6%2F9d1f8146-a18f-4bc3-96e0-4dd95ce739d5.png?alt=media&token=4077d3b1-475d-4328-aac2-721994030484","id":"9d1f8146-a18f-4bc3-96e0-4dd95ce739d5","width":1600,"height":1200,"filename":"Foundations.png","type":"image/png","caption":"Foundations preview","border":false}]}
```

## **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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fl12KzU7qOwOmi7ejwVPjDxIGoA02%2FZJF64KrkqE3j6LwsWUB6%2F2057dd1b-d18e-4532-9fe6-66b7218743f8.png?alt=media&token=d222b33f-932d-4385-8fcc-5ffd390f6d2e","id":"2057dd1b-d18e-4532-9fe6-66b7218743f8","width":1600,"height":1200,"filename":"Components 1.png","type":"image/png","caption":"Badges","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fl12KzU7qOwOmi7ejwVPjDxIGoA02%2FZJF64KrkqE3j6LwsWUB6%2Fdf97cb5e-a2ec-438d-920f-10c6b73b7f1c.png?alt=media&token=e4394f53-57ef-45f6-a8e4-a03b25cc3012","id":"df97cb5e-a2ec-438d-920f-10c6b73b7f1c","width":1600,"height":1200,"filename":"Components 2.png","type":"image/png","caption":"Buttons","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fl12KzU7qOwOmi7ejwVPjDxIGoA02%2FZJF64KrkqE3j6LwsWUB6%2F3be97121-8979-41aa-ade1-b6ef2b7fd430.png?alt=media&token=6563b092-a97b-452e-9449-32aeb477d43a","id":"3be97121-8979-41aa-ade1-b6ef2b7fd430","width":1600,"height":1200,"filename":"Components 3.png","type":"image/png","caption":"Tooltips","border":false}]}
```

## **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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fl12KzU7qOwOmi7ejwVPjDxIGoA02%2FZJF64KrkqE3j6LwsWUB6%2Fb9213594-5f42-4379-83f4-b513932c4086.png?alt=media&token=7a0d1384-f393-48e7-bbcd-dd62fa932368","id":"b9213594-5f42-4379-83f4-b513932c4086","width":1600,"height":1200,"filename":"Grid 1.png","type":"image/png","caption":"Example grid (with dummy data and placeholder filters)","border":false}]}
```

## **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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fl12KzU7qOwOmi7ejwVPjDxIGoA02%2FZJF64KrkqE3j6LwsWUB6%2F631caf6b-d09d-45de-a477-575150bd7378.png?alt=media&token=5925d574-95a1-4568-8070-2825b38115b1","id":"631caf6b-d09d-45de-a477-575150bd7378","width":1600,"height":1200,"filename":"Other 1.png","type":"image/png","caption":"The Log Pile - Timber updates for the team","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fl12KzU7qOwOmi7ejwVPjDxIGoA02%2FZJF64KrkqE3j6LwsWUB6%2F52d69ea0-704d-4eb6-8046-8f4df1fb9d89.png?alt=media&token=6e85dc3c-3c40-49d1-a628-c60087a7bd8b","id":"52d69ea0-704d-4eb6-8046-8f4df1fb9d89","width":1600,"height":1200,"filename":"Other 2.png","type":"image/png","caption":"Presentation slides re: Banners","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fl12KzU7qOwOmi7ejwVPjDxIGoA02%2FZJF64KrkqE3j6LwsWUB6%2F82944120-8bd6-4bea-8ae6-ad0ef71e15a4.png?alt=media&token=2af34c0d-7e6d-4428-a71c-a4dcc5624e98","id":"82944120-8bd6-4bea-8ae6-ad0ef71e15a4","width":1600,"height":1200,"filename":"Other 3.png","type":"image/png","caption":"FrameWork - Design system design education","border":false}]}
```

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.

Case Study: Built

## **Creating a design system from the ground up during a major replatform was no easy task, but it was one that I was happy to lead.**

SmileDirectClub's website architecture was outdated and a huge hinderance to designers, developers, and project owners across the company. Due to a variety of limitations, the divide between design handoff and implementation left something to be desired.

We needed to modernize our approach to design and create cross-team alignment on how design and development should happen at SmileDirectClub. Under the leadership of the Director of Product Design, I spearheaded the design of a comprehensive design system.

I honed the visual design, defined interaction patterns, created organization-wide Figma libraries for foundational styles and complex components, and created best practices, usage guidelines, and how-to videos to give other designers the awesome power of designing systematically.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fl12KzU7qOwOmi7ejwVPjDxIGoA02%2FcnCRJqGGFLj3DOWVaqb1%2Ff5acd589-541f-4563-a1e8-ff9085b713e0.png?alt=media&token=e9e60e04-eb16-4126-a080-953ad556ebf7","id":"f5acd589-541f-4563-a1e8-ff9085b713e0","width":2100,"height":1575,"filename":"sdc-foundations.png","type":"image/png","caption":"A snippet from our foundations Figma library that defines universal styles and guidelines across platforms and applications","border":false}]}
```

I worked closely with my developer counterpart throughout the process, and together we made sure that styles and components represented in Figma were also represented in our front end UI library.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fl12KzU7qOwOmi7ejwVPjDxIGoA02%2FcnCRJqGGFLj3DOWVaqb1%2F5e4560bd-89ca-4eaa-bbfd-d8e97dabfca8.png?alt=media&token=d7c4c350-16d4-4a7a-882f-3439c0a3ee80","id":"5e4560bd-89ca-4eaa-bbfd-d8e97dabfca8","width":1600,"height":1200,"filename":"sdc-storybook.png","type":"image/png","caption":"A screenshot of our UI component library in Storybook","border":false}]}
```

This work was still in the process of being implemented when I was unfortunately laid off in late January of 2022, but our efforts had already increased design and development efficiency, created a consistent visual language for SmileDirectClub's web presence, greatly improved the user experience of their website, and enabled fast, consistent scaling of design as SmileDirectClub grows.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fl12KzU7qOwOmi7ejwVPjDxIGoA02%2FcnCRJqGGFLj3DOWVaqb1%2Fbe315be5-15e7-442d-a8a2-5d57b953339c.png?alt=media&token=4c288a40-91c5-44c5-9cd9-7b8950958bf2","id":"be315be5-15e7-442d-a8a2-5d57b953339c","width":1520,"height":1140,"filename":"sdc-web-components.png","type":"image/png","caption":"A small piece of our web components Figma library, which utilizes our foundations to create robust, web-specific patterns and components","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fl12KzU7qOwOmi7ejwVPjDxIGoA02%2FcnCRJqGGFLj3DOWVaqb1%2Fa2b06e40-3a09-4efd-9c38-e6261ae4afac.png?alt=media&token=d146c47b-1e77-41bc-ac96-c427be5c92cb","id":"a2b06e40-3a09-4efd-9c38-e6261ae4afac","width":2015,"height":1511,"filename":"sdc-website-screens.png","type":"image/png","caption":"A screen from the website Figma file that assembles customized web components and sections into page layouts to accomplish business and user goals","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fl12KzU7qOwOmi7ejwVPjDxIGoA02%2FcnCRJqGGFLj3DOWVaqb1%2F6ec2d861-ef3f-46a7-921c-9754ea7f2d9e.png?alt=media&token=a86b1182-3f32-4c87-ac2f-39653771a88b","id":"6ec2d861-ef3f-46a7-921c-9754ea7f2d9e","width":1365,"height":1024,"filename":"sdc-other-projects.png","type":"image/png","caption":"A few of the other projects I worked on: navigation, getting started, and booking a visit","border":false}]}
```

SmileDirectClub's design system was my most recent focus, but during my tenure at SDC, I was also the design and UX lead for many high-impact, customer-facing initiatives. A few notable projects I worked on:

* The first iteration of the SmileDirectClub iOS app\* (including research, user flows, testing, and visual design)

* The web interface for SmileDirectClub's partner network, which allows dentists and orthodontist to prescribe SDC's clear aligner treatment to their patients

* A complete overhaul of user flows and visual design for getting started with SmileDirectClub (finding a location and booking a visit or ordering an at-home kit)

> \*As I transitioned into a more DesignOps/design systems-focused role for SDC's replatform, [Chelsea Guerrera](https://www.linkedin.com/in/chelseaguerrera/) took over leading design for the iOS app and did a fantastic job seeing the project through to launch and beyond.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fl12KzU7qOwOmi7ejwVPjDxIGoA02%2FcnCRJqGGFLj3DOWVaqb1%2Fb673b102-fc63-4c90-8d61-fdf50075d4c5.png?alt=media&token=9d6ab4c8-8259-4be6-9fd3-2420a10e814b","id":"b673b102-fc63-4c90-8d61-fdf50075d4c5","width":1868,"height":1401,"filename":"sdc-partner-portal.png","type":"image/png","caption":"A small selection of screens I designed for SmileDirectClub's partner network","border":false}]}
```

While it's impossible to articulate my every contribution, as the second member of our team (under the fabulously talented [Bryan Kemp](https://www.linkedin.com/in/bryan-kemp-a1472224/)) I played a key role in shaping the growth and culture of the team and had a huge impact on setting quality standards for UX design at SmileDirectClub.

Case Study: SmileDirectClub

Product Design / Systems

BFA in Graphic Design with a Minor in Interactive Design

A little set of music player UI icons for the Figma community.

🎵 Music Player Icons

A small Figma plugin that resizes an item to fit its parent’s width, height, or both.

Fitter

A tool to help you calculate perfect grids

Grid Finder

A simple, fast aspect ratio/proportion calculator

Ratio Calculator

· Brand identity design
· Web design
· Art direction 
· Concept development
· Asset creation
· Promotional campaign strategy/design
· Print collateral design
· Illustration

Graphic Designer

As a product designer at LeanKit, I helped create, iterate, and implement a design system for the LeanKit product. I worked with designers and developers to establish design principles, create visual and interactive patterns for shared components, and clarify user workflows to help people accomplish their goals inside LeanKit. As part of the product strategy team, I also worked with product managers and developers to implement new features, improve existing user experiences, test design iterations with users, and use data to make informed decisions about the product.

Product Designer

🧰 Leading the charge for our design system

🌉 Bridging the gap between design and engineering

🫶 Improving the usability of the design system for designers and engineers

Senior Product Designer

During my time at SmileDirectClub I led several large design initiatives, but my largest contribution was leading the creation of SmileDirectClub's design system from the ground up for use during their huge replatforming effort (currently underway). Aside from leading the visual design of the system, I also created and organized Figma components and library files that were available for designers to use across the organization. I worked closely with my developer counterpart to ensure that every component that was represented in our Figma libraries was mirrored in our production code environment. I also documented design and usage guidelines for components, educated other designers on how to use them, and played a major role in defining processes around contributing to and using the design system. This resulted in a tremendous increase in efficiency for both our design AND development teams, plus a better user experience for our customers.

Senior UX Designer

Designer

· Responsive web design
· Ecommerce UI/UX
· Mobile app UI/UX
· Wireframing
· Art direction
· Marketing web page design for specific products & collections
· Icon design
· Illustration

Danny McClain

2023