Bringing non-digital experience into the digital team. It’s an advantage

I’m Gail. I’ve been a graphic designer for over 20 years and up to now I’ve worked predominantly in pedestrian signage systems, exhibition and information design projects.

These projects have mostly involved the ordering and arrangement of words (typography) and mapping systems on physical products to help orientate and direct people around cities and spaces.

A picture of Gail Mellows
Gail Mellows

But at the Co-op in the digital team I’m developing typographic guidance for designers and helping them create clear typographic hierarchies without using lots of different sizes and weights (which creates visual noise and makes things harder to read and understand).

In past projects this is what I’ve done in the context of displaying information on physical products in physical environments. Now I’m applying it to information on-screen.

Why am I now working in digital?

Just over 2 years ago I moved from London to Manchester with my partner and daughter. After looking at the design industry in Manchester, I wondered where I fitted into this young, predominantly male, techie and advertising-led industry in which I had few established professional relationships.

I decided to explore other ways of applying what I’d spent years doing

I came across the Ladies that UX group. The first meet-up I went to happened to be at the Co-op in Angel Square. A number of women from the digital team at the Co-op were speaking about their roles and how they had come to be there.

The panel were really encouraging about trying new things career-wise and taking a chance. Ben Terrett was also there and described the principles behind the development of Co-op digital products and services.

There were lots of parallels with my approach and ethos. At the end of the event, feeling pretty nervous, I approached Andrew Travers to talk to him about what I’d been doing.

I’ve now been at Co-op Digital for 2 months

I started by looking at how typography is being used across various products and services and using this information to develop specific typographic guidance for the use of Co-op’s new typeface, Avenir Next. The size, position, colour, juxtaposition, vertical and horizontal spacing of type has a very practical job to do as well as fundamentally conveying the character of Co-op.

For the team that work on our brand I’ve been developing ways of sharing information and best practice for using type, imagery and colour across digital and non-digital applications.

I’ve also had the opportunity to work on the Wills digital service.

It’s a steep learning curve for me

I spend a lot of my time moving bits of type up and down so that they look good as well as make sense as content (familiar ground) and wrestling with things like ‘the fold’, ‘screen real estate’ and CSS modules (unfamiliar ground).

I like the fact that the Digital team at the Co-op is actively encouraging women to work with them and offers flexibility around work and family commitments.

There’s been an open and positive reaction to me bringing my non-digital experience into the digital team. It’s seen as being an advantage.

Gail Mellows
Designer

Finding our way with a Co-op design system

Last week I received a tweet from some lovely folk out there who had questions on how we design and build things at Co-op.

I realised that a huge proportion of my working year has been devoted to helping create a new design language for the Co-op and I had quite a lot to say on the subject. This therefore, will be the start of series of posts charting how we are tackling prototyping and (more widely) design at the Co-op.

Background

A while ago the focus in the design community shifted from designing pages to designing systems. Using modular, reusable components that together fit any shape or size while retaining usability and brand aesthetic. We weren’t selling paintings anymore. We were creating living systems that must fit a variety of user needs and contexts.

I became aware of this way of thinking from Nicole Sullivan’s much cited article about the ‘Media Object’. She noted that the same design pattern was built many times over using the same code. Repeated many times, by many different developers. The idea that a design pattern could save thousands of lines of code I found interesting. Most noticeably, it turned me into a pattern hunter. Constantly looking for ways to save time, code and create more and more consistency in my designs.

Cut to the present day, and many large companies have adopted (and many open sourced) their design systems. Experts within the design community have evangelised their usage at many industry events. Designers and developers have adopted these practices. And the benefits of this approach have filtered down to our stakeholders. In fact at Co-op, we were doing it a long time before the logo changed.

Reasons why designing this way is good:

  • Every project starts from the same well researched baseline
  • It promotes a few (researched ways) of doing things that are documented
  • All components are shared and can be improved by anyone
  • Designing and building services is faster, cheaper and more consistent for users. As the library of components grows so does our knowledge about their usage
  • It is agile. By being subject to constant testing and iteration (things can and will change over time)
  • Things are allowed to be just functional, in testing or even a bit wrong. As long as they serve a user well at that moment. Things don’t always have to be pretty straight away
  • Because of the above, it allows the flexibility to launch services when we need to and test them in the wild

Challenges we face as a large organisation at the beginning of this journey:

  • Creating an active community with an open dialogue
  • Engagement from graphic design through to (at least) front-end developers
  • Input and iteration based on user testing (and keeping that pipeline flowing)
  • It not feeling like extra work but part of everyone’s day
  • Everyone taking ownership
  • Not having opinion based discussions
  • Designing ‘marketing’ patterns where needs are less clear cut
  • Agreeing on naming conventions
  • Keeping track of everything that gets designed, built and ensuring it is of a high enough quality

Let me tell you where we are now (and answer those questions)

Firstly, we do prototype. We prototype a lot. Very early on we began to translate our colours, logo and typography into HTML and CSS. This was so we could build Co-op branded prototypes quickly and easily. This was the beginning of a Co-op design system. We’ve had a few goes at it, trying this and that. Building things, then rebuilding them in another way to find what worked for us.

Currently, we have a SASS framework. This is the basic code that creates a Co-op look and feel. It can be used as the base for all our projects. We also have a prototyping kit (that imports the above) built on Jekyll. It allows someone with a small amount of basic HTML knowledge to build a simple prototype. It also means we can keep our snippets of HTML and SCSS organised by design pattern. In the world of the web this is all very basic, but the simplicity lowers the bar for entry and will allow us to introduce more and more colleagues to code. Some of our teams will need to prototype by injecting real data, or perhaps build a native app. Whatever they do they can do it from something that is built on standard web technology that will work for everyone.

Screenshot of the current Co-op front end toolkit

The Co-op design system is still growing and maturing. Most recently starting to need to contain other wider guidance on content (writing for the web) and user research. We are starting to understand that as a team creates more and more good design this needs to be worked back in to our base system. When a team feels it is ready, it is up to them to set up a review where we can decide whether it’s time to include their new patterns and code. We’re looking for researched, best practice design patterns that work well for real people. I make the comparison in this article to the way we would code these patterns as it helps me understand the methodology, but really these patterns are about great design. We want to create a Co-op design library that promotes best practice usability throughout all our services.

Secondly, yes. We are on Github. For those who do not know, Git is a technology that allows us to store many versions of an application’s code safely and securely. We’ve been on it for a few years in fact. However, in the last few months I have never seen so many exciting new code repositories popping up. When our products owners are ready to talk about their service, you can bet they will. Right here.

We’ve started on our journey to creating a design system that we are proud of, will never stop changing and, in the future will be open source.

A style guide is an artefact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem. Nathan Curtis

That’s the dream.

Questions, comments, help or jobs at CoopDigital –  I’m happy to say hello and have a brew.

Matt Tyas

Making design better by being open

TL;DR: GCHQ’s tech team published a paper on GitHub about their digital transformation. Lots of people should read it, so we’ve improved their design to make it clearer. GCHQ made things open, so we could make things better.

GHCQ’s activities are often highly contentious.

However few would argue that their technology capability is anything other than world-class, notwithstanding widespread concern as to how that capability is put to use.

Recently GCHQ’s technology leadership team published a paper entitled  “GCHQ: Boiling Frogs? Technology organisations need to change radically to survive increasing technical and business disruption

Example page from original design of GCHQ: Boiling Frogs
GCHQ’s Boiling Frogs paper

Anyone interested in digital transformation should sit down and read it.

It describes how GCHQ has embraced the culture, processes, practices and technologies of the internet era, optimising for agility.

It also explicitly encourages other UK organisations to adopt a similar approaches to their own digital transformation.

To give you a flavour, here’s the table of contents:

• Operating Model (including structure and interaction styles) • Organisational cultures • Use of accommodation • Approach to measurement • Skills management • Use of commercial suppliers • Leveraging Big Data • Approach to architecture • Use of processes and techniques • Approach to Security • Approach to HR

I only have two minor criticisms.

Firstly, the language could be clearer. Maybe the GCHQ team could ask someone who’s not a technology expert redraft a future edition?

Secondly, the paper’s amateurish design risks undermining the perceived importance of the content, and hence reduces its impact.

Fortunately, GCHQ made a point of publishing their paper via GitHub.com, the mother-lode of open source code and culture.

So, while we were loathe to edit the words, here at Co-op Digital we’ve been able to improve the document’s design.

We’ve also published our redesigned version on GitHub.  

Example page from new design of GCHQ: Boiling Frogs
Our redesigned version

Our redesign is not branded Co-op. The design is neutral. That should make it easier for anyone to share it. The words are the same, but it’s hopefully easier to read and less likely to be rejected as “a collection of clip-art and geeky blog posts” (not a quote from anyone at the Co-op, I hasten to add!)

We’ve used one of GitHub’s co-operation tools (aka a  ‘pull request’) to make it easy for GCHQ to incorporate our new design into a future edition, should they so wish.

Make things open. It lets us all make things better.

Tom Loosemore
Director of Digital Services

 

Back to Being Co-op

You might have heard about our rebrand over the weekend. We’re going back to the classic 60s clover leaf logo. We worked with North on the new identity and Creative Review have a good write up of that here. Huge thanks to them and Greg Nugent for helping us with this project over the last two years.

This morning Mike and I went to our Old Street food store in Shoreditch to see how it looked in the real world. The store looked fantastic, our colleagues particularly liked the new uniforms and lots of customers were taking pictures of the new signage.

Picture of Co-op Food Store in Shoreditch
Co-op Food Store – Old Street, Shoreditch

I’d like to say a big thanks to all our colleagues who have worked through the weekend to make sure everything was ready for 7am this morning. Rebranding our entire estate will take several years. We’ll also be taking our colleagues through a training programme, because these projects never work if they’re just cosmetic.

As we rebuild membership our own brand products will become more important and this new look brings a simplicity that helps them stand out.  The principles of user centred design can be applied to packaging and stores as easily as they can be applied to websites. A big part of that is making things simpler, clearer and more coherent.

Picture of Co-op own brand milk

There are some good examples from our past. In 1985 we were the first to introduce a system of traffic light food labelling. All based on feedback from users. We used ”salt” over “sodium” because customers understood that better.

Thank you to all the many people who have worked on this project from all of our businesses. We want to build a world class design capability in the heart of the Co-op, building on the talent we have here in Helen and the brand team and continuing to make all our products and services, simple and user focused whether it’s a digital service, a brochure or a piece of packaging. This is the first step on that journey.

Ben Terrett
Group Design Director

Design and Research Team field trip.

The design and research team at CoopDigital took a field trip recently to Manchester Metropolitan University’s Special Collections to see Projecting British Design: the Design Council’s slide collection. 
Bringing together a mix of product, graphic and industrial design from the post-war period, the exhibition reflects on Britain’s changing design aesthetic and its evolving understanding and appreciation of what constitutes ‘good design’.

We’re lucky in Manchester to have exhibitions as good as this one on our doorstep, and it gives us an opportunity to be an active part of Manchester’s design community. But these field trips serve a bigger purpose for us, helping us to sharpen our critical skills as designers and to see our own work in its wider context. A part of how we, as designers at the Co-op, stay curious, deepen our own learning and apply that to what the Co-op is building now and in the future.

The exhibition at MMU’s Special Collections runs until 28 May. It’s well worth a visit.