Co-op Experience

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

How and why we redefined our purpose at Co-op Experience

Co-op

We recently reorganised our teams and expertise so that people with interconnected, complementary skills could work more closely together. We also became the ‘Co-op Experience’ team. You can read about the details in Adam’s post.  

We now have teams and disciplines working together who didn’t necessarily work together before. Because our structure has changed, it’s more important than ever to be clear on our purpose. By ‘purpose’ we mean why each colleague and team is here, and how we’re all contributing to the overarching Co-op mission: ‘co-operating for a fairer world’.  

Working in the open so we’re all aligned 

At the end of last year, we began a piece of work to articulate our purpose. Putting it into coherent words means there’s no room for misinterpretation and we felt this would help each product team, each decision-maker and each individual move in the same direction. 

If we were in the office more often, we’d make posters and pin them up, but for now we’re publishing our purpose on the blog as an easy-to-reach reminder. 

A purpose for everyone, by everyone

Defining our purpose took several sessions over several weeks, but each step of the process was essential. We started small within the Senior Leadership team (SLT) for practical reasons – it’s much harder to facilitate a workshop with hundreds of people. But, our purpose governs the actions of everyone in the Co-op Experience team, so it was essential to give everyone a chance to feed into it. The best way to help everyone unite behind a shared purpose is by sharing a first draft for feedback. 

Here are the steps we took: 

  1. We held a workshop with the SLT within (what was) Digital Product and Design to think about why our team was formed and our role within the wider business. We worked through 3 questions initially which we borrowed from a Hyper Island toolkit: 
  • What is our job as a team? 
  • What’s our goal? How do we know when we’ve done our job? 
  • What benefit are we bringing to the company and the world? 
  1. We then analysed outputs and held several sessions to focus on the things we felt were lacking from the current purpose, and what we’re trying to achieve as a team. We also noted specific words which resonated (more on this below). 
  1. Then we opened things up. We used a slot at our fortnightly All Hands session to talk the wider team through the importance of having a purpose and our thinking so far. We presented an earlier version of our purpose and asked for feedback from (what was) the Digital Product and Design team. 
  1. We iterated again and presented a refined version of the vision back alongside some behaviours we used to bring the purpose to life. 

Choosing our words carefully 

During the workshops, we kept coming back to certain words that stood out as being particularly relevant to us. These were: 

  1. Expertise – we’re pleased to work alongside people with a range of expertise who each play their part in adding value to our customers and the business. (Adam’s post explains our experts’ skillsets).  
  1. Craft – this is closely linked with ‘expertise’ but it’s more about how we create things. We feel this word highlights the skilful and rigorous process behind creating, fine-tuning, optimising, and constantly iterating products, services and experiences.

We wove both words into the wording of our purpose. Here’s where we got to: 

We’re experts who care about the craft of building valuable products and services.  

We partner with experts within Co-op to focus on the outcomes that matter most to create value for our customers, members and communities, and in turn our Co-op. 

Encouraged behaviours tell us how we’ll fulfil our purpose 

While we were working towards articulating our purpose (the ‘what we are here to do’), we found ourselves considering the behaviours we need to encourage – in other words, the culture we need to nourish – to be able to do what we are here to do.  

We ended up with a set of 3.  

  1. Experimentation – we believe that giving people permission to experiment will help us learn more, more quickly and add more value.  
  1. Humility – so that everybody feels comfortable to contribute in a blameless environment.  
  1. Bravery – so that we can continue to support new and traditional business areas adopt practices that will help them thrive.  
Expanding on what we mean by ‘experimentation’, ‘humility’ and ‘bravery’ at Co-op Experience

These behaviours are Co-op Experience team-specific whereas our Ways of being are a set of expected behaviours across the whole of Co-op. 

We’ll revisit our purpose shortly and we won’t shy away from adapting it when we need to. We’ll share the work we’ve been doing on the Co-op Experience strategy shortly.

Lucy Tallon

Head of Design

Co-op Digital is now the ‘Co-op Experience’ team

The group of teams that most people know as Co-op Digital is now called ‘Co-op Experience’. This week, we brought the following interconnected and complementary expertise together under this new umbrella:  

  • Design, Content and Customer Experience (CX) – those who create strategic visions for future Co-op experiences and design journeys that deliver positive outcomes for customers and colleagues 
  • Product – those who align the customer and business strategies to set priorities that drive the outcomes we need to achieve  
  • Delivery – those who craft a culture and environment for a team to deliver better experiences 
  • Search Engine Optimisation (SEO) – those who create the very first interaction our customers have with our products and services 
  • Conversion Rate Optimisation (CRO) – those who carry out experiments within an experience to achieve better outcomes for customers and the business 

The reorganisation will give us more opportunities to work more closely. For example, it will be easier to embed experimentation and measurement from our CRO experts deeper into our product teams; and our Content Design community and SEO specialists have many complementary skills we can explore. Ultimately, our goal is to strengthen the team so we can improve customer, colleague and community experiences. 

We sit within the Digital Technology area of the Co-op and continue to work alongside our engineers in multi-disciplinary teams.

Restructuring to reflect (and enable more) growth 

Co-op Digital was set up back in 2016. Since then, we’ve grown exponentially and it’s been essential to reconsider our structure so that we can continue to grow and maximise the value we deliver in our products and services. As with all organisations, what worked to get us here won’t necessarily take us to where we want to be.  

The thinking behind the changes 

Our team name should indicate what we do. We’re still ‘digital’ in how we work, but the multiple possible interpretations make the term unhelpful.  

Our focus is on outcomes (the overarching aim) rather than outputs (for example, a straight-forward delivery checklist of features). An outcome can be achieved in many ways, and the solution is not always digital.  

Here’s a real example from our Membership team. 

An output is an instruction, such as: add Apple Pay to the Co-op Membership registration flow.  

It doesn’t give us much opportunity to explore how much value it may add. Its success can only be judged whether it was delivered. (It was? Ok, check ✅) 

However, we focused on an outcome. We wanted to: increase conversion by 10% in our Membership registration flow for new, in-store customers.  

The team wasn’t dictated to and instead, it was free to explore different solutions that may have been quicker, cheaper and more impactful than simply adding Apple Pay. 

In this particular case, we delivered the outcome by iterating paper leaflets in-store. The solution did not involve ‘digital’ at all. 

Our work is not bound by screens and apps. Crafting valuable services and positive experiences for our customers, colleagues and communities is the highest priority for this group of teams. This is why ‘Experience’ now better reflects what we’re striving for. 

Adam Warburton

Chief Product Officer