Gaining clarity on design systems

A couple of weeks ago, I attended Clarity Conference in San Francisco—a conference focusing on design systems and style guides. Design systems are useful for any company with multiple people working on a single project, but at an agency like Alley, a design system proves particularly useful and effective. At Alley, we’re building sites in an ecosystem that is vast and growing; there are always new tools we can use to build websites and new devices users can use to access them. We’re working on producing a system that both helps us build sites more efficiently across a variety of clients and simultaneously improves the efficiency with which clients use their sites—especially in cases where we’re working with or handing off a site to client developers. Having tools to effectively develop for the breadth of that ecosystem is vital. Clarity offered a lot of insight into how we can improve our current systems toward that end.

Clarity is a recent addition to the constant rotation of SF tech conferences and had an air of freshness, excitement, and greater purpose behind it. Most in attendance seemed to already be sold on the conference’s focus—creating a unified system for collaboration, scalability, and production efficiency—so the speakers’ content centered more around implementation.

Speakers included Brad Frost (Atomic Design, Pattern Lab), Miriam Suzanne (Susy), and Richard Danne (co-creator of the original NASA design manual). All speakers touched on attributes of successful design systems and three main qualities connected those examples of system success: Collaboration, ease of maintenance, and practicality.

A collaborative design system succeeds because it is a more comprehensive product that aligns aspects of process with the desired outcome. Design systems shouldn’t involve exclusively design and code; they should involve input from all across the development process. This may include tone and voice guidelines for writing, standards for creating animations, or user experience feedback.

In order to keep track of all the facets of a collaborative system like this, maintainability is a requirement. A design system isn’t an end in itself—it needs to live and breathe alongside product iterations. Making a system easily maintainable will secure the future usefulness of the system.

The system must also be practical and grounded in the real world. A design system should stem from the core offering. It is a categorization and distillation of the product that already exists, not an arbiter of what goes into that product.

Currently, at Alley, we’re using a combination of a prototyping tool developed internally and an open-source living-style guide generator. These tools provide a great starting point for developing code and design patterns. However, the content of Clarity was powerful inspiration to start incorporating and systematizing more of our process in the coming months.