I worked with Medgate to create a consistent design system by working closely with a design lead and developers. The goal was to re-imagine the old components to ensure they match the new look and feel of Medgate, ensure all components are consistent and adhere to same UI guidelines and manage the design documentation to maintain a single source to view components, patterns, and styles.
Approach
The principles of how the design system was shaped:
Consistency: Visual and functional consistency across all components and elements to help users build familiarity with the interface, leading to a more intuitive and user-friendly experience.
Modularity Provide modular and can be easily combined or modified to create new interfaces to promote reusability, making it more efficient to build and maintain the design system.
Scalability: Accommodate the growth of the Medgate app and allow for flexibility to handle new features and changes without compromising overall consistency.
Accessibility: Prioritise accessibility to ensure our design system would be usable by people with disabilities.
Clarity and Simplicity: Keep the design system simple and easy to understand, ditch the unnecessary complexity and prioritise clarity in the documentation approach,
Documentation: Have comprehensive and easily accessible documentation to clearly explain how to use each component, have use cases, edge cases and guidance on implementation.
Flexibility: Ensure that components and styles are flexible enough to adapt to various use cases and contexts.
Design documentation
It’s essential that everyone in the business is aligned on the use and implementation of the design system. Guidelines were provided to give a straightforward explanation of various styles and components and how to use and employ them in designs.
To ensure a consistent visual language, thorough documentation and use cases were provided for the development teams and beyond.
