Extending brands as design systems

Sounds fancy…

Sounds kinda fancy, but it’s really simple. When companies develop branding, they generally focus on the logo, the color palette, the font combinations. If you’re lucky, maybe the visual designers will put a flashy web site header or landing page example together.

But how should the brand guidelines be applied to the, uh, less glamorous parts of your software?

• What should the humble text input look like? Should it be round and friendly, or square and no-nonsense?
• Should the brand colors be applied to the various types of buttons that exist in the product?
• Are background color and text combinations accessible for people who don’t see well?
• What about people who don’t see at all?

tl;dr

• Four years as a senior product designer — designing, coding, and shipping features at a high-growth start-up
• Six years as a UI developer, helping build an open source React design system from scratch
• Love to write component docs, UX copy, or anything else, really
• Not a jerk
• Check out some of my work

Longer version

I’m a collaborative “designer who codes” with a lot of design systems experience, particularly around accessibility and React. I combine a designer’s eye for pixel perfection with a deep understanding of the tradeoffs involved in translating that pixel-perfect prototype into code.

Product Design

I’m currently a senior product designer at CompanyCam — a thriving start-up in construction tech. I have a passion for creating user-centered solutions that are beautiful and functional. I use Whimsical and Figma as my main design tools, and also have the ability to prototype in code, using HTML/CSS and JavaScript.

I believe that stunning visual design is pretty useless unless it aligns with business goals. I’m adept at working in partnership with product managers and senior leaders to arrive at designs that meet their objectives and can be delivered on time. My background in coding helps me collaborate with developers, engineering managers, and QA to ensure that designs are implemented into code as faithfully as possible.

I’ve conducted numerous user interviews, both with a product manager and solo. I’m an engaged interview participant: I prepare thoroughly, and I make an effort to use the time efficiently and create a welcoming environment for the interviewee. I’ve recently learned Dovetail for transcribing, tagging, and sharing insights from interviews, and I highly recommend it.

UI Development

At Instructure, I was part of a small team that grew Instructure UI from a single component into a mature, highly accessible design system. The CSS and components I contributed to Instructure UI are still used every day by the millions of learners who log into Canvas LMS.

My hybrid designer/developer role bridged the gap between product and engineering: I worked with product designers to bring their Figmas to life as components and embedded with engineers to help them learn to use the library.

Technologies I’ve worked with:

• React / React Native
• Rails
• SVG
• Lottie
• Style Dictionary
• Storybook
• Astro (This site is my first Astro project. Consider me sold.)

Writing

Who said getting an English degree would be a waste of time? Well, a lot of people. But they were wrong! I’m a versatile writer and a good judge of tone. Design system documentation, blog posts and newsletters, UX microcopy, snappy headlines, problem statements for product pitches — wherever I go, I usually end up being the one who steps up to write or edit it.

Not a Jerk

I’m nice to work with. I pride myself on being an enthusiastic, empathetic, and collaborative colleague. I make an effort to be receptive to feedback, and positive and reasonable when obstacles come up.

Cool story, bro

Can we see some actual work? You may, bro.