my role
As senior product designer it was my role to help in reaching a high level of efficiency in the design process, creating a fully customisable design system template. I was responsible to ensure that the system is intuitive, efficient, accessible and effective for the intended use.
goals
• Ensure that the system is scalable and easily-customisable - in order to accommodate brand, product, component and style updates and changes.
• Create a user-friendly design system that is helpful and accessible to all relevant team members, providing access to libraries and assets, and clear contribution best practices.
• Create comprehensive documentation and references for foundational resources, principles, accessibility guides, assets and other resources.
challenges
While researching and planning I recognised several potential challenges to overcome, due to the need for flexibility, customisation, and scalability while maintaining a consistent and functional product. These included:
Customisation vs. Consistency
Challenge: Needs to be customisable for different clients, but achieving a balance between flexibility and maintaining consistent design standards can be tricky to manage.
Solution: Define clear boundaries for customisation (e.g., colour schemes, typography, logo placeholders ) while maintaining key design layouts and functionality to avoid inconsistent interfaces or usability issues.
Responsive Design Challenges
Challenge: Ensuring that the template is fully responsive and adaptable to various devices can be tricky, especially when clients may want different layout or design options.
Solution: Build responsive components and patterns, ensuring flexibility through breakpoints and fluid layouts that scale well. Test the design across different screen sizes to guarantee a seamless experience.
Accessibility and Inclusivity
Challenge: Ensuring the template is accessible to all users, including those with disabilities, can sometimes be overlooked or overruled in favour of design aesthetics or brand identities.
Solution: Educate clients where necessary and always adhere WCAG (Web Content Accessibility Guidelines) for colour contrast, font sizes, keyboard navigation and screen reader compatibility.
foundations
I set up the design system file using variables and tokens, to define styles such as: padding, font-family, font weight, line-height and radii. I defined variables for primary, secondary, neutral and sentiment colours, all which could be easily tweaked or swopped out. I created a type-scale and defined styles for drop shadows and a grid system.
into the details
I built out complex and responsive components, with boolean properties for icons and labels, and all their required states.
I included documentation on best practices for utilising the design system, and collaborated with the developers to ensure all considerations were covered, for example best practices on naming conventions across iOS and Android, and asset requirements.
