digital

Taking a content design approach to how AI could help our colleagues

Co-op
A colleague in a Co-op store is standing in the aisle of a store holding a small handheld device. She is inputting information into the handheld device. There are jars of jam and containers of coffee on the shelves behind her.


Our ‘How do I’ (HDI) website was created by content designers pair-writing with store and operational colleagues. The aim was to provide operational policy information, in a way that was easy to understand, in a busy store environment.

Store colleagues rely on ‘How Do I’ to comply with legal regulations and maintain high standards of customer service. Colleagues tell us it’s useful, but difficult to find some information quickly. Our Content Design and Data Science teams worked together to test how using generative artificial intelligence (AI) and a large language model (LLM) could help.

It proved to be a great opportunity to learn from how content designers can work with teams who want to make the most of AI capability.

Taking a content design approach

As a Content Design team at Co-op, we create content that is evidence-based, user-focussed, and based on shared standards to meet our commercial goals. We want to keep these content design principles at the centre of our approach to AI generated content.

The teams designed a process that combined a Co-op built AI and a Microsoft LLM. It means that when a user enters a query, a Co-op built AI system looks at a copy of our ‘How do I’ website and finds the information that is most likely to be relevant. It takes this data and the original question, and feeds it all to a Microsoft LLM. The LLM then generates a response and passes it back to the user as an answer.

How the AI works

There are a number of illustrations to show a process of how the AI works in steps. Illustration 1: hands using a phone: Colleague types a question into AI HDI Illustration 2: a screen with a magnifying glass and options: AI search engine looks up relevant information. from HDI. Keyword and semantic search. Passes the question and relevant info to LLM Illustration 3: Letters LLM in a file: LLM generates a response and sends it back to the AI Illustration 4: Mobile showing a list :Answer is provided to colleague

All of the content on the ‘How Do I’ (HDI) website was created and designed according to content design principles. As a result of the way LLMs work, without content design expertise, LLMs generate new content that is not subject to the same rigorous user-focussed design processes.

We needed to test how the AI was working to make sure it does not give misleading, unclear or inaccurate information. We analysed search data and worked with colleagues to identify the common queries they search for. This helped us to build an extensive list of test questions covering a wide range of operational, legal and safety related themes.

Testing and analysing the AI responses

When we tested the AI system with questions, we used the language our colleagues used. We asked simple questions and complex questions. We included spelling mistakes and abbreviations, then we analysed the AI system responses.

We took a content design approach and used our content guidelines to assess the responses. Validating the accuracy of responses included fact checking against the original ‘How Do I’ content to understand whether the AI had missed or misinterpreted anything.

We used this analysis to create a number of recommendations for how to improve the content of the AI responses.

Accuracy

Almost all the AI system responses provided information that was relevant to the question. But analysis showed it sometimes gave incorrect, incomplete or potentially misleading information. ‘How do I’ contains a lot of safety guidance, so to avoid risk for our colleagues, customers and business, we needed to make sure that any responses are always 100% accurate.

Accessibility

The initial AI system responses were hard to read because they were stripped of their original content design formatting and layout. Some of the responses also used language that sounded conversational, but added a lot of unnecessary words. LLMs tend towards conversational responses, which can result in content that is not accessible. It does not always get the user to the information they need in the simplest way.

Language

The AI did not always understand some of our colleague vocabulary. For example, it struggled to understand the difference between ‘change’ meaning loose coins, and ‘change’ meaning to change something. It did not understand that ‘MyWork’ referred to a Co-op colleague app. This meant it sometimes could not give relevant answers to some of our questions.

Using content design to improve the AI

Our Content Design team is now working with our data science team to explore how we can improve the AI system’s responses. We’re aiming to improve its accuracy, the language the AI uses, and reduce unnecessary dialogue that distracts from the factual answers. We’re also exploring how we can improve the formatting and sequencing of the AI responses.

This collaborative approach is helping us to get the most out of the technology, and making sure it is delivering high quality, accessible content that meets our users needs.

Based on the content design recommendations, our data science team have made changes to instructions that alter parameters for the AI, which is also known as ‘prompt engineering’. This affects the way the AI system breaks down and reformats information. We’re experimenting with how much freedom the AI has to interpret the source material and we’re already seeing huge improvements to the accuracy, formatting and accessibility of the responses.

Impact of the innovation of this AI work

“The ‘How Do I’ project has been hugely innovative for the Co-op. Not only in the use of the cutting edge technology, but also in the close cross-business collaboration we needed to find new solutions to the interesting new problems associated with generative AI. We’ve worked closely with Joe Wheatley and the Customer Products team, as well as colleagues in our Software Development, Data Architecture and Store Operations teams. We’ve been able to combine skills, experience and knowledge from a wide range of business areas and backgrounds to build a pioneering new product designed with the needs of store colleagues at its core.”

Joe Wretham, Senior Data Scientist

The future of AI and content design

AI has so many possible applications and its been exciting to explore them. This test work has also shown the critical role content design has in making sure we are designing for our users. AI can create content that is appears to make sense and is natural sounding, but the content needs to help users understand what they need to do next, quickly and easily.

Content designers understand users and their needs. This means understanding their motivations, the challenges they face, their environment, and the language they use. The testing we’ve done with the ‘How do I’ AI system shows that AI cannot do this alone, but when AI is combined with content design expertise, there are much better outcomes for the user and for commercial goals.

The content design team at Co-op have been exploring how they can balance current content design responsibilities with exploring skills and new areas for development in AI.

Blog by Joe Wheatley

Find out more about topics in this blog:

Bringing teams closer together with a service jam

Co-op

Members of our design team came together to run a service jam for our design, product and delivery teams. The service jam brought people from different teams closer together, encouraged experimenting with varied design methodologies and sparked energy, creativity and cooperation.

Why we ran a service jam

We’ve been working hybrid for a while now with less in-person contact across our teams. We know that a great way to get to know people is by collaborating. We wanted to give everyone the opportunity to connect with people in the same physical space and work with colleagues they do not usually get to work with.

Planning the jam

Over the course of a few months, a core team of organisers met weekly to plan and discuss the service jam day.

We agreed that we wanted the jam to bring people closer together and spark creativity. We wanted the jam to be on a topic that was not connected to our day-to-day work. This year, Co-op has been supporting Barnardos, our charity partner, with initiatives aimed at improving the lives of young people. This felt like a good problem and theme to think about for the service jam, so we decided to explore new service ideas for young people.

We also organised:

  • a venue away from our usual working space
  • presentations from subject matter experts
  • a service jam logo and branded slidedeck
  • supplies – paper, cardboard, scissors, glue
  • catering

The jam’s structure

We had 7 teams of 7 people on the day and we mixed the groups to make sure that they had a mix of interaction, content, service, product and delivery skills in them.

To give the event structure, the jam followed the classic double diamond design process:

  • discover
  • define
  • develop
  • deliver

For the initial discover section, we invited speakers from Barnardos and Co-op’s Community team to share the challenges facing young people today and the initiatives they already have in place. This helped ground the design sprint and give context.

For each stage of the design process, the facilitators gave a short introduction of the aim, different approaches or techniques they could use, and then gave teams time to discuss and work through it.

How it went

Teams were really engaged with the day and there was a lot of fun and energy in the room. Although it was a serious theme that posed some difficult challenges, the service jam allowed people to explore different ideas and develop them in a creative way.

At the end of the day, each team presented their ideas back to the room. Ideas included a mentoring scheme where people could choose their mentor, a scheme to transform brownfield spaces, and a career development programme to share skills.

The presentations were brilliant and showcased the different skills we have across the wider team.

What we learned

At the end of the day we asked for feedback from attendees. The organisers also ran a retro afterwards to identify what went well, not so well and what we have learned.

We learned that:

  • we could have been clearer that the day was about bringing people together rather than creating deliverable solutions to the problem
  • a materials checklist would have made it easier to be more organised just before the day
  • our teams are so creative and positive and did not need much support during the activities
  • an on-screen visible timer for activities was helpful
  • we could have found a way for some of the facilitators to be more involved as participants

What next

The day was a huge success. It generated lots of energy, creativity and excitement for the whole design team. We’re now planning a new service jam challenge for the Co-op Digital Technology and Data Conference so that our wider Co-op colleagues can have the same experience.

Blog by Lynn Hagan, Lead UX Designer – with special thanks to Helen Lawson, Lead Content Designer, and Jack Fletcher, Lead Service Designer.

Core service jam team organisers: Jess Armson, Antonia Duffin, Jack Fletcher, Lynn Hagan, Suhail Hussain, Helen Lawson, Steph Parkinson, Matt Tyas

More information on topics in this blog post:  

Service jam at the Co-op conference (internal Co-op colleagues)

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 user-centred design reduces risk for colleagues and our Co-op 

Matt Tyas

We’ve followed the Horizon Post Office scandal with empathy for everyone that it has impacted and is still affecting. It’s clear that the postmasters and their families were failed on many levels and we cannot address them all here.   

Looking at it from a digital technology perspective, it shows how important it is to build systems using user-centred design. Working in a user-centred way plays a valuable part in designing the right solutions for colleagues and customers. Listening to them, and questioning technology and processes, provides confidence that you are meeting their needs. It also mitigates the high-level risks and consequences of not testing or having active and open feedback channels. 

How we work in product teams to understand user needs  

User-centred design is based on understanding the tasks users need to perform and the environments they are in. It reduces the potential for us to negatively affect anyone who interacts with the Co-op.

We have specialists within our teams that make sure that our services are user-centred and delivering value to the Co-op. That value could be commercial, or creating efficiencies in how we work. 

Although skills often overlap, each specialism is an important part of a product team. Collaboration between disciplines helps us to consider everything within a user’s experience and design the right solutions. 

User researchers 

User researchers talk to the users of our services and provide insights to help the team make decisions. They empower team members and stakeholders to fully understand user needs and build confidence through testing. User researchers also help to identify and mitigate any problems with our services.  

Interaction designers 

Interaction designers are sometimes known as UX (user experience) designers. They help create accessible interfaces and consistent user experiences to solve user problems.  Interaction designers do things like sketching, creating digital prototypes and producing digital designs for a product or service.

Content designers 

Content designers create and organise information in the clearest way to help users complete tasks. They work closely with user researchers, interaction designers and engineers to make sure the content is accessible and easy to understand. 

Service designers 

Service designers design the end-to-end journeys of our services. They help teams to think about all channels to help users complete their goals. They align their work with business needs and measurable value. 

Product managers  

Product managers focus on the product vision, providing direction on objectives, strategy, the Co-op’s goals and wider market. They help to assess the value of work, prioritising it into plans that meet the team goals and contribute to sustainable growth.

Product owners  

Product owners translate strategy and objectives into tasks for designers and engineers to enable the team to deliver the product. In smaller product teams the product manager will also perform the duties of the product owner. Both roles work strategically and need to communicate with the team on how to achieve goals.  

Delivery managers 

Delivery managers enable their team to build and iterate user-centred services. They remove obstacles to progress, helping the team to explore better ways of working and deliver outcomes more effectively. 

Engineers 

Engineers craft the code that makes our digital products work for our users. Our engineers build software with users in mind and follow standards to ensure people have the best experience when they use our products. 

Quality coaches 

Quality coaches embed quality into every stage of product development, working with product, design, delivery and engineering specialists. They take a risk-based approach to tackle any problems early and deliver a high quality product or service.

Subject matter experts 

We work closely with the people who do the jobs we’re designing for (or the customers they serve). They are the experts, and we listen to their expertise and experiences, often co-designing solutions with them. 

Supporting teams 

At Co-op we take a service-first approach and the technology teams that support us make sure that our digital products are secure, robust and accurate.  

Why we start small and iterate  

We gradually improve products and services over time, which is sometimes called an ‘agile’ way of working. By using quick cycles of experimentation, learning and releases we can deliver value early and change direction quickly. If we learn something new about our market or spot any problems, we can fix it straight away and build everything else around a solid foundation.  

We define the most important features first, then work on the less important features over time. 

How we test to help us learn and improve  

We test to validate new ideas or create a better solution to an existing service. We use mock-ups, sketches, and other low-fidelity visuals like coded prototypes. By testing early, we can develop onto higher fidelity versions and products with more confidence.  

When we release products early and often, we reduce the risk involved in complex solutions. We also create value for Co-op and our customers or colleagues sooner. We test results consistently to see what’s working and what needs to be better. 

Why we collaborate and empower our team members 

We value collaboration and empowerment across teams. A product team owns their product and should be in full control of making changes to it.   

We collaborate closely with other teams and stakeholders to make sure that we’re considering all the factors that influence a product’s success.  

This means decision making sits closely with the experts of the product and its users, so that we can move quickly and gain the most value from our time. 

How user-centred design helps us avoid mistakes 

We make a minimum version of our work live as soon as we’re sure that it is working for our colleagues and customers. If a simple version is working well and doing what it needs to do, then we can build additional features on top.  

Fixing problems early or before we make something live, also helps us to save time and money. We avoid the expense of making changes on a higher fidelity product later. Most importantly, we minimise exposing our customers and colleagues to systems that impact them negatively or cause them harm. 

At Co-op we always want to do the best we can for our members, customers and colleagues. User-centred design is an important part of making sure we do this for our digital products and services.   

Thank you to the Content Design community and Customer Products team for their collaboration on this post.

Matt Tyas – Head of Design.

More information on topics in this blog post:

How we helped to develop a model for data ethics 

Co-op

It’s important to us that we’re thinking about data ethically and that we’re using data in the right way.  

The speed of technology and artificial intelligence development is also putting data ethics in the spotlight, and it is more important than ever that we measure our progress.  

Co-op were asked by the Open Data Institute (ODI) to review and give feedback on the data ethics Maturity Model. We then used the tool to become the first organisation to independently assess our data ethics maturity and use it to improve our ethical data practice.

How the ODI Data Ethics Maturity Model works 

The model can be used at any stage of an organisation’s data ethics development and is designed to encourage discussions and raise awareness of data ethics. The model covers 6 themes including governance, skills, processes and legal compliance. We use the themes to help identify opportunities to progress through the 5 levels of maturity.  

We worked collaboratively to assess how to use the model 

We decided to take our time to agree: 

  • what we wanted to use the tool for 
  • how to measure our current position 
  • the scores that we wanted to reach 

Our aim was to help drive out opportunities and training needs, and to prioritise activities within the business. We also needed an action plan to increase the data ethics maturity level across the 6 themes. 

We organised workshops with participants from the Data Governance team and input from the Data Ethics Advisory Group. Carrying out the assessment annually meant that we could review actions regularly to make sure we’re making progress. We also shared all the outputs with our senior leaders, the Data Ethics Advisory Group and the ODI. 

We adjusted the model to work at Co-op 

The model is designed to cover all types of organisations, so sometimes the description within the assessment did not align to Co-op. We adjusted the wording so that it was more relevant to us and created some definitions. This will help us to make sure we are consistent when we do the assessment next time. 

Co-op has worked on data ethics for a few years, so we baselined our scores as level 3 – ‘Defined’ initially. We then adjusted it according to the evidence we could provide to support the maturity level with a traffic light system: 

Green
The activity already exists and we have evidence to support the score.
Yellow
We partially meet the criteria and have some evidence to support the score.
Red
The activity does not exist or we do not have evidence to support it.

Our Data Ethics Advisory Group reviewed our scores before we submitted our assessment to the ODI. 

How the model helped us 

The model has helped us to formalise our process and focus our efforts, including: 

  • identifying some quick wins which we have detailed within our action plan 
  • realising that maturity does not have to be at level 5 across all themes 
  • focusing on themes that are higher priority to Co-op  
  • understanding that data ethics is not only the responsibility of the Data Governance team and that we need to develop our relationships with other teams  
  • using the Data Ethics Maturity Model to help Co-op fulfil our mission of being trusted with data 

Tips for carrying out a data ethics assessment  

If you’re thinking about creating a maturity assessment, it’s important to tailor it to help your organisation. The ODI provide help on using the tool but they do not publish scores or certify the results, so it’s about making it work for you. 

It’s OK to adjust the wording within the model so it aligns with your ways of working. You can note down how you’re interpreting the scores, so that you can reflect on your progress later.  

When you score each theme, it’s important to be honest. It will help when you build your action plan. It’s also OK to give yourself a half mark if you’ve only met part of a level within a theme. 

Evidence to support your scores can come in all shapes and sizes, and could include presentation recordings, policies, or meeting packs. If you have little or no evidence to support your score, do not be afraid to reduce it. You can always collect evidence for your next assessment.  

Be realistic when you decide what your desired score should be. We steered away from setting our desired score as level 5 – ‘Optimising’. This helped us to set realistic expectations and grow our data ethics maturity steadily over time. 

Sarah-Jane Moss, Data Governance Manager, Co-op 

Tricia Wheeler, Chair, Data Ethics Advisory Group, Co-op 

Supported by James Maddison, Senior Consultant, ODI 

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

Introducing local.co.uk – Co-op’s new marketplace

Co-op

We’ve recently launched local.co.uk – a marketplace that connects independent businesses to customers across the UK. We’re doing this because we want to give small businesses a fairer way to trade and help make communities across the UK stronger.

We built the service in 13 weeks and we’re proud of what we’ve achieved. But we know it’s far from perfect – there are parts of the service that could be smoother and features that we want to improve and introduce.

We launched it when we did so that we could learn quickly from real users and make the service valuable for them.

We’ve done a lot and learnt a lot.

This video shows how we created local.co.uk (2 minutes 26 seconds) 

Co-op Finder Alpha

benrieveley11 Comments

Co-op-Finder-Alpha
Co-op Finder Alpha – list results view

We’ve made live our Co-op Finder Alpha. Have a look https://alpha.coop.co.uk/finder.

If you’ve ever used our old store locator, you’ll see there are lots of things that aren’t in the new one. There’s a reason for that. We don’t know whether it was useful or not, in fact there’s a lot we don’t know. 

We’ll use our Co-op Finder Alpha to learn more.

We do know a lot of people choose to come to our website to use our store locator to see whether we are open, usually around those times when opening hours in general are not obvious, like Sunday evenings and national holidays.

We also know that the next most common thing customers need, is to know where the nearest Co-op is to a specific location. 

We’ve kept a few obvious elements, like telephone numbers and links to get directions, but other than that we’ve removed anything that we don’t have an evidenced user need for.

There are two opportunities for users to provide feedback on the experience itself and whether the information is correct, through this and further user research we will understand better what needs to be there.

We’ve already learnt a lot and have some solid improvements in the pipeline that we’ll make live shortly.

Our show & tell is part of the coop.co.uk session every Wednesday, 10th Floor, 10.15-10.45 – all colleagues and Council members welcome.

Please let us know what you think.

Ben Rieveley
Product Manager

Finding our way with a Co-op design system

Matt Tyas7 Comments

Last week I received a tweet from some lovely folk out there who had questions on how we design and build things at Co-op.

I realised that a huge proportion of my working year has been devoted to helping create a new design language for the Co-op and I had quite a lot to say on the subject. This therefore, will be the start of series of posts charting how we are tackling prototyping and (more widely) design at the Co-op.

Background

A while ago the focus in the design community shifted from designing pages to designing systems. Using modular, reusable components that together fit any shape or size while retaining usability and brand aesthetic. We weren’t selling paintings anymore. We were creating living systems that must fit a variety of user needs and contexts.

I became aware of this way of thinking from Nicole Sullivan’s much cited article about the ‘Media Object’. She noted that the same design pattern was built many times over using the same code. Repeated many times, by many different developers. The idea that a design pattern could save thousands of lines of code I found interesting. Most noticeably, it turned me into a pattern hunter. Constantly looking for ways to save time, code and create more and more consistency in my designs.

Cut to the present day, and many large companies have adopted (and many open sourced) their design systems. Experts within the design community have evangelised their usage at many industry events. Designers and developers have adopted these practices. And the benefits of this approach have filtered down to our stakeholders. In fact at Co-op, we were doing it a long time before the logo changed.

Reasons why designing this way is good:

  • Every project starts from the same well researched baseline
  • It promotes a few (researched ways) of doing things that are documented
  • All components are shared and can be improved by anyone
  • Designing and building services is faster, cheaper and more consistent for users. As the library of components grows so does our knowledge about their usage
  • It is agile. By being subject to constant testing and iteration (things can and will change over time)
  • Things are allowed to be just functional, in testing or even a bit wrong. As long as they serve a user well at that moment. Things don’t always have to be pretty straight away
  • Because of the above, it allows the flexibility to launch services when we need to and test them in the wild

Challenges we face as a large organisation at the beginning of this journey:

  • Creating an active community with an open dialogue
  • Engagement from graphic design through to (at least) front-end developers
  • Input and iteration based on user testing (and keeping that pipeline flowing)
  • It not feeling like extra work but part of everyone’s day
  • Everyone taking ownership
  • Not having opinion based discussions
  • Designing ‘marketing’ patterns where needs are less clear cut
  • Agreeing on naming conventions
  • Keeping track of everything that gets designed, built and ensuring it is of a high enough quality

Let me tell you where we are now (and answer those questions)

Firstly, we do prototype. We prototype a lot. Very early on we began to translate our colours, logo and typography into HTML and CSS. This was so we could build Co-op branded prototypes quickly and easily. This was the beginning of a Co-op design system. We’ve had a few goes at it, trying this and that. Building things, then rebuilding them in another way to find what worked for us.

Currently, we have a SASS framework. This is the basic code that creates a Co-op look and feel. It can be used as the base for all our projects. We also have a prototyping kit (that imports the above) built on Jekyll. It allows someone with a small amount of basic HTML knowledge to build a simple prototype. It also means we can keep our snippets of HTML and SCSS organised by design pattern. In the world of the web this is all very basic, but the simplicity lowers the bar for entry and will allow us to introduce more and more colleagues to code. Some of our teams will need to prototype by injecting real data, or perhaps build a native app. Whatever they do they can do it from something that is built on standard web technology that will work for everyone.

Screenshot of the current Co-op front end toolkit

The Co-op design system is still growing and maturing. Most recently starting to need to contain other wider guidance on content (writing for the web) and user research. We are starting to understand that as a team creates more and more good design this needs to be worked back in to our base system. When a team feels it is ready, it is up to them to set up a review where we can decide whether it’s time to include their new patterns and code. We’re looking for researched, best practice design patterns that work well for real people. I make the comparison in this article to the way we would code these patterns as it helps me understand the methodology, but really these patterns are about great design. We want to create a Co-op design library that promotes best practice usability throughout all our services.

Secondly, yes. We are on Github. For those who do not know, Git is a technology that allows us to store many versions of an application’s code safely and securely. We’ve been on it for a few years in fact. However, in the last few months I have never seen so many exciting new code repositories popping up. When our products owners are ready to talk about their service, you can bet they will. Right here.

We’ve started on our journey to creating a design system that we are proud of, will never stop changing and, in the future will be open source.

A style guide is an artefact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem. Nathan Curtis

That’s the dream.

Questions, comments, help or jobs at CoopDigital –  I’m happy to say hello and have a brew.

Matt Tyas

What we mean when we say “digital”

4 Comments

At the AGM one of the things I talked about was how digital doesn’t just mean changing the logo on the website and making some apps. ‘Digital’ when done well, means fundamentally redesigning the services we deliver, it means changing the way we work.

Here at the Co-op, when we say ‘digital’ we mean:

“Applying the culture, practices, processes & technologies of the Internet-era to respond to people’s raised expectations.”

Graphic with the text - Applying the culture, practices, processes & technologies of the Internet era to respond to people's raised expectations

Becoming a digital organisation means redesigning your services and your organisation, embracing ways of working that have long been second-nature to the best internet-era businesses.

It’s that simple – and that hard.

Mike Bracken
Chief Digital Officer