Design System Documentation

Design System Usage Guide

Project: With an upcoming rebrand that required an update of the design system, my team created a new usage guide amid constraints of time, volume of existing content that would need to be converted, and rebrand guidelines.

Role: With a team of two other designers, I ensured visual and brand alignment across the system by building robust documentation for design system usage, as well as created components and templates.

Deliverables: Usage guide documentation; design system components and templates

Technology Used: Figma, Notion, Asana

The Opportunity

Create a usage guide that ensures consistency across the brand, reduces decision fatigue, and produces consistent application of the design system regardless of the designer creating content.

Constraints

Rebrand Guidelines: The entire org was given the same guidelines from Koto, a design firm. This included recommended type, colors, and photography guidance. The challenge was figuring out how to incorporate that guidance in a way that would allow the system to seamlessly shift from legacy to new.
Volume of Existing Content: An enormous amount of existing program content was created with the legacy design system. The updated design system had to evoke the spirit of the new brand while being similar enough to the legacy system to retain visual resonance for members and be simple for designers to do a 1:1 conversion of vetted visuals.
Time: My team of four had a tight timeline from receiving approval of the direction of the new design system using brand guidelines to releasing the system in time for spring programs to start creating visuals. The design system was tested and finalized in approximately two weeks, and documentation was done in the following two weeks.

Research

Content Audit: I onboarded for this project by reviewing the documentation for the retiring design system. Although already familiar with the design system, a thorough review of the existing documentation allowed me to make educated decisions for alignment and deviation while creating the new design system and usage guide.

Taxonomy: My team saw the redesign as an opportunity to revisit the taxonomy of the existing components. We used FigJam to experiment with what we felt were the most logical arrangements. As a group, we decided to make a change to organize components by amount of content, an idea I had suggested in the brainstorm based on search habits I used personally and observed in others.

Journey Mapping to Outcomes

Reduce Decision Fatigue

Friction: Designers felt that existing guidance could be unclear and put forth too many options, wasting time in needless decision-making.

Outcome: Create guidance that’s clear enough to reduce decision fatigue among designers when creating a large volume of visuals. Decisions should be obvious where possible, while leaving room for creativity.

Clear, Consistent Guidance

Friction: Components were created with an unclear taxonomy and naming system in the previous design system, leaving room for confusion.

Outcome: Name components using the new taxonomy, and use them consistently in tip copy. Tip copy should be clear, concise, and human.

Consistent Application

Friction: The retiring usage guide was housed in Notion, and it was cumbersome to navigate to Notion from Figma to seek guidance. This led to inconsistent use of components within programs.

Outcome: Move the usage guide to Figma and use metadata to simplify, which will enhance use of the guide and, therefore, consistency.

Testing Solutions

Pressure Testing With Slack: When I had questions about a decision in the usage guide, I used a specific Slack channel created for the new design system to ask the team for a consensus judgment, after presenting my reasoning and thoughts.

User Testing: All components and guidance were tested by other designers using a set process and schedule to keep the project moving forward. All bugs were reactively fixed by my team, and all suggestions for improvement were considered and implemented as necessary.

Outcome: Reduce Decision Fatigue

Converting Design Systems: I saw the need for reduced decision fatigue when considering the project of converting existing content to the new design system. To be able to scale quickly, I had to create guidance that would allow for quick decisions from a practical standpoint, but still showcase the new brand principles.

Outcome: Clear, Consistent Guidance

A New Taxonomy: My team named existing and new components using the predefined taxonomy that grouped by type of use and amount of content. I clarified the organization of the new taxonomy within the usage guide and added tip copy to provide clear instruction.

Improvement: Tip Copy

I worked with my teammates to ensure consistent use of identified component names to avoid unnecessary confusion. The language was clear, concise, and human in alignment with the overall brand and to be most effective.

Outcome: Consistent Application

Native Format and Consistent Usage: We housed the usage guide in Figma instead of Notion to keep it within the native format of the design system for minimal friction while working, to allow testing when adjusting components to see how changes would affect templates, and to gather the materials into a single place for general ease. We also added instructions directly to components in Figma to allow for more consistent component usage.

Improvement: Use of Metadata

Metadata was used in two ways: to provide clear instruction and to improve icon search.

Provide clear instruction: I added copy using the same tone and voice guidelines as tip copy in the usage guide to metadata in the design system components themselves with simple instruction on how to use each component. This sped up design, but also created greater consistency in the use of components because the instructions were obvious.
Improve icon search: I added metadata search tags to all icons used in the design system to improve search and speed up design.

Implementation: A Living Document

From the start, the usage guide team saw this as a living document. The usage guide should work for the team, and we knew that staying agile would allow for the best possible outcome over time.

Business Impact

Simpler Onboarding and Cross-Functional Collaboration

The improvements in the usage guide contribute to easier onboarding for new hires, as well as current designers learning the updated system. They also contribute to simpler cross-functional collaboration, because there is a single resource to refer to for decision-making.

Cost Savings With Saved Time

By thoughtfully creating a usage guide that requires minimal effort to convert visuals from the retiring system to the new system, designers will spend less time adapting those programs. Therefore, this work resulted in substantial future cost savings for the company.