Collaboration Specs.

A flexible design system that allows decisions to be documented and distributed, while retaining the ability to prototype new ideas quickly.

Overview

After some time utilizing our product’s initial version and resulting design system, a redesign required a fresh new system from the ground up.

Goals

Support across more distributed and growing team

Early on, we decided to move from native app Sketch to Figma's online platform. Being able to send a link to everything - even element level work - was a game changer to working together. This was helpful for distributed teams, but no less useful when we worked in the office together.

We also needed to make sure that we could support the need for more communication with external venders and partners. The core elements of our branding was sharable for partnerships and vendors.

Better support new processes within our agile team

  • "Living" documentation for design decisions to be made in broader context of the entire system (new, speculative / in progress designs)

  • Documenting specs for developers to build new features as they are prioritized from backlog

  • Rapid prototyping for new concepts and ideas - before they even became a design to be worked on, this gave us great flexibility, early feedback from customers, and saved tons of time.

Reflect New Brand

Our company had just engaged with a branding organization and provided us with a whole new look and feel that we needed to apply to our app and experiences. All of the new elements were the first things created in the design system.

Consider New Technology

After initial versions of our platform were tested, there was a desire to use this opportunity to rebuild the experience using on new technology. This would change some of our underlying components and I stayed in close and constant communication with our developers to ensure the design would support their team efficiently.

Flexible documentation

We had a design system that worked well enough for prototyping new features and communicating specifications that evolved from Sketch into Figma as our team became more distributed.

Branding, Global Styles and Elements

Utilizing the new brand standards and exploring how they could work together was important before we created the system to document these decisions. When we arrived at our direction on how they would be applied, I went to work creating these standards in Figma. This was accomplished by lots of planning, and ultimately, use of Figma’s features such as color and type variables.

Experience Design

I approached this like any other user experience project. One of the first considerations to ensure success of a design system with all of these requirements, was to plan out how the system would be organized. I worked across our teams to ensure this system would not only work for everyone, but would make everyone's job easier and maximize potential for success and innovation.

Components and Building Blocks

We adopted a version of the Atomic Design System model, which I have used in the past and felt provided a solid foundation to update components flexibly as we evolved.

How-To Guide

Ultimately, the system was rolled out as we went. But when the foundational structures, variable, states and processes were all defined, I provided a How-To file inside of our system as a go-to empowerment tool for a broad view of different areas. The main audience for these areas were Designers, Product Managers, and Engineering. This helped adoption early on, when folks had simple questions on things like: “How do I present this design to a customer?”, and so forth. They could quickly check their guide all while logging into said client meeting, and not be bound by the availability of another team member to answer their question.