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

We’re testing our ‘Pay in aisle’ app in Co-op Food stores

Over the next 6 months we want to understand more about whether our ‘Pay in aisle’ app is a feasible and viable product for Co-op Food, and whether it’s desirable to our members and customers.

We launched it today in 30 of our Food stores.

Screen shot o

Which problems need solving and why?

User research told us people don’t like queueing (not surprising) but they find it especially frustrating when they’ve only got a couple of things to buy, for example a meal deal. 

Most Co-op Food stores are small and located on local high streets. We’re less concerned with being the place to do a fortnightly ‘big shop’ – we stand for convenience. But the problems we identified through our research contradict how we aim to function as a business. So now we’re trying to fix them.

Years ago, research was carried out elsewhere in the business and an app was built and tested in a couple of stores in Manchester. The latest version of the app is based on what we learnt from that project.

Features and their assumed benefits

The Pay in aisle app:

  • can be downloaded now and can be used without having to set up an account
  • can be used with Google and Apple Pay 
  • uses GPS to identify which Co-op Food store the customer is visiting 
  • can be linked to a Co-op Membership card 

Our hunch (and our hope) is that these features – and the way the app links to established external payment services – will mean the process of using it is relatively quick. This means for customers who want to skip queues at checkouts and self checkouts, the alternative of paying in the aisle won’t be an equally tedious experience.

We’ve tried to lower the barriers to using it by making it possible to use without registering. Users can go back and register later and link their Membership account to it. We need to know which store a customer is buying from so we can manage stock so the app asks permission to identify a customer’s location through GPS. There’s also the option to check into a store by scanning a QR code. 

We don’t know for sure, but we’re learning

Over the next 6 months while we’re testing the app with real customers, we’ll be listening to customers and colleagues so we can learn and iterate to make it better. We’ll also be looking at what the business data tells us.

We’ll treat Pay in aisle as successful if customers download it, use it, and feed back through the app. 

As long as it doesn’t makes things more difficult or slower for customers, that’s a mark of success. We’ll be looking closely at the amount of leakage (theft) in the participating stores and we’ll compare it with the sales figures.

If we can show that there’s a need for Pay in aisle, we’ll look at rolling it out to more stores. 

Try it

You can download Pay in aisle and use it in the stores listed below from the date shown. We want to hear what you think so let us know by giving feedback through the app.

Charles Burdett
Designer

 

Tuesday 23 July

  • Manchester- Piccadilly                  
  • Manchester- Spinningfields                                    
  • Green Quarter – Cypress Place           
  • Cardiff – Senghenydd Road               
  • Cardiff – Kings Road                    
  • Cardiff- Pontcanna Street               
  • Edinburgh – McDonald Road
  • Edinburgh – Morrison Street
  • Frederick Street – Edinburgh
  • Edinburgh – Dalry Road

Tuesday 6 August

  • Wembley- Olympic Way                    
  • Kentish Town – Fortess Road            
  • Westminster- Portman Square              
  • Regents Park – Park Road                
  • Great Eastern Street                    
  • Canary Wharf – Harbour Exchange Square  
  • Hackney- Cambridge Heath Road           
  • Westminster- Westbourne Grove           
  • Merchant Square – Paddington            
  • Holborn – Kingsway                      
  • Fenchurch Street – London               
  • London – Ludgate Circus              

Tuesday 20 August 

  • Clifton                                 
  • Scala                                   
  • Grantchester Street – Newnham           
  • Cambridge – The Marque                  
  • Shoreham – Ham Road
  • Southwater

Member pioneers: matching tech to their needs

At the annual conference in May we gave our 300 member pioneers a new piece of tech to make it easier for them to speak to their local communities and connect people. We’re already hearing positive feedback.

two photographs side by side of alison on stage at the meeting in may. she's explaining why we're giving member pioneers new tablets

This post is about how listening to our member pioneers has helped us provide the right technology for them to do their job, and how the new tech has meant they need significantly less support from us. 

What member pioneers do

Throughout the UK, Co-op member pioneers are committed to 4 hours of paid work per week in their community. They organise events, speak to members in their local stores and raise awareness of what being a cooperative is all about. 

Where things could be better

Before May, they used their personal tablet or their own phone for their community-building work. This came with a number of problems including:

  • tech support difficulties because pioneers were using a wide range of devices
  • access issues because multiple accounts were sometimes registered on the same device 
  • no internet access at home or limited data on their personal devices
  • small screen size meaning presenting Co-op content was difficult or an uncomfortable experience

Research and requirements

We knew we could make things better but to find out how, we spoke to the pioneers themselves and our support team. We started by inviting pioneers to workshops to find out how they carried out the tasks in their communities and what they found difficult and inefficient.

The support team keep a log about the calls they receive so we also analysed those. From this research, we could put together a list of requirements that went on to inform our tech choice. 

We balanced the feedback with our vision for what the member pioneer role should look like: more time spent out in our communities and less time spent at home doing admin. 

We settled on the Samsung Galaxy 4G tablet, case and a basic Alcatel mobile handset. 

A synchronised switch on

member pioneers at the conference in may for the synchronised switch on on their new tabletsOur member pioneers span many demographics – retired, students, people who work in Co-op Food stores. They also have very varied experience with technology so we made sure that everybody’s new tablet had the least amount of steps to set up as possible. We used a mobile device manager to load all the required apps onto the tablets before handing them out. This meant that instead of having to download each app, all the pioneers had to do was log on. We also did a synchronised switch on at the conference and had help on hand for anyone who needed it. 

So far, so good for pioneers

The feedback we’ve had so far is positive. Much of it has been around the size of the tablet – the verdict has been that the screen is big enough so that it doesn’t feel ‘fiddly’ to use but that the device is small enough to carry.  

I take part in webinars as part of my role, and I also need to access social media and team drives. The tablet is large enough for a good browsing experience for all these things. 

The camera quality is much better than on my personal device which means I’ve been able to share better pictures of community activities I’m involved in with the community.

Elsa Parker, member pioneer

Pioneers have also commented that having 4G internet access takes the worry out of using their personal data. They are feeling much happier about showing and sharing Co-op video content which is great because having something to put in front of potential members or local people is far more engaging than just talking about it. 

Good for our support team too

Rolling out the tablets has also made a big difference to the volume of calls coming into the support centre. 

Before, pioneers were using a wide range of devices and systems which were not compatible with the applications required. This made it difficult to pinpoint the main cause of the issues. But now, we rarely get calls regarding Google or device issues.

Matt Davidson, CSC Community Team Manager

Matching tech to people, not the other way round

Speaking to our users, pinning down their needs and balancing them with our expectations of their member pioneer role was essential to making a good decision. Without thorough consideration, our list of requirements might have looked very different and the decision could have been made on cost alone. 

Taking time to understand how people work and what they need is always worth it.

You can find out more about member pioneers or apply to become one. 

Alison Critchley
Delivery manager

An accessibility audit for the Co-op Insurance website

This is a guest post about co-opinsurance.co.uk – a product developed by a team within Co-op Insurance. The author is Paul Braddock, an interaction designer who works on it.

There are a lot of reasons for checking and improving how accessible co-opinsurance.co.uk is. In the crudest terms, it makes good business sense: the more people who don’t find it frustrating to use, the more potential customers we have. 

But the purpose of accessible design is far more than making a sale. 

AbilityNet estimate there are 19.1 million people in the UK who may have physical, cognitive, visual or hearing impairments that could affect how they interact with the world online. Equality is one of Co-op’s values and it states all members should have the opportunity to be involved. Being inclusive is part of what we do at Co-op and it’s what we strive for in our design.

With this in mind we commissioned a technical accessibility audit of the site. This post is about the recommendations made, how we’re tackling them and the effect we hope setting a standard will have on our partners.

Defining the scope

Our data analyst Nick Jones looked at the site’s traffic and identified the most common user journeys we see on co-opinsurance.co.uk He also pulled out our most frequently used page templates so that if one of those wasn’t accessible, fixing it would mean we could fix a lot relatively quickly.  

We worked on 10 sample website pages with AbilityNet who would be checking to see if the pages comply with the W3C Web Content Accessibility Guidelines version 2.0 (WCAG 2.0). To get the most value from the audit testing was carried out using JAWS for desktop and Talkback for Android, across all major browsers including Chrome, IE11 and Firefox.

Issues identified

Across the 10 pages, AbilityNet found 18 issues which would affect people who use assistive technology to navigate our website. They estimate 3.8 million people in the UK use assistive technology such as screen readers. They also identified issues that would impact 2.3 million people in the UK who may have difficulty seeing the screen. 

Of the 18 issues, they deemed 3 to be ‘high priority’ because aria labels were not in place so screen readers would not read out:

  1. Icons in tables.
  2. Dropdown options in our live chat feature.
  3. Our sticky ‘Live chat’ button.  

Here’s an example of a table we use on the site. 

insurance-travel-tableThe ticks and crosses are the icons that weren’t announced to users. For example, the ticks and crosses in the table shows that platinum multi-trip insurance includes cruise cover but bronze, silver and gold don’t. However, a screen reader would have announced, “platinum blank column 5”. Not only are the icons not compatible with screen readers, we hadn’t made the information available elsewhere on the page. 

Here’s a screenshot of issue 2: live chat dropdown options.

insurance-yd-chat-dropdown

The live chat window has a drop down so that users can indicate what they’d like help with. But screen readers don’t announce it, so users are at risk of not knowing what the options are. This would have a major impact on our users who are dependent on using live chat as a preferred method of contact.

And below is how the sticky live chat button looks (issue 3).

insurance-car-chat

With our live chat feature, neither the label or the fact it is a button is announced by a screen reader. Which means that screen reader users may not know that the button and method of contact exists.

How we’re fixing them

AbilityNet also gave recommendations on how to fix the issues they identified. Our content, design and developer teams are now in the process of fixing the 18 issues that were identified and taking what we learnt from the audit and applying the fixes across the whole of co-opinsurance.co.uk 

The content team were able to fix their issues straight away, as only minor tweaks to aria labels where required for certain products. James Martin has development fixes in progress and these changes will form part of a future code release. We’ve also been speaking with the external team who built our live chat and to make sure the problems that were identified are prioritised for their future releases.

Hoping to influence good behaviour

The audit was just for co-opinsurance.co.uk – that’s what we own and manage. However, our ‘quote and buy’ journeys are owned and managed by our underwriting partners so once a user clicks ‘get a quote’, their online journey passes over to a partner’s site.

Just like the issues that were identified with our live chat, we can’t necessarily fix them but we can influence them. We are therefore in the process of creating a ‘standard’, similar to a set of guidelines, that would cover our expectations and best practices when it comes to accessibility for our partners. This could eventually be fed into our Design system if we believe it brings value to other areas of the Co-op.

We recognise that inclusive design is a process so we are taking additional steps in our ways of working to make sure that we don’t exclude people when they come to our website:

  • by including accessibility checks in our quality assurance process when publishing new content or doing development improvements
  • using open source tools such as Accessibility Insights and Lighthouse to check co-opinsurance.co.uk on a quarterly basis
  • recruiting Co-op members with accessibility issues for our user research – if you would like to get involved email: gidigital@co-opinsurance.co.uk

Paul Braddock
Designer from Co-op Insurance

How contextual research helped us redesign the replenishing process in our Food stores

Every day, in every Co-op Food store, a colleague does a ‘gap scan’. They walk around the store, they spot gaps on the shelves, and they scan the shelf label with a hand-held terminal. This generates a ‘gap report’ which tells the colleague which products need replenishing. It also flags other tasks, such as which items need taking off the shelves because they should no longer be sold.

This is an essential stock management process in our stores. It ensures:

  • stock we’re low on is ordered automatically
  • customers can get the products they need
  • our stock data is accurate

However, the process is complicated. There’s an 18-page user manual explaining how to do it and on average, gap reports are 25 pages long. 

Making the essential less arduous

In the Operational Innovation Store team, we aim to simplify laborious processes in stores. Product owner and former store manager Ross Milner began thinking about how we might tackle ‘gap’, as store colleagues call it. 

He started by asking some questions:

  • How might we design a process so intuitive our store colleagues don’t need a manual? 
  • How might we help colleagues complete all the priority actions from the report immediately? 
  • How might we save 25 pieces of paper per store, per day – in other words, 22 million sheets per year? 

Learning from users

I’m a user researcher and this is the point where I joined the project. My first research objective was to discover how store colleagues go about the process at the moment, and what they find good and bad about it. To do this, I visited 5 stores. I interviewed the managers about their process – as it’s a task which usually falls to them due to its current complexity – but most importantly, I observed how they use the gap reports.

Adapting what they had to meet their needs

Being there in person in the back offices in stores gave me a far deeper insight than I would have got had I done phone interviews, or even just spoken to colleagues on the shop floor. 

Being there gave me access to reams of old gap reports stashed in the back office. It was invaluable to see how colleagues had adapted them to better meet their needs. Some of the things I saw included:

  • dividing the stack of pages into easily-managed sections
  • highlighting the information that requires action
  • ignoring all the non-actionable information on the report – some users didn’t even know what the information meant
  • changing printer settings to save paper
  • ticking off products as they complete the actions against them 

Photograph of one page of a gap report. Several numbers are highlighted. Not particularly easy to understand.

Seeing the physical artefact in its context revealed a lot of needs we might have otherwise missed, because colleagues are doing these things subconsciously and most likely wouldn’t have thought to mention them to us.

Learning from prototypes

Our contextual research has helped us identify several unmet needs. Delivery manager Lee Connolly built a basic prototype in Sketch and we mocked up a digitised gap reporting process. The design clearly separated and prioritised anything that needed store colleagues to take action. We arranged those tasks in a list so they could be ‘ticked off’ in the moment, on the shop floor.

Screenshot of an early prototype used for scanning labels on shelves

This was intended as a talking point in user interviews and the feedback was positive. The store managers were fascinated, asking when they’d be able to use it, and – unprompted – listing all the benefits we were hoping to achieve, and more.

Developing ‘Replen’: an alpha

We’d validated some assumptions and with increased confidence in the idea, we expanded our team to include a designer and developer so we could build an alpha version of the app. We call this app ‘Replen’ because its aim is to help colleagues replenish products when needed.

Interaction designer Charles Burdett began rapid prototyping and usability testing to fail fast, learn quickly and improve confidence in the interface. It was important to do this in the store alongside colleagues, on the devices they normally use. We wanted to make it feel as realistic as possible so users could imagine how it would work as a whole process and we could elicit a natural response from them. 

photograph of possible interface on a phone in front of co-op food store shelves

Profiling stores so we know where we’re starting from

Before we could give them the app, we needed to understand each trial store’s current situation, so that we’ll be able to understand how much of a difference Replen has made. We visited all the stores we’re including in our trial. Again, being physically there, in context, was vital. 

The following things have an effect on the current gap process and may also affect how useful Replen is for colleagues. We noted:

  • the store layout and the size of their warehouse
  • whether the store tends to print double-sided
  • where managers had created their own posters and guides to help colleagues follow the gap process
  • any workarounds the stores are doing to save time and effort

Screen Shot 2019-07-01 at 16.25.04

What’s next for Replen?

We’ve just launched the Replen alpha in our 12 trial stores.

The aim of an alpha is to learn. We’re excited to see whether it meets user needs, and validate some of the benefits we’ve been talking about. We’re also keen to see whether stores continue using any workarounds, and whether cognitive load is reduced.

We will, of course, be learning this by visiting the stores in person, observing our product being used in real life, and speaking to our users face to face. When redesigning a process, user research in context is everything. 

Rachel Hand
User researcher

Communicating effectively through storytelling

Steve Rawling is a storytelling expert. He believes that the way we tell our stories to the people who need to hear them leads to success in the workplace. “It’s no good having a brilliant idea if you can’t get anyone to listen,” Steve says.   

We’ve found this to be true at Co-op Digital. It’s part of the reason we blog, hold regular show and tells and tirelessly send out weeknotes. We keep in mind that our stakeholders and the rest of the Co-op Group are not digital experts – their specialist knowledge is in other disciplines. Telling our story helps those people understand our work, and telling it well, with their needs in mind, can heavily influence how receptive they are to our ideas.

To help us develop our storytelling skills further, we invited Steve in to Federation for a series of training sessions. In this post, a handful of Co-op Digital colleagues reflect on what they learnt and how they’re gonna change their approach in the future.

Story arcs and stakeholders

I had a presentation a few days after Steve’s first session with us. We’d been doing some exploratory visual design work and we were preparing to talk to stakeholders about what we’d done. I structured what I wanted to say around a ‘story arc’ – a kind of formula that helps the narrator order all the parts of the story they want to tell in a compelling way.

photo of gail's notebook full of notes on story arcs

The ‘recovery arc’ was the most fitting because I needed to communicate that:  

  • we were in a comfortable state but we’d known things needed to change – we needed to push our design work from functional to more playful in our customer facing products and services to make a customers experience of Co-op more enjoyable
  • we started the exploratory visual design work we needed to bring about change
  • we were overwhelmed by ideas and input and although this was brilliant it felt chaotic
  • after lots of exploration, we chose to focus on a few ideas and our direction became clearer
  • we’ve now reached something new, something we’re proud of that we believe will be better than what we had before – we’ve recovered!

In my experience, the design process mirrors a recovery arc in most cases: it can be messy and confusing at times. Although the meeting with stakeholders didn’t quite follow the structure I’d noted down, it definitely helped me talk about things at appropriate points along the way.

Steve also talked about the importance of considering where someone else is in their story arc. For example, being aware that they’re at the chaotic or ‘crisis’ point of their story is useful because it may help you speak to them sensitively. Mapping where I think I am on a stakeholder’s story arc, will be really useful for thinking about how to approach things in the future.

Gail Mellows, Lead visual designer

Showing not saying through storytelling

Storytelling is a big part of my job as a user researcher: I need to communicate what I’ve seen and heard from our users back to the rest of the team in an accurate and unbiased way. The way I tell the story of “what I observed when I spent a day at Co-op Funeralcare in Glasgow” is fundamental to how the team reacts to, and prioritises, what we work on next.

This point from Steve will stick with me:

Saying you’re humble doesn’t work as well as telling a story which demonstrates this.

This translates nicely to how researchers present their findings to the rest of their digital team, plus the wider team who may not be as familiar with user research. Saying I spoke to 5 people at Co-op Funeralcare in Glasgow about a feature update isn’t as compelling or engaging as *showing* the team photographs of the people I interviewed over a cuppa in their staff kitchen; or pictures of the office they work in where paper files stack up next to dated technology. Giving and actually showing the context is a huge part of what makes a story trustworthy.

Steve’s point can be extended to telling the team when users are finding it difficult to use something we’ve designed. It’s more engaging to find a way to *show* the struggle – it helps people empathise.

Recently, several Funeralcare colleagues were struggling with the size of a small screen so I held up the same size screen in a meeting with stakeholders and asked them to read from it. They couldn’t. As a result, those screens are being replaced.

Tom Walker, Lead user researcher

Plots twist and turn – talk about failures

Steve asked us to think about well-known film plots and showed us how the pivotal points in them could be mapped out. He pointed out that we can choose to tell the story of our product and service innovation in a similar way because our ups and downs can follow a very similar ‘journey arc’.

photograph of steve in front of white board with the journey arc described below.

With digital product development there’s usually a constraint followed by early success before a setback of some sort. The minor setback often gets worse and we find ourselves in ‘crisis’, before making a discovery as we try to fix things and end up in a better place. Both Lord of the Rings and Harry Potter follow this sort of journey arc. The reason the audience feel so pleased and relieved with the respective endings is because they vicariously lived the challenges faced by the characters they identified with.

photograph of steve's harry potter plot mapped against a story arc

Lots of companies have a very polished way of talking about their work. They broadcast how they’re getting better and better and more shiny and they never talk about their mistakes and what they’ve learnt from them. Steve’s sessions highlighted that there’s nothing likeable about a narrative like that – audiences can’t trust it, it’s just not relatable.

Now more than ever I’ll carefully consider how I speak internally about products, or how I playback our progress. I’m really aware of the importance of the ‘how we got here’ parts of the story. Letting people see a complete picture of the challenges we’ve come up against, struggled with, and overcome makes for a more honest story, and showing our vulnerability through our failures is (hopefully) more endearing.

Lucy Tallon, Principal designer

Stories are everywhere

The thing I took away from Steve was the idea that we are surrounded by stories.

We are the lead actor in our own story. Our stakeholders are the leads in theirs. The people who use our products are part of their own story.

At the point they interact with anything we’ve created, it’s interesting to consider what our users’ mindset might be. Where are they on their current story arc, and how can we try to ensure that our product plays a positive role within it?

Steve’s series of sessions seemed very well-timed in the word we currently live in. We learnt that stories can be powerful and can be used for good, for example, using them to bring people along with us on a journey; to anticipate their needs and goals, and to have greater empathy.

But powerful stories can also be used in negative ways too. That’s something we need to be mindful of when we are using them to achieve our goals.

Matt Tyas, Principal designer

You can read about Steve’s workshops on his website.

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