We’ve updated our forms guidance in our design system

We’ve been quietly working on our forms guidance in our design system. It hasn’t been a quick process because the guidance we’ve added so far is based on research. And this takes time. 

Before we added the guidance, we:

  • looked at the data we had – things like error rate, heatmaps, and where customers appeared to struggle across our digital journeys and components
  • identified each type of component that was being used across Co-op’s digital products and services and considered whether each was necessary
  • identified best practice from different design teams within Co-op, and looked at the great work GDS have published 
  • gathered industry expertise from the likes of Caroline Jarret and Adam Silver
  • invited stakeholders to design crits as a way to check that our forms guidance is specific to us at Co-op

We A/B tested our initial designs across certain journeys, gathered more data as a result, and iterated before adding the designs to our design system. 

The forms guidance we’ve added so far isn’t ‘finished’ (and likely never will be). The roadmap below shows we still have much more to research and design and test, but we’re sharing what we’ve done so far.

Why forms are so important 

Forms are one of the most commonly used design components across our digital products and services at Co-op. From both a customer and a business point of view, they are also an essential part of a service because they allow a transaction to take place. At the simplest level, the user adds information into a form so we can help them complete what they came to coop.co.uk to do – whether that be buy groceries, get an insurance quote, or sign into their Membership account. 

In line with GDPR, we also collect customer and member data through forms and use it to improve services. Having a standardised way to collect data across all digital services makes data more reliable.  

The problem: inconsistency across digital journeys 

Before we began this piece of work there was inconsistency in our form design across the organisation. Design teams were creating forms that worked for their specific service and implementing them – sometimes, there wasn’t consistency within forms in a single service. The form type variations were numerous and the time spent designing each must have amounted to a lot. 

I’m a designer in the Digital Experience team in Co-op Insurance. Our aim is to make it easier to find, buy and manage Co-op insurance online. Part of the user journey to get a quote or buy insurance takes the customer away from a Co-op-managed website and onto our insurance providers’ (we call them ‘partners’) sites. 

When we started our research into forms, we were selling 11 insurance products through 11 different partners. Each partner manages their own online buying experience so there are inconsistencies with customer experience (and this will continue to be the case for a while). The customer journey for each partner looked different, and the functionality of individual components like checkboxes varied too. Considering the huge inconsistencies, we do not think it’s a coincidence that we experience a poor ‘customer struggle score’ (one of our key metrics), an increase in drop-out rates and poor conversion.

Of course, we have no control over our partners’ design decisions but when they designed their pages, we didn’t have thoroughly tested forms guidance to point them towards. I hope we can now use it to start to influence them. We’ve done the hard work and it’s in our partners’ interests to use the guidance to create more seamless, usable customer journeys.  

Impact on our users, customers and members 

When we first posted about the Co-op design system back in 2018, we stated one of the aims was to help create familiarity across our distinct business areas. We said: 

The way we communicate with a customer in a food store is likely to be very different to how we speak to a customer in a funeral home. So it’s likely that our services might feel different. And that’s ok, as long they feel familiar.

A design system lets us create this familiarity. It should lead to a much more unified experience when they interact with different Co-op services.

When something feels familiar to a user, it reduces the cognitive load for them because – consciously or not – they know what to expect. And on some level that’s comforting. 

Accessibility is also a huge consideration. It’s something we’ve been determined to get right so we can use accessible components and patterns in our forms across all our services. It’s not only the ‘right thing to do’, it also lessens frustrations for anyone with access needs and reduces the chances of potential customers going to competitors. We know that 83% of people with access needs limit their shopping to sites they know are barrier-free (source: clickawaypound.com). If someone does not have a positive experience with one business area, they are unlikely to return to another.  

Data-driven design 

We made design decisions based on evidence. 

So for example, we used Session Cam to see heatmaps of where users click, hover and scroll and it showed us that when they were choosing an answer from 2 or more options on a form, many weren’t selecting the button itself – they were selecting the label next to it. (On the left-hand side of the image below shows this). This informed the design of our radio buttons and checkboxes shown on the right-hand side of the image below.

Sometimes, we made assumptions based on other teams’ evidence – and that’s ok. For example, at a crit we agreed to use a border for focus, active and hover states so the user would know which areas were clickable. Then we read this post on from GDS which describes why they ended up removing the grey border from radio buttons and checkboxes. As a result we agreed that the area would remain clickable but only highlight the border at hover state. We tested with our own users to confirm our assumption.

The Design System team are taking it from here

We recently put together an official Design System team who’ll be dedicated to taking this type of work forward. They’ll keep you posted on their progress.

Paul Braddock

UX Designer from Co-op Insurance

We’ve iterated our Ways of working site, and we’ll keep iterating

We’ve started to bring together our design-thinking process and some of the methods our delivery teams use throughout the lifecycle of a product or service. They live here on our Ways of working site, which is part of our design system.

screen shot of the ways of working homepage

At the moment, the site includes 13 methods and they’re grouped like this:

Discover. When we’re finding out what the valuable problems to solve are.

Define. When we’re checking we’ve identified the key metrics and business objectives.

Develop. When we create many initial ideas that could address the problems, metrics and objectives.

Deliver. When our ideas are with the users and situations they were intended for – then we can start the feedback and iterate cycles.

Communicate. Working in the open and sharing our progress with the team, stakeholders and users throughout an entire lifecycle.

We’ve taken the first 4 phases (discover, define, develop and deliver) from the Double Diamond – a design process model with years of proven commercial success. We’ve also included methods under ‘communicate’ because working in the open and sharing our work and decisions with the wider team including stakeholders as we go is central to working on a digital product or service at Co-op. 

wow-2

All methods already have step-by-step on how to use them and we’re gradually adding the following guidance too:

  • when to use it
  • why you would use it
  • who and how many people to involve
  • things you may need
  • tips on running the session

wow-3

Why we brought them all together

The methods included in the site have been – and in some cases are regularly – used across Co-op Digital. The site just brings them together so they sit alongside each other as one big design resource.

Our thinking behind it is that having everything to hand, in one place, will be useful to remind ourselves of the range of activities we can try – it can be easy to forget some even if we’ve used them before.

Giving more people more autonomy

The current content was written for digital teams – not necessarily designers but people with a certain amount of knowledge about how digital teams work.

But we know that the site would be really helpful for teams and stakeholders around the business too, in particular those who:

  • aren’t familiar with digital ways of working
  • are less experienced – or less confident – at facilitating workshops
  • are interested in how design can create a competitive advantage and want to find out more about how they can trial the process

The Digital skills team is doing some work around the most effective way to introduce the ways of working site to the wider business. From there, we’d like to understand how helpful it is, and where we’ll need to iterate. This photo shows a team using the mind mapping, crazy eights and storyboard methods.

photo of 7 people around table in a crit

Another more cultural challenge is how we can create the permission and environments to use this process and methods for anyone should they be interested.

Tell us what you think

We think we’ve made a decent start but it’s not complete – we’ll add to it over time. Our next focus is adding more methods that relate directly to user research. Most of the content was written before lockdown when remote working wasn’t the default so adding guidance for when teams aren’t in the same room might be worthwhile.

We recently held a design crit with the Design team but as always, we welcome wider team or external feedback – use the feedback form on the site.

Ciaran Greene
Interaction designer

How a voice user interface could help our Funeralcare colleagues

Sometimes in organisations – and especially in digital teams – we start a piece of work but for various reasons we don’t roll it out. The work we’re talking about in this post is an example of this and although it looked very much like it had potential to meet our colleagues’ needs, we’re taking a break from it. The work helped us learn what a complex area we were dealing with and how very important it would be to get this absolutely right.  

We may revisit the work in the future. For now, we’re sharing the valuable insights we got from it. 

Co-op Guardian uses Amazon Web Services (AWS) and in August 2019, as part of Amazon’s consultancy package, we decided to explore voice interfaces. We wanted to find out if  Amazon Alexa – their virtual assistant AI (artificial intelligence) – could help us solve a problem on one of our projects. We worked together to see how we could use AI to help our Funeralcare colleagues who embalm the deceased.

This post is about what we did and what we learnt, as well as the problems a voice user interface might fix, and the problems over-reliance on – or careless use of – one might create.

About the embalming process

Some of our Co-op Funeralcare colleagues ‘embalm’ the deceased. Embalming is the process of preparing the deceased by using chemicals to prevent decomposition as well as making sure they look suitable for the funeral or a visit at the funeral home. Many friends and family members feel that seeing their loved one looking restful and dignified brings them peace and helps with the grieving process.

What’s not so great right now

floorplanAt the moment, our embalmers have tablets with their notes and instructions about how to present the deceased. They refer to them throughout the process. But colleagues tell us there are problems with this, for example:

  1. Tablet screens are small and not easy to see from a distance.
  2. Although they’re portable, positioning tablets conveniently close to the embalming table is tricky, and the charging points aren’t always close by.
  3. Wifi can be spotty because embalming suites sometimes have thick walls and ceilings, plus extra insulation to help with careful temperature control.

Perhaps the biggest problem however comes when colleagues need to double check instructions or details and the tablet has timed out. They need to remove their gloves, sign back into the tablet, find the information and replace their gloves. Recent government guidance, plus an internal review, suggests hands-free devices are a good way to avoid unnecessary contact.

Could Alexa help? We had a hunch that she could. Here’s what we did.

Captured possible conversations and created a script

As a starting point, we used what we’d already seen happen in embalming suites during our work on Guardian. We thought about what an embalmer’s thought process might be – what questions they may need to ask and in which order. Based on that, we drafted a script for the sorts of information Alexa might need to be able to give.

photograph of post its up on a wall depicting what alexa and the embalmer might say

But language is complex. There are many nuances. And an understanding of users’ natural language is important to be able to help Alexa win their confidence and 2. accurately identify (‘listen to’) questions and respond.

Turning written words into spoken ones

We pre-loaded questions and responses we knew were integral to an embalming onto a HTML soundboard using Amazon Polly, which can recreate an Alexa-like voice. At this early stage of testing it was better to use the soundboard than to spend time and energy programming Alexa.

laptop_alexa_embalmerWe:

  1. Wrote the content peppered with over-enthusiastic grammar which we knew would prompt Polly to emphasise and give space to important information. For example, “We’re ready to go. From here, you can. ‘Start an embalming’. ‘Review a case’. Or. ‘Ask me what I can do’.
  2. Connected our laptop to an Echo speaker using bluetooth.
  3. Turned the mic off on the Alexa. Told participants that she was in dev mode and asked them to speak as they normally would.
  4. Responded to what they said to Alexa by playing a relevant clip from Polly.

This is a great way of learning because it allowed us to go off script and means we didn’t have to anticipate every interaction.

Over time we’d learn what people actually say rather than second-guessing what they would say. We’d then add the wealth of language to Alexa that would allow for nuance.

Research run-through

One of the reasons for doing this piece of work was to see if we could give time back to embalmers. With this in mind, we did a dummy run with ‘Brenda’ in the photograph below. It helped us to pre-empt and iron out problems with the prototype before putting it in front of them. Fixing the obvious problems meant we could get into the nitty-gritty details in the real thing.

photograph of 'brenda' a outline of a person drawn onto a huge sheet of paper placed on the table for the research dummy run.

During research, we were manually pushing buttons on the soundboard in response to the participants’ conversation (although the embalmers thought the responses were coming from Alexa).

High-level takeaways from the research

Four weeks after we began work, we took our prototype to Co-op Funeralcare Warrington and spent half a day with an embalmer. We found:

  1. The embalmer didn’t have to take her gloves off during the test (cuppa aside ☕).
  2. For the 2 relatively short, straightforward cases we observed with the same embalmer, the voice user interface was both usable and useful. That said, the process can take anywhere from 30 minutes to 3 hours and more complicated or lengthy cases may throw up problems.
  3. The embalmer expected the voice assistant to be able to interpret more than it can at the moment. For example, she asked: “Should the deceased be clean-shaven?” But the information she needed was more complex than “yes” or “no” and instructions had been inputted into a free text box. Research across most projects suggests that if someone can’t get the info they want, they’ll assume the product isn’t fit to give any information at all.

The feedback was positive – yes, early indications showed we were meeting a need.

What we can learn from looking at users’ language

When someone dies, family members tell funeral arrangers how they’d like the deceased to be presented and dressed for the funeral and any visits beforehand. Colleagues fill in ‘special instructions’ – a free text box – in their internal Guardian service.

We looked at the instructions entered in this box across the Guardian service. Our analysis of them drew out 3 interesting areas to consider if we take the piece of work forward.

  1. User-centred language – Rather than collecting data in a structured ‘choose one of the following options’ kind of way, the free text box helps us get a better understanding of the language embalmers naturally use. Although we don’t write the way we speak, we can pick up commonly-used vocabulary. This would help if we wrote dialogue for Alexa.
  2. Common requests – After clothing requests, the data shows that instructions on shaving are the most frequently talked about. Hair can continue to grow after death so embalmers will by default shave the deceased. However, if the deceased had a moustache, embalmers need to know that so they tidy it rather than shave it off. It could be hugely upsetting for the family if the deceased was presented in an unrecognisable way. With this in mind, it would be essential that the AI could accurately pick out these details and make the embalmer aware.
  3. Typical word count – Whilst the majority of instructions were short (mostly between 1 to 5 words) a significant amount were between 35 and 200 words which could become painful to listen to. There would be work around how to accurately collect detailed instructions, in a way that made playing them back concise.

AI can make interactions more convenient

Everything we found at this early stage suggests that designing a voice user interface could make things more convenient for colleagues and further prevent unnecessary contact.

However, because it’s early days, there are lots of unknowns. What happens if multiple people are in the embalming suite and it’s pretty noisy? How do we make sure our designs cater for differing laws in Scotland? When we know the ideal conditions for voice recognition are rarely the same as real life, how do we ensure it works under critical and sensitive conditions?

They’re just for starters.

With a process as serious and sensitive as embalming there’s no such thing as a ‘small’ mistake because any inaccuracies could be devastatingly upsetting to someone already going through a difficult time. Sure, Alexa is clever and there’s so much potential here but there’s a lot more we’d need to know, work on, fix, so that we could make the artificial intelligence part of the product more intelligent.

Tom Walker, Lead user researcher
Jamie Kane, user researcher

Illustrations by Maisie Platts

How to run a design sprint remotely

I’m on the Operational Innovation team which supports store colleagues and empowers them to spend more of their time and energy on customers and members rather than on admin and paperwork. Unsurprisingly, lockdown has affected a lot of work for our teamWe had to pause some trialsand of course we couldn’t do face-to-face user researchBecause we haven’t been able to get what we’d been working on into our users’ hands to validate our assumptions, we’ve had to delay making some decisions. 

Making the most of things with a design sprint 

Thpause on our regular work meant we had an opportunity: suddenly, the team had enough time in their diaries for a design sprint. 

A design sprint usually lasts 5 full working days and involves a small team. The team works together to understand a problem and design a solution. It’s challenging, because each part of the sprint is time-boxed and lasts one day only. The intensity means the pace is super quick but generally, teams keep focus, build momentum and sustain incredible productivity over the short time.  

Design sprints can be really inspiring but our question was, how can we do this well, remotely, with the added anxieties of lockdown? 

We adapted the format 

We knew the usual 5 full days would be impossible. Staring at our screens for 8 hours a day isn’t realistic or fairespecially when some people are caring for elders or children, or they’re keeping things ticking over on other projects. So, we broke the work up into 10 lots of 2-hour chunks and spread these out over 7 daysEven though we all agreed to try a design sprint and make it our biggest work-related focus, we also refused to let it become completely exhausting.  

The activities and stages during the sprint followed the methodology developed at Google. Our sessions focused on: 

  1. Understanding the problem and mapping the user journey. 
  2. Interviews with subject matter experts. 
  3. Sketching ideas using the Crazy 8s technique. 
  4. Critiquing ideas. 
  5. Storyboarding one cohesive idea. 
  6. Feedback from subject matter experts. 
  7. Start prototyping. 
  8. Review and finish prototyping. 
  9. Testing with users. 
  10. Synthesising research. 

Format: things to note 

We had one or 2 sessions each day, depending on what else we had on. On the days with 2 sessions, we scheduled in a 2hour lunch break which felt needed 

Prototyping took around 6 hours (2x 3 hour sessions) rather than the 4 hours we had planned and was pretty tiring, so I’d recommend splitting up the 2 prototyping sessions and spreading them over 2 days 

Organising and setting up the remote research took a couple of hours outside of the group sessions, so if you’re a facilitator or researcher, schedule in the extra time.  

It would have been good to spread the research interviews out over a long morning so we could reflect on our observations together. As it was, it felt like we were cramming all the interviews into that 2hour session 

Preparation and facilitation  

Once the team had given the go-ahead for the sprint, put together a plan that laid out the activities, the timings and the tools needed for each session. I had Annette Joseph and Emily Cowell as co-facilitators who gathered the problem statements and relevant materials beforehand, invited subject matter experts to the relevant sessions, and helped me find users to research with – I couldn’t have done it without them.  

Agree roles and responsibilities from the startAs well as facilitators, it will speed things up if you involve at least one subject matter expert, as well as designers to lead the prototyping and user research. A mixture of skills and experience is really beneficial to a sprint. 

Structure sessions so everybody gets to share. And related: decide how you’re going to interact. For example, will you all respond to open questions, or have cameras on? 

Agree what you’re trying to learn with the prototype and decide the scope of the sprint. It’s easy to be overly ambitious but a design sprint is such a short space of time.  

In our team, a couple of people hadn’t worked in this way before so at the start of each session it was essential to outline how it was going to work, how to use the tools and most importantly, the desired outcome of the next couple of hours. 

I made the basic mistake of not checking what browser user research participants were using which resulted in technical difficulties and a last-minute change of plan. 

Get the whole group to take part in synthesis – so everyone sees all the notes and engages with the learnings. 

Online versus in real life 

Plenty has already been written about the difficulty of facilitating sessions when you can’t read the room. I learned to avoid ‘open discussion’ style sessions, in favour of more structure. I asked participants to take turns to share by reading out the notes they were adding to the whiteboard. 

I also felt that despite getting loads of valuable insights from the research, the team lacked that amazing buzz we usually have when we’ve just observed research in person, and we can’t stop talking about it. Maybe allowing time for team reflection after each interview could go some way to replicating that feeling. 

Online tools 

Digital teams are used to working remotely and although some are more favourable than others, there’s usually a piece of software to help with remote collaboration. Lockdown has probably caused us to experiment with more of it, but use something you’re familiar with so you know it does what you need it to do for sprint sessions.   

Here’s what we used: 

Miro – an online whiteboard 
In the absence of physical whiteboards and sharpies, the team used Miro to write and group post-its simultaneously. There’s also almost infinite space (unlike on our office walls), so we could keep all our notes and maps in one place, everyone could see everything at once because we weren’t in each other’s way, and there was no illegible handwriting. 

Figma – for prototyping  
We normally use Figma so there wasn’t much difference here. 

Microsoft Teams – for video calls and scheduling.  
Again, our usual.  

User Zoom – for user research  
User Zoom is a remote research tool that shows the prototype on the user’s screen and allows us to watch them using it via video. Very different from face-to-face research, and prototype on a device.  

I’d do it again 

Overall, the sprint went well – we went from no knowledge to a validated prototype in 10 sessions, and it didn’t feel like we’d compromised in our learnings or output.  

It was a tiring 2 weeks, but we‘re proud of what we achieved. A remote design sprint is not without its challenges, but I’d be happy to run one again.  

Rachel Hand 
User researcher 

Building trust in the Co-op design system through weekly hacks

The Co-op design system includes design files – and the coded versions of those files – that help us build Co-op’s digital services quickly and to a good standard.
 

It exists so we can create familiarity across Co‑op products and services, from arranging a funeral to looking up membership offers. Familiarity means that interactions work in the same way and each service feels like it belongs to the Co-op. However, because of our wide range of audiences and user needs they don’t have to be exactly the same. 

Our earlier blog post, Developing visual design across Co-op products and servicesgives a good overview of why this is important. 

How it’s been working so far

For the most part, the design system has done a job good at helping us create familiarity. Every Co-op digital product and service either directly uses the design system’s code, or in the case of our apps its design language. We encourage designers to design for the user needs associated with the specific project they’re working on, and then if we think that part of the design would be useful in another product (such as the format we display a product in), then we’ll add it to the design system.

Designers take ownership of a design pattern. They find out if that pattern is used anywhere else and therefore if there’s a good case to design and build a single version to add to the design system.  

But we don’t have a dedicated design system team

The design system doesn’t have a product team that constantly works on it. It’s a side project that (like all side projects before it) can move slowly, especially against everyone else’s project work. 

Project work quite rightly pushed the boundaries of the design system and in some cases found problems in the fundamental styles that needed to be fixed.  

We found the design system was struggling to keep up. 

Design system debt

Designers were losing trust in the design system for 2 reasons: 

  1. The code was up to date but project teams didn’t want to update as it was a big job to do the update and test everything. Because of this they were writing custom code to try to keep up. 
  2. Design libraries were getting out of sync and people began to create their own versions of the base files.  

But even though our artefacts were getting messy – our products retained a decent level of consistency. We’re lucky at Co-op Digital because we have a collaborative culture so we talk to each other a lot, but we knew that all the extra collaboration, custom code and question asking could be avoided. 

We needed a better way of managing our code

There wasn’t much wrong with the baseline design system – what we call the foundations. It was how we create and maintain and release our code that was the problem. 

The front-end community of practice came up with a solution.

Firstly, we reorganised the code. We’ve split everything into separate files that designers from different projects can just update ‘buttons’ or ‘typography’. We’ve also moved those files into the design system so we only have one source of truth. 

A designer or front-end engineer can now edit a design system component in that single source of truth. Then using a tool called lerna.js this is published as a separate package to NPM.

This means although we have one place to work on and maintain our design system – it’s easy for projects using the system to just use what they need. Some projects only use foundations and some like Digital offers only use a small subset of the foundations and have written custom code to push the boundaries of design toward something more playful. This feels like the perfect balance. The right solution for users – but only the code they need is downloaded to their device.

We’ve introduced design system hacks 

Every week, we bring together a group of designers, content designers and front-end engineers to work through a design pattern: from creating the specification and documentation. This manifests as the finished Sketch library symbol. We build the pattern into the system’s codebase and release it. 

photograph of a design system hack

This is good because we’re: 

  • sharing knowledge on how to contribute 
  • all contributing and collaborating 
  • all learning about each other’s disciplines 
  • keeping the design system up to date  

It also means that we carve out time to actually do the work. In the past this wasn’t happening because when you go back to the day to day pressures of your project – the design system is easy to push to one side. 

The Co-op design system will never be ‘finished’ – it’ll continue to be led by the projects across the organisation. We’ll just be regularly dedicating time for its maintenance from now on.

Matt Tyas
Principal designer

Co-operate: why we prioritised ‘What’s happening’

Co-op is a commercial business and our profits go back into our communities. Our mission is ‘Stronger Co-op, stronger communities’. Earlier this year we wrote a post introducing Co-operate, an online platform aimed at bringing communities closer together. Co-operate will host a ‘suite’ of connected products that make it easier for organisers and volunteers to make things happen in their local community.

What’s happening‘ – a product that lists events and activities that benefit Stretford – is the first product in the suite that we’ve built. This post is about how and why we prioritised this one.

Screen Shot 2019-10-31 at 09.45.26

Understanding the problems

At the start of the year, me and user researcher Simon Hurst gathered, reviewed, grouped and analysed the previous research from agencies, our own Digital Product Research team and other Co-op teams. 

It was clear that if someone wants to make something happen in their community, they need to overcome at least one – often many – of these problems:

  1. Fund raising. 
  2. Recruiting volunteers.
  3. Promotion and raising awareness. 
  4. Finding a location or venue. 
  5. Finding, getting or buying equipment.
  6. Communicating with and co-ordinating volunteers or attendees.

Usually, a digital delivery team would look at all of these problems and use prioritisation techniques to figure out where they could deliver the most value, most easily, before working their way down a list of stories. 

But we didn’t. 

We know there are good digital and non-digital services that adequately solve some of these problems. For example, organisers use Facebook and physical message boards to promote events, and they communicate with their volunteers through Whatsapp groups. But those services aren’t connected, which means users are having to navigate multiple services to make their community event happen.

We knew that if we only tackled one of those problems, our product wouldn’t offer communities anything they couldn’t get from better established ones – we’d actually become part of the problem.

Our over-arching hypothesis

We formed an over-arching hypothesis that has helped frame our strategy for the first 12 to 18 months:

A variety of unconnected digital tools and services aimed at helping people make things happen in their local communities already exist. We believe that offering a range of connected products will make it easier for people to organise and participate in things that benefit their community. We’ll know this is true if people use 2 or more Co-operate products.

Why an events listing is our first Co-operate product

Despite the fact that another place to list events didn’t address the most urgent user need, we prioritised work on Co-operate’s events listing product What’s happening for several reasons:

1.Broad appeal means more value added

What’s happening brings a range of events and activities into one place and we knew that most members of the community would find something of interest to them – it could be a book club or health walk, a martial arts class or knitting group. Starting with What’s happening felt sensible – we knew it would create a buzz because it’s useful to so many organisers and potential attendees. 

screen grab of the stretford what's happening page. shows 6 events.

2.Good for galvanising a new team (and for satisfying stakeholders)

There had been 18 months of stop/start research into communities and deliberation about whether to continue before our current team became involved with the project. Because the Co-op is synonymous with communities, our stakeholders were investing a lot of trust in us to deliver. 

Whilst our natural instinct as a product team is to see user problems for ourselves, it felt wasteful to start again and leap back into another discovery. In the weeks it would have taken for us to complete another discovery, we pulled together as a team and designed prototypes based on what we’d picked up from the research done before. The fact we hadn’t been involved in the initial research perhaps helped us move more quickly because we were less precious about it – we were just desperate to get something into users’ hands and see where we could add value. 

It worked out well for us because we learnt a lot, quickly; the users in Stretford, and the stakeholders. 

3.Technically, it’s relatively simple

From an engineering point of view, this isn’t a challenging product which meant we could design and build something rapidly, get it into people’s hands in Stretford, listen, observe and make improvements frequently and quickly.

4.Build it once, reuse it loads

What’s happening is essentially a searchable, filterable list – a format that we think could ease some of the other problems we’ve seen too. For example, the build could help make it easier to find community spaces in your area; equipment you can borrow; community groups to join or volunteering opportunities. Building this now means it’s likely to speed up other products we build because we’ll reuse and repurpose it and hook in different content.

Thinking ahead and prioritising accordingly

Balancing and satisfying user needs and commercial needs is our top priority in Co-op Digital. But in Co-operate’s case, it was more efficient for us to lay some groundwork first. Choosing to focus on What’s happening as the first product meant we could move quickly and boost team and stakeholder morale, and thinking ahead about what would be sensible and beneficial to us in the future influenced what we built first. Every project is different and has a different backstory, but these were the right product decisions for this product. 

What’s happening with What’s happening

At the moment What’s happening covers 4 communities (Bollington, Sale, Urmston and Stretford) but we’ll soon cover the whole of Trafford. We’re experimenting with ways to measure its impact – for example, is there an increase in participant numbers at the events we feature? This is the common challenge of tracking people as they move from the digital to the physical world. But we like a challenge.

We’re continuously iterating the product in response to user feedback. If you have some for us, use the ‘share your feedback’ link at the bottom of each community page in What’s happening.

Ben Rieveley
Product lead

Service mapping to make friends and influence stakeholders

This post is adapted from a talk Louise and Katherine recently gave at Mind the Product and NUX Liverpool. 

The act of service mapping with your product team and stakeholders improves relationships and helps everyone to work collaboratively.

Here’s why.

You build a shared understanding

Ideally, service mapping should be done with the whole team. That means digital experts from each discipline, subject matter experts, marketing people, policy and legal advisors and anyone else who has expertise relevant to designing, building, explaining, selling or governing the product or service. 

Having everyone in the room at the same time means we all hear the same information at the same point which contributes to inclusivity. It helps avoid any part of the organisation feeling that the things that are important to them have been overlooked because they’re there to represent their area. It also promotes a more holistic approach to service design because it reduces the chances of working in silos.  

After a service mapping workshop, we aim to have a clearer understanding of:

  • the role of each person in the room, their concerns, their priorities and their pain points
  • the scale of the service 
  • how parts of the service fit together, for example, where a colleague’s journey intercepts a customer’s 

For the workshop to be successful however, everyone must keep in mind the reason they’ve been invited to take part: to share their specialist knowledge. Each person must remember that specialist language and acronyms are often inaccessible and they’ll become barriers to understanding for many.

It’s a democratic way to prioritise problems

Service maps offer a visual way to identify pain points. Done well, they can flag all problems regardless of the specific user journey or whichever discipline’s responsibility they fall under.

photograph of the digital team and stakeholders looking at a service map

Service maps make the areas that need attention indisputable because they help show us where the problems are – they’re often flagged by clusters of post-its notes. Each expert is likely to have biases around which of the problems to prioritise, so just making each and every one visible means we’re less likely to overlook something we’re personally less concerned about. Not only does service mapping help protect the direction of the product, in terms of building relationships with stakeholders, it’s beneficial because it feels like a more democratic way of prioritising what to work on next. 

We can also look to the future more easily with a service map – it helps us anticipate and understand the consequences of the decisions we’re making. For example, if we make a decision early on in the service, will it have an impact later in the experience? A service map will help you to see this, and allow you to make better informed decisions.

Service mapping helps you tell the team’s story

A concept, idea or assumption is hard to visualise, so mapping it out and having a physical thing to point to helps make something nebulous more tangible. Service mapping has been a helpful way for the Co-op Digital team to tell our story to the wider team. It’s been a practical activity where we’ve talked stakeholders through the way we work and reassure them that there are often more questions than answers (especially in a discovery) and that’s ok – in fact, it’s expected. Showing this at the beginning of a project sets the tone for the way of working for the rest. 

Working closely and intensely together in a workshop has helped build trust within the wider team. Each discipline is valued and respected, and listening to each person’s contributions helps build empathy. Everyone should be encouraged to contribute and bring all their knowledge into one place to create a chronological journey. The aim is always to create something that’s easy to understand – something that someone from outside the project would be able to look at and understand the direction of the product.

We’ve also found service mapping good to demonstrate the opposite: helping show that there is no problem to solve, or that a concept is not feasible, viable or desirable. 

It highlights the challenging conversations so you can have them early

We know that progress on the product can be slow or even derailed if: 

  • decisions keep being pushed back or just aren’t made
  • we don’t talk about the difficult things as soon as they come up
  • research findings aren’t considered at each step of design 

 To help us to remove these potential blockers, we include them in service maps so we can highlight them to our wider team. We know stakeholders are often time-poor and detached from the product so an overview rather than detail is what’s useful to them. We’ve found that many of ours really appreciate a service map they only need to glance at to feel informed so we’ve taken this into account. 

We’re also conscious that we need to make it easy for stakeholders to give useful feedback. In businesses generally there’s often a pressure on colleagues to say something because they’re expected to – even if it’s not particularly helpful. By having the whole service visually laid out in black and white, it’s easier for everyone to understand and therefore give useful feedback.

Service mapping to show the money

It’s important not to lose sight of the fact that Co-op services are not only there to meet customer or colleague needs, they must also meet business needs and many stakeholders place more importance on this factor. With this in mind, we need to be aware of the business models and commercials when we create the map and we’ve been including things like efficiencies and incur costs in our maps. Including these aspects means we’re being inclusive with the wider team.

It encourages conversation and collaboration

We’ve found service maps help to:

  • get your team working together with a focus
  • bring clarity in times of change
  • make decisions obvious
  • make knowledge accessible
  • help stakeholders care about the right thing

The sheer physical scale of a service map is the simplest benefit. It’s big, visual and imposing.  Put your service map up in your stakeholders’ workspace, people will naturally stop and look at it. When they do, ask them to contribute. Often, we need to get people’s attention to encourage collaboration.

That said, it’s act of making the service map with your team, collaborators and stakeholders that’s more important than the service map itself.

Louise Nicholas, Lead product designer
Katherine Wastell, Head of Design

Developing visual design across Co-op products and services

The Co-op Digital Design team has recently started to work on products and services that give us the opportunity to develop our visual design. This post is about why that’s important for Co-op as an organisation, and what we’ve done so far.   

Familiarity across functional and visual design

Screen Shot 2019-06-16 at 11.05.40

The image shows the difference between functional and visual design. Guardian – our service which helps Co-op Funeralcare colleagues arrange funerals – falls very much under ‘practical need’, whereas the design for our digital offers for members appeals to people’s emotions.

Up until now, the aim of most of our work has been to give time back to colleagues so they can spend more time with customers and less time on admin. How do I, Guardian and Shifts are all examples of our functional, colleague-facing design work.

As we’ve progressed with that, we’ve created components and guidelines and we’ve begun documenting them in our design system. Although it’s still work in progress, teams throughout the Co-op now refer to and use the design system and as a result, we’re creating a much more unified experience when people interact with Co-op services in our different business areas.

However, more recently the Design team’s work has involved designing customer-facing products and services. When it comes to products and services like a convenience food store, customers have a choice about which one to use, and this is why engaging with them on a more emotional level is essential.

We’re now looking to create familiarity in a visual sense too.

‘Good’ visual design is hard to define

Appealing to a customer’s ‘emotional motivations’ means we want our designs to be pleasing to them aesthetically. But figuring out why something is pleasing is hard because ‘good’ is subjective.

Although there isn’t a formula for success, good visual design considers:  

  • imagery – using good quality imagery in the right place, at the right time gives hints, cues and can stimulate interest
  • typography – the number of type sizes and the contrast between them helps readability and reduces visual noise
  • colour – using it well emphasises content and helps create pace and visual interest
  • composition – where each element is placed and the space around it creates rhythm and hierarchies, and using plenty of white space improves readability
  • shape and pattern – can group or emphasise content, or add personality to layouts

Good design depends very much on context too. At the Co-op, with many different business areas to consider, creating familiarity so customers know what to expect is ‘good’ visual design. It makes our designs more accessible on a cognitive level and makes using our products and services enjoyable rather than disconnected and jarring.

Developing our visual design – our progress so far

We started by holding a workshop for Co-op Digital designers.

We stuck some of the visual design for the projects we’re working on up on the wall, plus the ideas put forward by Lucky Generals – the agency Co-op is working with. Seeing similarities and differences between everything in paper form was a starting point to discuss what works and what needs more work.

We sketched out and mocked up ideas related to anything we’d seen up on the wall – at this stage ideas didn’t have to relate to a specific product or service. 

photograph of the sketches from the first workshop with designers across Co-op Digital

Then we dot voted on which concepts we wanted to develop further.

The photo below show our visual exploration up on walls. The ideas are organised chronologically to show our progression.

3_walls

Involving stakeholders

At this point we had designs that were working well visually. They were bold and simple without being simplistic. When we had a collection of ideas we felt – after a little more development – had the potential to be rolled out, we invited stakeholders from Co-op Food, Insurance and Brand to come and see them.

We weren’t asking for new ideas, we were asking for feedback on the ones we’d curated. We asked for comments on post its.

photograph of colleagues from food, insurance and brand were asked to comment on the visual design exploration work

Applying new visual design elements to old work and new

Since then, designers across many projects and in many parts of the business have been starting to tweak – and in some cases overhaul – the visual design. Some of the examples below like the Co-op Health page and digital offers are live but others are mock ups.

Coop.co.uk homepage

The image below shows a possible new design of the coop.co.uk homepage. We’ve used cropped ‘squircles’ (square circles ;-p) to highlight and group content. (By Tony Carberry, Michael Chadwick, Gail Mellows, Sam Sheriston, Matt Tyas and Katherine Wastell). 

image shows possible new design of the coop.co.uk home page uses cropped 'squircles to highlight and group content.

Co-operate

The image below shows our visual exploration for the Co-operate platform which includes experimenting with hand drawn marks. (By Katrina Currie and Katherine Wastell).

screen shot of Visual exploration for the Co-operate platform includes experimenting with the use of hand drawn marks

Digital offers for members

The image below shows the new visual design for the offers service that went live 28 May. The service lets members choose and manage selected food offers digitally. Kyle Fyffe, Asher Khan and Louise Nicholas used colour playfully and when a member picks an offer, the interaction is animated.

7_offers

Co-op Health

The image below shows a live page on coop.co.uk which supports the Co-op Health app. The visual design balances functional design (download the app) and visual marketing-based content. Cropped squircles and part of the app badge form the background that content is layered on. (By Tom Adams, Michael Chadwick, Gail Mellows and Joanne Schofield).

8_health

‘It’s what we do’ page

The image below shows a new design for the ‘It’s what we do’ area on coop.co.uk which isn’t live yet. (By Tony Carberry, Michael Chadwick, Gail Mellows, Sam Sheriston, Matt Tyas and Katherine Wastell). 

9_whatwedo

Sustainability page

The image below shows a new design for one of the environment pages on coop.co.uk which isn’t live yet. (By Tony Carberry, Michael Chadwick, Gail Mellows, Sam Sheriston, Matt Tyas and Katherine Wastell). 

10_sustainability

Applying familiar design

We’ve made a really strong start but it’ll take time to understand how the visual design is working for our users in live products and services. Just as we do with our functional design, we’ll iterate and build on our direction. Once we know what works well, we’ll document it in our design system.

Gail Mellows
Lead visual designer

What we learnt from Jared Spool

On Tuesday eve, much of the design community from Co-op Digital and the wider north west attended User Research North’s event to hear Jared Spool’s talk.

Over the years, Jared’s influence and presence in the design world has been widely felt and acknowledged. He co-founded Center Centre, a school to train user experience designers and ultimately, Jared helps designers help their organisations deliver well-designed products and services. You can read more about his work here.  

We learnt a lot from him.

In this post, a handful of Co-op Digital colleagues reflect on what they learnt on Tuesday and how:

  • their new knowledge will help them with their current Co-op work
  • knowing this earlier would have helped with past work

Experience design: all the moments, all the gaps

My big take away from the talk was this quote:

When we think in terms of experience, we’re thinking of the entire flow: all of the gaps, all of the moments. That’s what we mean by experience design.

In Co-op Health, we’re providing a service for people who want to order their repeat prescription through our app. This is the front stage – the part the end user sees.

But the back stage of the service needs to be considered to fulfil that entire flow so every moment is accounted for. For example, when you order a prescription, this needs to talk to the NHS and the GP surgery. The prescription order then needs to be made and checked by a pharmacist before it’s picked up by the Royal Mail and delivered. All of those aspects of the service will impact the experience and service we’re providing for people.

Jared’s talk made me think even harder about the importance of collaboration, inclusivity and co-creation across teams and external organisation – it’s a good place to start to ensure the overall service is the best it can be with ‘moments of delight’ Jared mentioned.

Lucy Tallon, principal designer

Demonstrating difficulty is worthwhile

I loved this analogy from Jared. I’ll paraphrase:

A tightrope walker’s act is to walk up and down a rope in a circus. Realistically, keeping their balance and walking the length of the rope is easy for them – they can do it without any trouble. But, if their act appeared to be super easy, the audience is less likely to appreciate the tightrope walker’s skill because the difficulty in doing such a thing isn’t being amplified. The ‘act’ of ponderous steps and motioning a wobble every now and then, which in turn prompts a drum roll every time they do so, is meant to produce suspense and show how hard the task is.

We can learn from this circus act. We too can show the challenges of a design process.

What we do is hard, but to people whose expertise aren’t in design, most websites and apps seem easy. Working in the open; being transparent about how we make decisions and why we’ve made them; ensuring that we have a diverse set of people in the room helps everyone understand the process. Blog posts, week notes, putting our work on the wall, inviting feedback, seeking out stakeholders who haven’t been involved in the design and taking them on research are all things that help. The talk highlighted the importance of continuing to do these things.

Nate Langley, principal designer

Context is where design happens

Jared spoke about the importance of context when solving design decisions.

He showed examples where designers had made improvements to designs from other organisations that they had found particularly poor.

But, although the designs used user-centred design techniques and looked more appealing, they were not feasible in the context in which the organisations operated. The hardware the organisations used, the interconnectivity of their systems, the constraints of their tools and processes, rendered the suggested ‘improvements’ to designs almost impossible (and would cost far too much). As Jared said in a related blog post:

“Often when we see usability problems in designs, it’s because the design team didn’t know something about the context that they should have. Teams with a strong awareness of the different contexts that will crop up are more likely to produce designs that will consistently delight users.”

I’m working on the new Co-op Health app. The majority of the team are new to working within health. And, because we connect to NHS systems, there are a number of constraints that are out of our control.

Jared’s talk reminded me how valuable it is to get as many people involved in the research and design process as possible. Doing this not only allows us to understand the technical constraints and challenges that our designs must operate within, but diverse perspectives help us design for the different personal contexts of our users too. By understanding the challenges that we and our users are facing, we’re able to design solutions that meet both our operational goals and the needs of our users.

Joanne Schofield, lead content designer

From ‘unconsciously incompetent’ to ‘unconsciously competent’

I’m working on a Co-op Food project with people from across the organisation whose expertise are in many different disciplines.

Jared explained that everyone needs to be involved in the design process in order to deliver a successful service. He said that everyone is a designer – we’re just at different stages of the 4 stages of design understanding.

4 post it notes showing the progression of design understanding. far left - far right reads: unconscious incompetence, conscious incompetence, conscious competence, unconscious competence

Jared talked about how organisations sometimes use strategies or ‘plays’ (an American football analogy) to help teams improve their awareness.

It’s our job as designers to help people who don’t identify as designers move from being ‘unconsciously incompetent’ at design to being ‘consciously incompetent’. This highlighted the importance of exposing the wider team to journey maps; the concept of story mapping and involving them in user research so they see how people are using a service first-hand.

From now on, I’m going to start identifying activities in our playbook that Digital team members can use when we need to help colleagues jump between stages. Some ‘plays’ may not be effective, but that’s OK, we can try another until we’re all playing as one team in perfect formation.

James Rice, lead designer

Changing the behaviour of others… with our thoughts

Jared talked about an experiment where a group of rats were labelled as ‘smart’ or ‘dull’ and what people were told about the rats affected the result of the experiment. Sounds like nonsense, but I’ve seen this happen.

Screenshot_20190531_104922_com.instagram.android

This is down to something called the ‘expectancy bias’. Your expectations of people or a team will affect how they perform. If you go in believing someone is not a designer, and therefore not capable of creating good design, they won’t.

“Expectations can change outcomes,” Jared said. “Our expectations can change our team’s outcomes.”

I’ve noticed that when I go into something assuming the worst, whether it’s a stakeholder who I presume has bad intentions, or a team I think aren’t capable of making a good product, I tend to prove myself right. Now I try very hard to assume the best possible thing of people and, even if they have different motivations to me, they believe they’re doing the right thing.

I once worked on a product with a very inexperienced design team, and quickly got very concerned we couldn’t deliver the design. When I forced myself to think positively, I saw a significant change in the quality and output of our work, and we delivered.

Katherine Wastell, Head of Design

We’re always interested in hearing about great speakers and significant talks that have changed your way of thinking and working. Comment below.

Co-op health: running a design sprint across disciplines

Last week we launched an app that helps people view, order and manage their NHS repeat prescription from their phone. We want to make prescription ordering easy and convenient for people by providing self-service, simple collection and delivery options, and transparency throughout the process.

The app is very much a first version that we’ll continue to test with users and iterate on.

However, we think this is a good opportunity to talk about the work we did on a feature that we hope to add to the app soon.

Trying out a 5-day design sprint

As with many big, traditional organisations it can sometimes be difficult to move at pace within the Co-op. Design sprints can be useful to answer critical business questions quickly so we thought we’d give it a go. We got a group of designers, researchers, engineers, pharmacists, product managers as well as subject matter experts together for 5 consecutive days to build a realistic prototype. Having the relevant people in the room who could make decisions on behalf of their area of expertise was essential.

Design sprint: booking medical appointments

During the design sprint we were looking at how people book an appointment with a medical professional.

Together, we spent a day on each of the following tasks:

  1. Defining the challenge.
  2. Sketching ideas that might help us solve the challenge.
  3. Choosing an idea to take forward, then storyboarding it.
  4. Designing a prototype of the chosen idea.
  5. Putting the prototype in front of users and listening to feedback.

Day 1: Defining the challenge

The first day allowed us to reframe the problem we were trying to solve. So, our week-long sprint goal was to build a simple, intuitive app for booking appointments for anyone registered with a GP in England. With this in mind we created ‘how might we’ questions, and turned problems into opportunities by asking questions such as:

  • How might we help people get the help they need, more quickly, so they can lead happier and healthier lives?
  • How might we be open and transparent about the process of booking appointments?
  • How might we update people about their appointment?

Working in this way encouraged everyone involved to see the bigger picture. It helped us think about our end goal and why we want to achieve it. Zooming out like this also helped keep us on track for the rest of the sprint when there’s a focus on detail.

Day 2: Sketching ideas

photo of team sketching on day 2

When it came to sketching out ideas for possible solutions to the ‘how might we’ questions, we used the ‘4-part sketch method’. It guides team members through note-taking and generating 8 rough ideas through to a ‘solution sketch’ – something slightly more carefully thought-out. Importantly, it asks that people work alone at this stage.

We found this really beneficial because when you’re working with people you don’t necessarily often work with, it can be intimidating. Working alone and then sharing ideas anonymously avoided extraverts and ‘leaders’ grabbing the most air time and encouraged more confident participation from quieter team members because they knew their ideas would later be seen and heard.  

The solution sketches included chatbots; statistics dashboards and smart reminders as well as the use of video to explain complex processes and ideas that use artificial intelligence.

The next step was to choose which of these ideas we’d take forward into the rest of the sprint.

Day 3: Choosing and idea and storyboarding

photo of storyboards - lots of post it notes

On decision day, we put the solution sketches on the wall for everyone to see. The ideas were so wide-ranging which shows the importance of including colleagues from different business areas. It highlighted that we all have different priorities, but explaining our sketch solutions helped everyone understand where those priorities come from.

Using stickers, we flagged anything that aligned to our sprint goal which made it easier to see where or if we could merge different ideas. We then did a ‘speed critique’ which involved an impartial person talking through an idea that wasn’t theirs – it helped make sure everyone’s ideas were viewed equally.

Settling on one idea

photo of the chosen idea's storyboard

After a vote, the team decided to combine ideas around organising different types of appointments, smart reminders and linking repeat prescriptions and appointments. This is what we’d take forward to prototype, but first we created a storyboard –  a visual map of the user journey.

Day 4: Prototyping

photograph of 4 of the team prototyping

The next day we brought the storyboard idea to life by creating a working prototype. Working in this way allowed us to quickly create something which we could place in front of users the following day to get their feedback.

These images show how reminders might work in the app.

screenshot of the reminder in the app prototype

Day 5: Getting feedback from users

photo of user research participant's hand and mobile phone using the app prototype

On the final day of the sprint we put the prototype in front of potential users. We held 5 sessions in the Federation user research lab, and we visited 1 participant who had accessibility issues in their home.

Here are some of the things we learnt from the research:

  1. People don’t just manage their own health, they book appointments for children, parents or grandparents too.
  2. A big pain point in the process of making an appointment is waiting (particularly waiting on the phone for half an hour) Any way we can reduce the time spent on managing / booking the better.
  3. People often have a preference about things like whether they see a male or female doctor, or their appointment time (for example, on their lunch break). Allowing people choice is important.
  4. People were very positive about appointment reminders. They felt they helped them manage their health better.
  5. Our service needs to be reliable with no technical issues. If there are issues a person is less likely to use a service like ours again and revert back to non-digital methods.

What’s next

We’ll be feeding what we’ve learnt back into the design process and improving the prototype. Now the app is live we’re also gathering customer feedback & seeing what the pain points are we need to work on next.

And we’ll continue to work closely with stakeholders because their expertise have been invaluable.

Lucy Tallon
User researcher

You can read more about the Co-op health’s proposed work.