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
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.
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.
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.
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).
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).
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.
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).
‘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).
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).
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