Design system team weeknotes issue 6

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

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.

image  of an online whiteboard showing the flow of contribution designers suggested
image  of an online whiteboard showing the flow of contribution designers suggested
Live soon will be a page to show people how to contribute.
Live soon will be a page to show people how to contribute.
Live soon will be a page to show people how to contribute.
We also want to be open about what we’re working on and why it’s important.
We also want to be open about what we’re working on and why it’s important.
We also want to be open about what we’re working on and why it’s important.

User journey (Level 2) accessibility testing framework

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

Tweaked our button colours so they are fully compliant to our colour contrast guidelines.

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

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

The red border illustrates the new tappable size.
The red border illustrates the new tappable size.
The red border illustrates the new tappable size.

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

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

  • with our work on accessibility
  • working on the structure of our front-end
  • tidying up our design files

Our roadmap and walls

Contribution and support

And if you find any issues or improvements in the coop-frontend you can raise them on Github.

Service and interaction design. Product, team management and front-end engineering. matt.tyas.fyi