We’re using ‘behaviour modes’ to keep users at the centre of decisions

Over the past 18 months, the Digital team has been working with the Food business on an online delivery and collection service. During the crisis and lockdown, there has been an increased demand from shoppers wanting to avoid spending time in physical stores. This means our online growth has accelerated significantly in the last few weeks.

Prioritising user needs, always

As designers and researchers, we know we need to keep the needs of users at the centre of the development process. But it’s particularly important right now – at a time when we’re probably working a bit more quickly and iterating faster than normal – to remind ourselves and stakeholders to keep coming back to user needs.

But how do we keep user needs in the forefront of everyone’s minds? We’ve been looking at ‘behavioural modes’. And although we started this work way before lockdown, it feels very relevant to talk about it now.

Personas = ok(ish)  

One technique design teams use to make sure services are user-centred is to create persona documents. These typically describe people segmented by demographics.

For example, Jane is 70 and shops mid-week. Since Jane is an older person, we need to design something that doesn’t rely on technology.

But beware! Demographics become problematic when designing for needs as they introduce biases and assumptions.

At Co-op we have the Insights team and others dedicated to understanding shopper segments – all of which have their own specific purpose and value.

Introducing behavioural modes 

Focusing on behaviours rather than personas helps us:

  • think about the context that people are in
  • think about how decisions are made
  • understand that behaviours can be exhibited by anyone at any given time
  • design the user experience around different behaviours we’ve seen in research

Researcher Indi Young writes in her 2016 post Describing personas that to understand a user’s world and better meet their need, we must be able to empathise with them. And that creating personas for users is not as conducive to this as insights into their behaviours. She writes:

Cognitive empathy requires not a face, not preferences and demographics, but the underlying reasoning, reactions, and guiding principles. Without these you cannot develop empathy. And if you cannot develop empathy, you cannot wield it — you cannot walk in someone’s shoes.

Early on in the project our researcher Eva Petrova helped the team to develop behavioural modes. They were based on what we learned from a diary study looking at how people make choices and decisions around buying food, planning meals and what influences them. (You can read more detail on the diary study in Eva’s post). We’ve subsequently validated the modes with further research to make sure they still hold true.

Here’s our first attempt at creating posters out of our behavioural modes.

photograph of 5 a4 paper printed out attempts at behavioural modes work.

How to communicate behavioural modes

Communicating ideas with everyone who’s involved in the service is challenging at an organisation as big as Co-op.

However, this article by Spotify’s design team describes how they approached a similar challenge to ours:

Representing personas poses a tricky challenge: we want them to be relatable, but they’re not 1:1 matches with real people. Believable human traits and flaws help create empathy with problems and needs. But we don’t want groups to be wrongly excluded based on the characteristics we’ve picked. So finding a balance is a crucial step if we’re to create useful and believable archetypes.

To communicate them, they created an interactive website, shared across Spotify offices through announcements and posters because they “wanted to create fun, playful ways for the teams to incorporate them into their workflows.”

This inspired us. We agreed that to communicate the importance of behavioural modes to the wider teams, we needed to create something that:

  • explained what behavioural modes are
  • avoided making the behaviours seem prescriptive (or like the personas some stakeholders may be familiar with)
  • invited collaboration through wider team’s insights
  • is distinct, memorable and visually engaging
  • doesn’t stray too far from the Co-op style

We brought them to life

We’re lucky to have user researcher Maisie Platts working with us who – as part of her MA studies – had been investigating different ways of visualising personas as part of a design process.

Together with interaction designer Mehul Patel we set out to bring our behavioural modes to life.

Our first route used robots to personify each mode. Robots can convey expression while avoiding any associations with specific demographic characteristics such as age, gender. Here are Maisie’s initial behavioural mode robot sketches.

white paper with 5 blue pen hand-drawn robots

In the initial sketches the robots have screens which display something relevant to each behavioural mode.

However, we decided that the message is lost as it’s relatively small. So, we tried combining simplified versions with playful typography to communicate each behaviour instead. For example, ‘Strive for a balance’ takes the form of weighing scales. Here’s how we explored robots and playful typography.

5 posters with bright colours, playful typography and robot doodles not the focus but incorporated.

It’s OK to push it too far, you can always pull it back

We felt this first visual route had the potential to alienate the very people we were hoping to share the behavioural modes with. The danger arises from the introducing something different, it’s often the case that the unfamiliarity creates uncertainty and an initial reluctance of people to accept it – it’s only natural, and specially so in the case of radical robots!

Next, we tried an illustrative style that was more of an extension of Co-op’s own internal illustrations. This time we featured only hands to achieve the distance from demographic characteristics, while keeping the connection to the representation of ‘real people’.

After feedback and further iteration, we realised that the illustrations felt flat especially given that we’re trying to communicate behaviours – that is to say; an action, a ‘doing’. We introduced a sense of movement to help to bring them to life. For example, the fingers pulling the ribbon and the stack of foods toppling over.

So here’s where we are now – a much more familiar style.

the latest version of the posters in coop style

Before lockdown, we started to print them out as posters and put them up all over the place and to get wider feedback on them. There’s no physical place for that since everyone is remote for the time being, and everyone’s focus has understandably been on reacting to the pandemic.

But here we are, posting them in this digital space.

Each poster has a different behaviour and asks:

  1. Are there any opportunities for your team to target these behaviours?
  2. Do you have any insights or data to share that support these behaviours?

Here’s a close up of the reverse.

close up of the reverse of the poster

I extend these questions to you! Speak to ‘Digital design team in Food’ on Teams or post your comment here. We’d like your feedback.

James Rice
Lead designer

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