I advocate design system creation, implementation and development as a key part of the product life-cycle which enables companies to present and deliver a strong and consistent online brand.
Component based design leads to efficient product production which enables new products, features and website pages being released to market at pace. Design systems can help to speed the process of global brand implementation and re-branding should a company require a more contemporary look and feel. Styling changes across multiple websites and app may be required for usability or accessibility changes and these system updates can be implemented quickly and effectively.
A modern design system can also support the process of unifying the visual language of a product suite with a common look and feel that adds to an expanding commercial product range.
My design system methodology is based on the atomic design approach, all design elements are contained within the system and these re-usable elements come together to form components. The components are refined for common use, then the components come together to form design patterns. Grouped design patterns go on to form templates and once populated the templates form pages for individual products. Any design element, component, pattern and template can be styled to suit a required sub-brand as required.
Overall this approach creates a strong visual language for a predictable user experience for the end-user and this gives a consistent brand experience.
Design System Management
A design system management structure is key for system in-house product teams and supplier adoption and use. I’ve authored a design system governance model with documentation for multi team in-house and supplier use.
Understanding the design system structure and how it works to form products is an important step for the design system team and the wider company. This knowledge can then be decimated by the design team to product teams, stakeholders and anyone working on the company systems. New components can be introduced for many reasons including product updates, market changes, product usability and accessibility. Design systems and the related governance model can also help with on-boarding new employees as they can see and understand a brand’s visual language and product structure.
In the below example my work flow provides a clear roadmap for new design components, patterns and design elements creation, modification and usage.
My design system build and management experience includes building a design system from scratch based on company style guides. This process unified existing and new components that engineers were able to identify and build components, patterns and templates from to increase development and product production speed.
I’ve built a design system using Figma libraries for multi-brand design component styling which linked directly to a code snippet library using Storybook. I’ve also used Zeroheight for component and design pattern integration which included component use cases and documentation.
Below is the INTO design system which was available to all product and test teams, marketing and stakeholders giving clear guidance on design system and design element usage.
If you would like to discuss your new design system or how you can take an existing system to the next level get in touch to find out more.