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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s