top of page
Documenting a Design System: Case Study
I was in charge of building and documenting the design system from the ground up for an American multinational corporation with headquarters in Austin, Texas, the name of which cannot be revealed for privacy reasons.
Role
UX Designer and Researcher
Platforms
Figma
Mural
Zeplin
Duration
1 year (2021-2022)
Deliverables
Guidance Documentation for each component
My Responsibilities
-
Closely collaborated with the Senior UX designer to improve the UI elements to create a framework around it.
-
Developed a structure for the component usage guidelines that contains information on the anatomy, states, types, color, layout, accessibility, and other aspects of the components in Figma.
-
Conducted user research to assess the usability of the components.
Why document a design System?
Deployment of a design system depends on documentation. It gathers usability guidelines to support the delivery of predictable UIs by developers, designers, project managers, and other stakeholders.
Everything from high-level guidelines to individual components is documented in design systems.
Where did we begin?
1. Created a Research Canvas
This research canvas was created with the intention of outlining the key elements that would help in our documentation, such as the research objectives, hypothesis, and methodology for the suggested system.
2. Estimated Story Points
Story points are a unit of measurement for providing an estimate of the overall effort needed to completely implement any item from the product roadmap or any other type of work.
We used the Fibonacci series and assigned no. of days to each pattern to understand the amount of time it would take us on each component. For e.g.
1: 2 days
2: 4 days
3: 6 days
5: 10 days
8: 16 days
13: 26 days
21: 42 days
34: 68 days
We based our decision of assigning the story points to components by evaluating the component's complexity in the style guide system.
Process for each documentation
1. Desk Research
To better comprehend each component, we gathered insights and best practises from dependable sources, and we compiled all of our results in one location. We used Mural to collaborate and keep track of all of our research.
Resources looked at for information:
-
Material Design
-
Carbon Design System
-
​Shopify Polaris
-
Human Interface Guidelines
-
Adobe Spectrum
-
Atlassian Design System
-
Nielsen Norman Group
-
Balsamiq
-
Invisionapp
-
Smashing Magazine
-
uxplanet
-
Medium
2. Best in Class Audit
Using this process, we were able to assess our competitors' websites as well as the top ones on the market to see how they make use of a certain component. After these observations were gathered, we subsequently incorporated them to our guidance examples of dos and don'ts (which are explained later in this case study).
Our competitors:
-
Atlassian
-
Shopify
-
Adobe
-
Microsoft Office
-
Keysight
-
Salesforce
-
Autodesk
In order to acquire insights for each variation, we used both desktop and mobile devices to assess our research in the best in class audit.
3. Gathering components from Library
All of the UI components utilized in the creation of the brand are included in the pattern library, and we created separate documentations for each component to establish a design system.
Documentation Content Outline
NOTE: I'll demonstrate the various steps of our document using multiple components as examples
1. Definition
-
A short, one-line sentence that briefly describes the component.
-
A breakdown of the component's anatomy listing the several elements that it's made up of.
2. Variations
This section lists the different component combinations that can be combined to form a single component set. It includes numerous properties that can be defined to be an instance's values.
3. Specifications
A component's specifications include its dimensions (width and height). These consist of padding, borders, and margins surrounding an element. It is essential to specify minimum and/or maximum values for height and width, which will allow them to change size to fit any specific layout.
4. States
A component's specifications include its dimensions (width and height). These consist of padding, borders, and margins surrounding an element.
It is essential to specify minimum and/or maximum values for height and width, which will allow them to change size to fit any specific layout.
5. Behaviour
The behavior of a component describes what it does with regard to its grid, structure, and breakpoints. Only what the component does in a specific circumstance is described in this part so that the designer can create the design accordingly. Any helpful details regarding the component that are not mentioned up front are explained here with the appropriate justification.
6. Guidance
This section contains multiple sub sections each having a relevant significance to the component's guidance usage.
-
Information regarding the proper requirements for using a specific component that aids the concerned designer in determining whether or not the component can be utilised in that context.
2.​ It is necessary to distinguish between similar types of components in order to choose which to employ when. This section includes definitions, benefits and cons, and information on when to use each.
3.​ Component usage guidance with examples of what to do and what not to do, which
clearly demonstrates how the component should be used and the principles
guiding that implementation.
7. Resources
Referenced and provided links to all the sources we used to compile the research data that was discussed in the document.
Concluding each documentation
The Senior Designer and I, who I closely collaborated with, used to evaluate our process after each component and make adjustments based on anything we felt may have gone differently.
For instance, we didn't decide to include best-in-class audits in our research until we had carefully examined how other websites used their component combinations to determine how we could improve our website's user experience. This also required us to revisit our story points board and include the additional time that we would need to conduct the required research.
bottom of page