design system

Running a hack event to test our new component library

FeaturedLeave a comment

The OneWeb team have been building a component library, called Experience Kit (ExpKit).

The aim of ExpKit is to provide a set of reusable components that make development easier for a wide range of teams across the Co-op. This allows engineers to spend their time focusing on solving problems, rather than each team having to build the same components for themselves.

A hack event to test ExpKit

We have collaborated as much as we can whilst developing ExpKit, however there is nothing quite like users trying it out for themselves.

We decided to run a hack event to learn as much as we could. A hack event is a fast-paced event (usually 24 to 48 hours) where people team up to build creative, working prototypes of ideas. It’s all about innovation, collaboration, and having fun while turning concepts into reality.

We saw this as both a user testing opportunity and a way to promote ExpKit. Awareness is important, as the value it provides to the Co-op will scale up based on the number of teams who use it.

Running the event remotely

We ran the event entirely remotely, as not all participants could easily get to Manchester. It lasted a day and a half, with most of the work happening on the first day, and the half day used for planning playbacks and presenting to the rest of the group.

We created Slack channels for each team to use throughout the day.

The brief for teams

We divided people into teams and presented them with a range of challenge briefs to choose from, including:

  • Co-op Cinema
  • Co-op Ladies FC
  • Co-op Travel

We wanted challenges that were different from what the Co-op does day-to-day, to spark creativity and make it fun!

Teams needed to use ExpKit to solve their challenges, taking notes of what worked well and what didn’t along the way.

Designing and building

Teams used a variety of planning techniques to get started. It was up to each team how they wanted to work, but most split into sub-teams (for example, design and engineering) and checked in with each other regularly.

Some teams wireframed ideas early on, then created more high-fidelity designs in Figma. Others jumped straight in and browsed the library to see what was available. Approaches varied across browser and mobile websites.

We also saw AI being used to quickly create supporting content and creative imagery, including one designer’s cat as a Star Wars character!

Once designs were created, engineers built websites and apps using ExpKit components. Teams didn’t need a finished product, it was more important that they had explored a good range of ExpKit components.

Show and tell

On the second day, teams had time to finalise their work and prepare for the show and tell.

Each team had 5 to 10 minutes to share their process, from ideation and wireframing to design and demoing the final result.

Examples of the final results

Click each image to zoom in.

Screenshot of the website created by team 5 a travel website search results page with filters
Screenshot of the final website by team 4 a cinema listings website showing a list of the latest films showing
Screenshot of the final website by team 3 a womens football team website called Pioneers FC with team fixtures, results and merchandise
Screenshot of the final website by team 2 a travel website homepage with search, filers and offers on screen
Screenshot of the final website by team 1 a travel website homepage with search, filers, offers and benefits on screen

Highlights from the day

It was really encouraging to see how quickly the teams could go from an idea to having something built using ExpKit components. We even had a couple of platform engineers comment on how easy they found using ExpKit.

There was great collaboration across teams and disciplines, a lot of people meeting for the first time. Teams quickly formed smaller design and engineering groups to split the work up. This proved to be efficient, resulting in detailed designs and realistic demos.

Feedback was incredibly constructive and gave us a clear idea of what to improve ahead of releasing v1 in 2026.

Areas for improvement

Some teams ran into issues with more complex components, which showed that our documentation needs more work.

Granular styling (such as font sizing and padding) was a consistent pain point, with teams wanting to see more freedom on how components could be used and customised. Therefore, we’ll be working on balancing constraint and flexibility moving forward.

What’s next?

We received lots of feedback, which we’ll work through as a team, as well as continuing to add new components. This will be supported by our working group of designers and engineers.

Some of it will be actioned in Q4 2025 as we aim to launch the first version of ExpKit in Q1 2026.

Other feedback will feed into our roadmap beyond the initial release. The end goal for ExpKit is to move to a contribution model where all teams can build their own components and submit them to ExpKit.

Blog post by: Sophie Newbery, Omid Kashan and Lee Connolly
Facilitators: Lee Connolly, Omid Kashan, Theo Kouzelis, Catia Costa, Kamini Pagare
Team 1: James Martin, Austin Cameron, Aida Tahirbegovic, Joao Ribeiro, Sam Foster
Team 2: Hwa Cheung, Sophie Newbery, Craig McKay, Henry Russell, Rex Shum
Team 3: Matt Tyas, Michelle May, Saiprasad Bane, Henrique Marcuzzo, Pippa Austin
Team 4: Josh Jackson, Lynn Hagan, Aaron Mackay, Hashim Younis, Zeze Pelagie
Team 5: Vicky Ireland, Lucy Wilding, Nickson Thanda, James Tattersall

How our accessibility champions are creating a ‘can do’ culture 

Co-op2 Comments

Over the last 7 years we’ve done a lot to improve our understanding, awareness, and execution of digital accessibility at Co-op.

We set out to tackle 3 problems when we started this journey:

  1. Awareness: We’ve explained what digital accessibility is, why it’s important and how to do it properly.
  2. Process: We’ve made it easier for our teams to put accessibility at the centre of every decision when creating products, services, and communications.
  3. Communication: We’ve made sure people are talking about accessibility across Co-op, not just in the digital space.

There’s been one constant in all our work – a group of passionate people committed to making our digital products and services accessible to everyone.

These people have become the accessibility champions.

Helping to lead digital accessibility 

As accessibility champions we help to lead digital accessibility in Co-op by empowering and supporting our colleagues through training, advice, and face to face support.

It’s easier to make changes to products and processes when you have people willing to put the hours in to make things happen. And people willing to talk all day about accessibility to keep the conversation going.

There are 6 of us from different disciplines in design, research, content, operations, engineering, and delivery. We also represent our many product teams in Food, Funeralcare, Insurance, Life Services and Membership.

Two of Co-op's accessibility champions chatting and smiling together as they look at their laptops in the office.

This breadth of skill and knowledge means we’re able to face challenges together and make a bigger impact in our Customer Product teams and beyond.

How we work  

We work in different product teams, but we feel a strong sense of belonging to the accessibility champions team too.

We wanted a structure, a purpose and clear objectives to give us a stronger focus for persuading people to take accessibility seriously.

So, we created a: 

  • Mission: to empower and support colleagues to create digital products, services, and communications for everyone, whatever their needs
  • Vision: to create a culture where accessibility is at the centre of everything we do at Co-op

We get together every 2 weeks to chat through how we’re doing against our objectives and tick off tasks on our Kanban board.  

This meeting also doubles up as a drop-in session where we invite colleagues to share their accessibility issues and ask for advice.

One of our objectives is to work more in the open and spread the word about the work we’ve been doing. We’ve provided more regular updates at All Design sessions and show and tells.

We also regularly post in our accessibility Slack channel about things we’ve learned or problems we’re trying to solve.

No longer a ‘side of the desk’ job 

Our Design and Digital leadership team support our efforts. They understand how important it is to remove barriers for our colleagues, customers and people thinking about choosing Co-op.

This year, one of our wider Digital Technology team objectives is to focus on accessibility. It’s given us an opportunity to move away from accessibility as a ‘side of the desk’ role. It’s allowed us to focus on the bigger tasks that were harder to finish.

We now have 3 days every 3 months to focus solely on accessibility as a team of champions. It’s helped us achieve more in the last 6 months than we have in years.

Our achievements

Introduced accessibility levels of responsibility

We’ve created 3 levels of responsibility for accessibility: 

  • Everyone in the Customer Products team – accessibility is everyone’s responsibility
  • Accessibility advocates – the voice for accessibility in a product team
  • Accessibility champions – help to lead digital accessibility in Co-op by empowering and supporting others

These levels outline what our colleagues should be doing to raise awareness and help improve our products and services. Before, this wasn’t clearly articulated so people found it difficult to know what was expected in their day-to-day roles.

Created an ‘accessibility advocate’ role and a learning journey

We recognised that some people wanted to do more for accessibility and be recognised for going beyond expectations.

Accessibility advocates are the bridge between product teams and accessibility champions. They have the knowledge of their product and work with accessibility champions to push for improvements in their teams.

We created a learning journey to better signpost advocates to resources that would improve their knowledge. We’ve also been helping them test issues with the product or service they’re working on, and have run peer support sessions on how to use assistive tech.

A Trello board showing Co-op's accessibility learning journey which details the different stages colleagues must go through to become accessibility advocates and accessibility champions.

It’s still a work in progress and we’re getting great feedback about how we can improve our approach. Having more advocates is central to us achieving our mission.

Improved our training session and materials 

One of our biggest successes is the accessibility training sessions we run once a month. As accessibility champions we pair up to facilitate sessions for digital colleagues.

Over the last year 46 people from Marketing, Comms, Data, and other departments across Co-op have attended.

The format of these sessions has largely been the same for the last 5 years, so we felt it was time for an overhaul of the content.

Originally named ‘Leaky flour training’ to entice people into attending, we recognised that this was not an accessible title and was putting many people off. So, we changed to ‘Digital accessibility awareness training’ and interest massively increased.

We’ve also banned the use of the term ‘a11y’ in our training materials and resources. Despite it being a widely recognised shortened version of ‘accessibility’, we felt it was not accessible for people who had limited knowledge.

Speaking internally and externally about our work 

We’re keen to share our learnings both in and outside Co-op. We spoke at our in-person internal Digital, Technology and Data conference attended by hundreds of Co-op colleagues. 

We also presented to teams at Citizens Advice and KPMG, exchanging knowledge and experiences.

What we’ve learned

We’ll never finish ‘doing accessibility’. We’re constantly learning and changing our processes to meet the needs of our customers, colleagues, and businesses. It’s still a battle to make sure accessibility is prioritised, especially when each of our businesses has its own roadmap of new initiatives.

The accessibility section on Co-op’s Experience Library is a valuable resource in educating people. But it’s far more powerful to show colleagues and stakeholders the real impact of people struggling to use our products through video clips and user research sessions. 

Fable, a provider of user research and accessibility testing, gives us access to a community of disabled people with various access needs who use different types of assistive technology. This has transformed our design and delivery process and made it much easier to test our ideas, prototypes, and live websites.

A screenshot of the Fable testing dashboard showing a self-guided task on the Funeralcare website. It shows an accessibility usability score of 100.

We can achieve so much more with leaders who advocate for accessibility and allow us extra time to focus on tasks.  

If you’re surrounded by passionate people, it makes the extra work enjoyable. We’re tackling it together, not alone.

Hannah France
Antonia Duffin 
Michelle May 
Phil Wolstenholme 
Phoebe Quayle 
Rachel Machin
Accessibility champions 

How our users influenced our new forms guidance

Co-op

The Experience Foundations team recently updated our guidance on forms in our Experience Library.

Diagram of a web form with markers showing where different form elements are place and what they do

Originally, this piece of work was about making sure we included all the components we knew our community needed. But as we got further into the research, we found our community needed guidance on aspects we hadn’t considered.

In the Co-op Customer Products team, we value having the autonomy to be flexible and divert from a plan when we need to. So, with the aim of meeting newly-discovered user needs, we pivoted our work.

A recap: the importance of familiarity in design

Co-op has many business areas and many products and services within them. In most, there’ll be at least one form that, for example, asks a customer for personal details to register for something, or asks for a customer’s payment details so they can buy something. Although our business areas are diverse, it’s important that all of them use a common design language to create familiarity. This means that interactions work in the same way in each service and each one feels like it belongs to Co-op. This helps us build trust with our users.

Starting with research

As always, we started with research. This involved one-to-one conversations with colleagues from a wide range of teams and disciplines to better understand their needs. The conversations helped shape our focus and we ended up with a list of form components that our community needed. Our goal was to design, build and release these components into the Experience Library.

New information = new direction

However, during the conversations, a new theme emerged around the structure and layout of forms.

Although our original research didn’t highlight this as an area of need, feedback from newer members of the community made it clear that this was important but there was ambiguity.

Some of the questions they asked included:

  • What spacing should I use between field sets, labels and buttons?
  • Is it better to use single or double columns for laying out forms?
  • Where should I position buttons?
  • How should I show optional or required fields?

We realised our community needed more than form components and guidance on when and how to use forms – it needed guidance on designing single or multi-page forms from the ground up.

Getting a deeper understanding of the problem

The outcome we were aiming for was for all design colleagues to be comfortable and confident setting up forms for the products and services they look after. So we needed to understand the practices that already existed, and also what change was needed.

Here are 4 things we did to deepen our understanding.

1. Carried out user research

We facilitated conversations with newer members of the design community. We asked questions like:

  • When designing a form, what did you feel unsure about?
  • What guidance did you expect to find in the Experience Library for designing a form?
  • Is there anything else you feel would have helped you in designing a form?

These open questions helped us understand which areas needed clear guidance.

2. Reviewed Co-op forms

When we started the forms work, we reviewed forms across Co-op products and services. We went back to the analysis we did but this time we focused on layout and structure and therefore the usability rather than individual components.

This helped identify variations in form design across Co-op.

3. Analysed other design systems

We looked at the guidance other design systems had on form design. An important take-away was how some design systems used visuals to explain guidance.

4. Revisited best practice

We revisited forms specialists Caroline Jarrett and Adam Silver’s work on forms and considered how it applies to our form design at Co-op.

Designing the ‘Form design’ page

Content designers and interaction designers worked together to define the topics that our guidance should cover. We had some difficult conversations to help us understand different takes on the same topic and often challenged each other’s view. Referring back to the insights allowed the team to have those difficult conversations. We reflected on different perspectives and continually iterated on the content. Through this process we were able to define our stance on things like button positioning. Once we were aligned, we added detail and referenced the insights we’d found in the research.

We also found the need to visualise some of our guidance. For this, we defined a visual language that can be used on diagrams in the future.

Diagram showing how a form in one column is easier to use than a form in 2 columns

We shared early versions of the page with people from the Design, Product and Engineering communities to review. We value different perspectives, and want others to contribute to our work. By designing in the open, our community sees our approach, which helps build trust. Showing them the depth of our process encourages buy-in and the early feedback in the reviews was positive.

A ‘people-first’ design system

Our new Form design page wouldn’t exist without the feedback from our community. We designed it for them, based on conversations we had with them. Delivering guidance that meets their needs shows that we’re listening, we’re collaborative and this builds trust with our colleagues. Our work is less about a page in a design system, and more about the people that use it. We’ll keep listening and iterate when we need to. Like the rest of the Experience Library, this page will evolve with our community’s needs.

Imran Afzal, Lead Designer