SOLVE DESIGN SYSTEM

Design system shock

Developing a comprehensive, organized, and easy-to-use design system. From scratch/chaos.

The Problem: Lots of stuff, lots of looking

The Solve platform was designed and developed under a tight timeline, requiring the creation of a lot of styles and assets — and leaving little time to develop a thorough, intuitive design system. It was, to be frank, kind of a mess. It was workable as a single designer, but as additional designers joined the team (and started asking where this or that component is), it became clear that we (I) needed to take a step back and get organized.

A comprehensive design system

We had designed a ton of stuff, and the first task was to collect, organize, and refine. This gave me an opportunity to revise some of the tiny design details that had been bugging me, but also to ensure we had a robust set of styles and assets for designers to use going forward.

The design system encompasses everything from basic color and type styles, to individual components such as icons and tags, all the way up to more complex assets such as header lockups, sidebars, and cards. (I found Brad Frost’s Atomic Design Methodology extremely helpful in thinking through the structure of a design system.)

Organized

The design system was published as a library (457 components and 92 styles(!)), making it easy for new designers to access everything they need, quickly. I followed Figma's organizational best practices, which resulted in a clear, intuitive design system that’s built for Figma’s interface (and not overly reliant on using slashes/for/component/organization).

Connected

The design system is built so that changes to key elements are automatically updated (and consistent) across all designs and components — and even across files.

Easy-to-use

Components are named, built, and organized to make it easy to find and swap out related components. This makes it easier to rapidly iterate and experiment, and minimizes the time spent manually editing components ad infinitum.

Automatic

Figma’s auto layout feature had just been introduced, so I built components to take advantage of its capabilities. It took more time in the upfront creation of the components, but it will (hopefully) save a ton of time for designers using the system. (It was hard not to think about how much time I would have saved had the feature been available during my first go-around. 🙃)

Less questions = Success

I’ll be honest — I was nervous the first time I handed off the design system to our Interaction Designer. But, to my great relief, he said he found it clear and useful, and that he had an easy time finding the components he needed. I took his word with a grain of salt (he's very polite!), but my real feeling of success was a decrease in questions about using the right style, or where the latest component is, or where to find a certain icon. To be sure, some of this is due to more familiarity and comfort with the system, but there was a certain comfort in knowing I had set the team up with something that helped them get their work done faster and easier.