Design system | General Dynamics
Context: When I joined General Dynamics, there was a design system in place that was shared as a PDF. While there was a lot of good content:
it was time-consuming to update;
people weren’t always aware if they were using the latest version; and
there was doubling-up of effort, as components were being created both for the PDF and for Axure prototypes.
To address these issues, I wanted to create the design system in Axure, supported by a shared Axure file that provided all of the design system styles and components as templates for easy reuse. I mocked up a couple of sample pages and pitched the idea to the design manager, who gave the go-ahead.
Design system
Having the latest PDF as a baseline was had a good starting point, so I began by creating a hierarchical structure for the components and transferring content into Axure. This highlighted some inconsistencies in how the components were originally described, including information present in some components but absent in others. While the structure was similar to that in the PDF, Axure enabled easy reuse of elements, and cross-linking between related sections, for example making it easy to provide the same guidance for, and links between, related components. Each component had its own page, setting out elements including:
The purpose of the component
A technical breakdown: sizes, spacing, fonts, etc.
When to use the component, together with a rationale
Links to related and alternative components
Positive examples of use, particularly around wording
Error handling for common errors
Throughout this process I was talking to other designers, getting their feedback, and refining the content and structure, and working with the lead developer to integrate the development team’s feedback on the components.
Design template
In parallel with the design system, I put together an Axure template file containing all the components and styles defined in the design system, as well as common page templates with guides. The goal of this was to make design work faster and more consistent among the designers working on the project.
Outcomes
Taken together, the design system and template:
made prototypes faster and easier to create;
made it easier to make changes to the design system and templated designs; and
strengthened relationships and understanding between the design and development teams.