The design system team is part of one web following our overarching vision of:
Coherent and cost-effective user experiences for Co-op.
The design system team provide the solid foundational tools, resources and standards to enable other teams to work fast — with quality baked in from the start.
Design system meet-up
We hold design pattern meet ups every 3 weeks. In this session we ran an exercise to map the process designers would ideally use to contribute.
From experience, I know there are numerous elements and components used across digital products and services that aren’t in the Design System due to lots of different reasons.
This session was held to increase our understanding of how we can encourage and help designers contribute new components or raise awareness of the need to iterate an existing component.
It’s early but the insights from the session will certainly help inform our direction and priorities.
We’ll start small and quick by reviewing and updating the Component lounge Miro board and what it is. We’ll let the design team know when this is done. We also have 1 of 2 new pages that will be published on the Design System website that explain how to contribute and link to the updated Component lounge Miro board.
User journey (Level 2) accessibility testing framework
We have been grouping key accessibility issues into levels based on how likely they are to prevent someone from using something we have made.
Now we are working to put these things into a logical order and a format that we can provide to product teams. The goal is to provide a framework that makes it easy to test for those issues that make our products and services less accessible and even completely inaccessible.
Fixing accessibility issues in the design system components
We’ve also begun to fix some of the accessibility issues raised in our first round of component testing. This week we’ve:
Tweaked our button colours so they are fully compliant to our colour contrast guidelines.
Previously the hover states did not have enough contrast.
We’ve changed them from this:
To this:
Images show hovered button states. Text sizes and any weird formatting are due to embedding of these images in email.
The foundations-buttons component is now at v2.3.0 and the CSS foundations (that the buttons are included in) are now at v6.2.1.
Fixed colour contrast issues on the skip navigation
Skip navigation is used by people who use the keyboard to navigate quickly move to areas of the page avoiding large blocks of links they may otherwise have to manually tab through.
We fixed the colour contrast of this component to make it compliant with our accessibility guidelines.
We changed it from this:
To this:
The skip navigation component is now at v2.2.1.
We increased the tappable areas of the logo — without changing its size
Tap or click areas of interactive elements must be at least 44x44px in most scenarios. Previously the logo was just under at 38x41px.
The foundations-global component is now at v3.2.0 and the CSS foundations (that the global logo styles are included in) are now at v6.2.1.
Researching the developer experience and the structure of our front-end
As the team is looking at some of the current issues flagged by the accessibility audit, we’re also starting to think more longer term to try and shape what the future of the design system looks like.
We’ve identified a few conversations that need to happen with folk in other teams, as well as trying to identify where/when/how the current design system is, and isn’t, being used.
We’re also trying to hone the contribution process to make it easier for designers to suggest new components or enhancements to existing components, as well as looking at standards/guidelines for developers.
What’s next
We’ll be continuing:
- with our work on accessibility
- working on the structure of our front-end
- tidying up our design files
Our roadmap and walls
We’ve revamped our web team walls so you can easily see our strategy, goals and roadmaps for the web platform teams in once place.
Contribution and support
If you need support using the design system, we have a public slack channel #designsystem-support
And if you find any issues or improvements in the coop-frontend you can raise them on Github.
