Overview
*The contents of this case study are based on professional expertise. Certain details & information have been omitted to protect the privacy & confidentiality of certain persons or organizations.*
Throughout my career I have found that Design Systems are a critical part of establishing unification amongst design & development teams. To stay in control and minimize errors amongst the designers. A well established design system allows for more time spent on designing a user experience and less time thinking about components.
Goal
Maintain a Design System that will be a single source of truth for design styles and components, fluid enough to adjust as needed yet a rigid enough to be a structure for multiple designers to adhere to. This is based on the need to update a brand and create the ability for other brands to seamlessly co-brand with the same structure.
Design Audit
Crucial in determining the state of the existing Design System & Library.
Document the Existing: Gather key screens of the existing product(s) user flows based on user goals, or any login, landing pages, or modals.
Finding Help: Find who can help gather all of the relevant screens needed to perform a full system audit. Developers and support teams may know of gaps or inconsistencies
Identify User Flows: Follow the user flows and take note of all elements that are in use, including colors, text, icons, buttons, patterns and interactions etc.
Sort & Categorize: Take inventory of all components, patterns, and interactions. Collect and categorize these for reference later.
Design Debt
There will be instances of broken or unlinked components, inconsistencies in different designers layouts, and mismatched components from the UI that do not match the system.
These issue's will create design debt and time to discover, document, and relink. This is where "tokens, & variables" come in way handy.
Principles
I defined the guiding common standards and approaches. This is to create alignment and understanding across teams. Keep in mind how these principles will impact the customer and business goals. This helps eliminate confusion and settle any debate over preferences.
Must follow accessibility standards and be inclusive.
Must be consistent and clear.
Responsiveness, design components need to work well across different devices and screen sizes.
Brand alignment, reflect the brand’s visual and verbal identity consistently across all components.
Usability, focus on the needs and behaviors of users to ensure designs are intuitive and easy to use.
Overview
*The contents of this case study are based on professional expertise. Certain details & information have been omitted to protect the privacy & confidentiality of certain persons or organizations.*
Throughout my career I have found that Design Systems are a critical part of establishing unification amongst design & development teams. To stay in control and minimize errors amongst the designers. A well established design system allows for more time spent on designing a user experience and less time thinking about components.
Goal
Maintain a Design System that will be a single source of truth for design styles and components, fluid enough to adjust as needed yet a rigid enough to be a structure for multiple designers to adhere to. This is based on the need to update a brand and create the ability for other brands to seamlessly co-brand with the same structure.
Design Audit
Crucial in determining the state of the existing Design System & Library.
Document the Existing: Gather key screens of the existing product(s) user flows based on user goals, or any login, landing pages, or modals.
Finding Help: Find who can help gather all of the relevant screens needed to perform a full system audit. Developers and support teams may know of gaps or inconsistencies
Identify User Flows: Follow the user flows and take note of all elements that are in use, including colors, text, icons, buttons, patterns and interactions etc.
Sort & Categorize: Take inventory of all components, patterns, and interactions. Collect and categorize these for reference later.
Design Debt
There will be instances of broken or unlinked components, inconsistencies in different designers layouts, and mismatched components from the UI that do not match the system.
These issue's will create design debt and time to discover, document, and relink. This is where "tokens, & variables" come in way handy.
Principles
I defined the guiding common standards and approaches. This is to create alignment and understanding across teams. Keep in mind how these principles will impact the customer and business goals. This helps eliminate confusion and settle any debate over preferences.
Must follow accessibility standards and be inclusive.
Must be consistent and clear.
Responsiveness, design components need to work well across different devices and screen sizes.
Brand alignment, reflect the brand’s visual and verbal identity consistently across all components.
Usability, focus on the needs and behaviors of users to ensure designs are intuitive and easy to use.
Foundations
I define what is necessary for the design system. Use the information and documentation from the design audit to list out the needed components. Styles were derived from the brand guide. I included the following:
Colors
Typography
Icons
Elevations
Grids & Layout
Spacing / Padding / Margins
Patterns
Documentation
Processes
Tokens
Design tokens in Figma provide a centralized and scalable approach to design system management, making it easier to maintain and update your designs. They promote a more collaborative and efficient workflow, allowing designers and developers to work together seamlessly and maintain visual consistency across different platforms and devices.
In Figma, design tokens are created and managed using the Styles panel. Each design token is assigned a specific name and value, which can be easily applied to different design elements across your project. By using design tokens, you can ensure consistency and efficiency throughout your designs, as any changes made to a design token will automatically update all instances where it is used.
Variables
In Figma, variables are reusable values for design properties like colors, typography, and spacing. They allow for dynamic and responsive design elements and make it easier to maintain consistency and collaboration in your designs.
Set the Variables with different tokens allows for a designer to easily update a full UI with a click of a button. Best use case would be for creating a light and dark theme. In this scenario use for theming but also for adding custom co-branded UI's.
Documentation
Figma has some features that were used for design documentation. There is the "used for" option in the panel to leave instructions and how and when to use a component. Figma also has the ability to leave notes that automatically notify the team when changes have been made. The use of notes was the best way for our team to document updates and collaborate together.
