We’ve updated the ‘forms’ bit of our design manual

On 26 January 2017 we posted to say we’d released our design manual so we could start to share design styles, patterns and advice for people building digital services at Co-op.

We’ve now updated the section about making forms. We’ve done this so that our forms are clear, simple and easy to understand for anyone who wants to use them.

The forms section now includes information about ‘inputs’ (any point that the user gives us data), ‘patterns’ (ways to solve commonly occurring problems) and advice about how to design a good form.

Form inputs and patterns

We’ve updated our form input and pattern guidance with things that the design team has learned over the past 2 months.

You can use the manual to find out why, when and how to:

  • use things like radio buttons, checkboxes and text areas
  • ask people for personal information like their name, address, date of birth and so on
  • tackle recurring patterns like validation messages and ‘progressive reveals’ (showing more information based on a previous answer)

Designing a good form

But, we didn’t want it just to be a pattern library. As Steve Krug said in his foreword to ‘Forms that work‘ by Caroline Jarrett and Gerry Gaffney:

“[Form design] isn’t just about colons and choosing the right widgets. It’s about the whole process of making good forms, which has a lot more to do with making sure you’re asking the right questions in a way that your users can answer than it does with whether you use a drop-down list or radio buttons.”

So, we’ve included advice about forming, structuring and wording questions to encourage us to consider the effect on the user at every point of the interaction.

What’s next

The next thing we’re going to look at is how we should design tables and data visualisation at Co-op. This will include research about:

  • how words and figures are presented
  • horizontal and vertical space
  • type sizes and weights
  • lines
  • colour
  • basic trends and comparisons

We’ll update you with the things that we learn.

Tell us what you think

Check out our updates to the form section and let us know what you think — you can now send us feedback directly from each page of the manual, without having to email.

Your feedback will make the design manual better.

Joanne Schofield
On behalf of the Design Manual Team

We’ve released coop.co.uk/designmanual

Today we’ve released coop.co.uk/designmanual. The digital design manual is the new version of the ‘Co-op style guide’. In June 2016 I wrote about our progress with how we design digital services at Co-op. Since then, we’ve fixed the basics, taken a fresh look at what the design manual is for, and we’re now providing a stronger baseline for future Co-op services to be built on.

There are actually 3 things that help us design digitally:

  1. Design manual: our guidelines on digital design.
  2. Front-end toolkit: the Sass (CSS) that gives the design manual and our services their base look and feel.
  3. Prototyping kit: that allows designers and developers to quickly test and iterate services.

The design manual can help if you:

  • design or build digital services at the Co-op
  • write digital content for the Co-op
  • are checking if a service meets the standards, matches our design principles and the Co-op’s values

We want the design manual to:

  • help teams release faster and focus on user needs rather than spending time on the basics
  • help document what we learn from research so we apply it in our work
  • be a collaborative document that is widely and regularly contributed too

The design manual isn’t a set of rules, it’s a strong backbone for our digital services. It will change in line with learnings from user research, the changing business landscape or new technology. The design manual and its assets are the starting point for designers to design, not paint by numbers.

design-manual-1

What we’ve done

Reworked our basic design system

We’ve actually removed quite a lot from the style guide. At least for now anyway. It’s ok if a service still uses these things but we want evidence of how they’re working for users before we add them back in.

Some of the changes we’ve made are:

We reworked our typography

What we had worked well for our printed material. But, it needed to be bolder and more flexible so it’d be suitable for different devices and have a better vertical rhythm (the vertical spacing we use between text and other page elements) to make it more easily legible on screen.

design-manual-2

We added guidelines for writing for Co-op

Writing for digital is different to writing for other mediums. It’s about finding and doing things quickly — getting maximum meaning into minimum content.

We looked at how we approach accessibility

Equality and equity sit at the heart of the Co-op’s values so it’s important to us that anyone can use Co-op digital services. Becky Arrowsmith recently wrote about how we’ve been improving accessibility in the Co-op wills service.

We created some design principles

Our principles help to align ourselves around some central ideas that will guide our future design decisions. We’ll be writing more about these soon.

We’ve given it a new name

It’s now called the ‘design manual’.

This signifies a move away from ‘rules’ about design elements, to evidence-based advice on how design patterns are used in combination to create compelling digital services. This advice will evolve as we learn more about what works for the people who use our services.

What does this mean for our current services?

As a favourite quote of mine from information architect Abby Covert says:

‘Perfection isn’t possible, but progress is.’
Abby Covert – How to make sense of any Mess

You’ll start to see more of Co-op’s digital services sharing this updated design language creating consistent experience across the wills service, Membership, co-operative.coop and coop.co.uk. We don’t expect every service to suddenly shift all of their design work over to match the updated design language though. Instead, you’ll see a more gradual iteration as services adopt the updated styles – something many of our designers are already doing.

What’s next?

Most importantly we want to iterate and release much more often. This is an extra part of everyone’s job so keeping this momentum up is always the challenge.

We will:

  • create a more visible backlog of upcoming improvements based on user research and live services
  • put in place a clear way for colleagues to feed into the design manual
  • look at what our shared design language for more complex design elements should be
  • communicate changes to the design manual effectively and widely
  • add more guidance about writing for Co-op
  • find a way to host and link to user research from design elements
  • develop the user journeys and information architecture for users of the design manual
  • link to live examples of design patterns in use
  • create a more simple HTML and CSS template for developers
  • continue to refactor and improve the front-end tool-kit
  • do ‘show and tells’ on each release

Finally, a thank you

Creating and maintaining a strong design system is not easy. It requires a lot of buy-in from an organisation and a lot of extra work from its contributors. With cooperation being at the heart of what we do it’s no surprise that I’ve had this from all the service teams, business units and senior leadership I’ve worked with as well, of course, from the design team. Thank you to everyone – too many to mention – who has been involved so far.

The design manual will continue to grow and evolve as our services do. You mark my words.

Matt Tyas
Interaction designer

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

Visiting Edge Hill University

Last week Laura Hiard an interaction designer and user researcher Tom Walker visited Edge Hill University. Tom graduated from Edge Hill 2 years ago and was invited back to talk to some third year students who are currently studying web design and development.

Picture of the interior of Federation House
Laura Hiard & Tom Walker

Why did you do it?

Laura: I graduated  3 years ago and remember what it was like to be in my final year and how unprepared I was for the real world. Since then I’ve worked for a number of companies in varying roles and I’ve learned a lot. I felt like I’d be able to connect and hopefully offer something of use to them. I also saw it as a good opportunity to practice my public speaking skills with a slightly more forgiving audience.

Tom: For me it was a similar thing. I was on the same course as these students just a few years ago and it felt good to have an opportunity to try and curb some of the fears and worries that I had around that time.

Picture of Edge Hill University
Edge Hill University

What did you speak about?

Laura: Our brief was to speak to the students about anything we felt would be useful, but to discuss how we incorporate the user into our processes and decisions. With that in mind, once we spoke about doing the talk together, it became clear that it would be good to highlight within a specific example how user research and design work together.

We began by showing the difference between user experience design and service design, and the importance of starting with user needs to make something that’s not just usable, but useful too. Then, we discussed how to use these, along with hypotheses, to make design decisions.

Tom: We also took the opportunity to give the students some advice for their working lives, based on our own experiences. I think that part went down particularly well. We spoke about how to make the best of a bad working situation and how to keep learning and striving for their goals. Their tutor gave me some really positive feedback about that part.

A picture of Lara and Tom talking to third year students at Edge Hill University

What was the response like from the students?

Tom: The response was great. We got some really astute questions about our work process while we were there and a few students even reached out to us on Twitter afterwards to ask advice.

Laura: A few of them even set up Twitter accounts after we said how useful it can be for networking.

What did you learn?

Laura: I learned that there definitely seems to be value in going out and speaking to students. Talking about what a real working day is like in the careers that they’re striving for, and introducing them to new practices that they might not yet be familiar with. After some feedback about them wanting a little more detail about some of the topics we covered, we know what we’d change for next time. We heard that some of the students were later looking at the Co-op jobs site, so we must have made a fairly good impression.

For students that weren’t there, what advice do you have for them?

Tom: A couple of things. These are the points we touched on during the talk. 

Immerse yourself and continue learning outside the classroom. Which is a lot easier than you might think. You can read and reading doesn’t have to be boring. You can do that on Twitter or read some Medium blogs or a few articles. Try to attend meet ups and get to know the community. And talk to each other. If you have read something, tell someone about it. Ask them about the things they have read or the meet ups they’ve attended. Then continue into your career.

Identify your own personal weaknesses. Studying for a degree is difficult and does take time but don’t give up. If you’re not good at something, try to understand why you might not be good at it and fix it. I struggled with code when I was a student. So I filmed myself talking through my code and then watched it back. It helped me cemented my learning and understand that it was some basics stuff that I didn’t quite get. Once I knew that, I knew what I needed to do to change it.

Thank you to the students and staff at Edge Hill University.

Laura Hiard and Tom Walker

 

Design Manchester 2016

Today sees the start of Design Manchester. I’m delighted that we’re partnering with them as the headline sponsor. It was great to see so many people here at Co-op for the partner launch event the other night.

Picture of Malcolm Garrett
Malcolm Garrett, Co-curator Design Manchester

Manchester is a known leader in the creative and media sector, with a vibrant eco-system of design and technology companies. The Co-op has always had communities at it’s heart and it’s vital the Co-op plays an active part the design and technology community.

img_8357
Sir Richard Leese, Leader,  Manchester City Council

I’m really excited about all the events this year and especially the things we’re helping to host or organise. The Women in Print exhibition here in our atrium from the 13th October, the Ladies that UX event on 18th October, the two day Generational workshops on the 17th & 18th October or the work we’re doing with our Co-op Academies. More about those events in due course. You can find the full schedule of events for DM16 here.

A picture of the Women in print exhibition
The Women in Print Exhibition at the Co-op – 1 Angel Square

We’re looking to build a world class design capability here in Manchester. So we’re hiring. If you’re a designer – print or digital and you’re interested in working with us get in touch.

Ben Terrett
Group Design Director

 

 

Co-op Membership after 2 weeks

It’s been over 2 weeks since we launched our new Co-op Membership. During this time over 2,000 members have given us feedback on how they’re finding Membership and in particular using the Membership website.

Picture of our new Co-op Membership card.

As a product manager working on Membership, feedback from our Members is really important. We’re using this, along with analytics. The analytics show us general user behaviour which we’re using to help to determine the areas to prioritise. As a direct result of this we’re making lots of changes to the service.

Derek Harvie
Derek Harvie – product manager – Membership

Some members said that they weren’t sure how to carry out some self-service tasks, such as updating their address or ordering a replacement card. So, we made the labels of the links clearer. This is important to get right because the majority of calls to our contact centre and questions on social media are about tasks just like these.

Some new members joining our Co-op for the first time said that it wasn’t clear what would happen after registration. Were they fully registered? Would they get a new card? So, we have updated the registration “flow” on the membership website to include a full welcome email that gives information about when their new card will be posted, and confirm their account has been fully registered.

Thank you to every member who’s taken the time to feedback already. Hopefully you’ll see that we are listening to this and you can see the changes we’re making to make Membership better for everyone.

Derek Harvie
Product Manager

 

Product management

Hello, I’m Andy Pipes and I’ve been working as a product manager here at the Co-op for nine months. During that time I’ve been helping Funeralcare rethink how we deliver our service to clients when a death has occurred.

Picture of Andy Pipes
Andy Pipes

I’m starting to take on some other responsibilities now and one is hiring more product managers to come and work with Co-op Digital on other amazing projects. This has given me chance to reflect on what kinds of product leaders might be required at a place like the Co-op.

Often, when I explain to people that I’m a digital product manager, I’m greeted with bewilderment (“Wow sounds complicated!”) or ignorance (“Oh, so you’re in IT then?”). It’s not surprising – the job title isn’t the clearest. Most people understand that products are designed, made, tested and used. But managed?

‘Product manager’ has gradually emerged in the past decade as the title to describe the person charged with fully understanding the problems that a product or service is meant to solve. But that’s not their only function.

As high-tech companies began to adopt Agile software development practices, the role of ‘product owner’ (the person responsible for making and prioritising the backlog of work in an agile team) started to be rolled into the product manager’s job profile. To complicate matters further, some organisations threw in design or technical skills into the “competencies” a typical product manager was asked to bring to the table.

It’s no wonder there are so many flavours of product manager these days. And also no surprise many of them describe themselves as “all rounders”.

The types of people who I think are perfect for product leadership roles come from all walks of life. Some might have been working as a “product manager” for some time but not have the job title to reflect it. Others may excel at an engineering, design or business positions and been asked to take on more general responsibilities. There is no one right “track” to becoming a product manager.

What’s most important is having the right mindset and attitude. (I’ve written about this before.)  When interviewing for a product manager role, I listen for people who just love to talk about real people, struggling with real problems that they want to solve. This is a good sign they’ve got a well of curiosity unlikely to run dry. And that they’ll have the energy to keep at it until the right solution is found.

These people tend to be straight talkers, too. They know business-speak or technical jargon gets in the way of understanding and empathising when explaining a user’s problems to a team whose job is to try and solve them.

The team often turns to the product manager for decisions, leadership and assurance. But it’s a fine balancing act. Keeping a multi-disciplinary team motivated and productive does not mean dictating answers. Nor does it mean an equal voice to every member of the team in every situation. Sometimes, you need to guide the discussion with a firm grasp of the “why”. Other times you’ll need to keep the team exploring new options until they get unblocked.

I’m not sure there’s a typical day in the life of a product manager. One morning you might be describing the problems a user has to a designer or developer. In the afternoon, you might be presenting a new opportunity to explore in your market to an executive. You could be called on to analyse some data that could provide evidence for a particular approach. Or sketch out for a stakeholder how you plan to tackle an upcoming theme of work. You try to keep your team energised, and motivated with clear, worthwhile goals. You talk a lot. You listen more.

Picture of Andy Pipes

What the product manager helps their team to achieve day-to-day will also depend on the type of project they’re tasked with leading. The Co-op has all sorts of projects – big and structured, all the way through to loose and lean. Large transformation programmes need product managers with strong communication skills and the ability to build solid stakeholder relationships. Service design projects like Online Wills need a clear product vision, and attention to detail and delivery. Experiments like Paperfree are in the earlier stages of development, and need its leaders to be more comfortable with some of the more nebulous problems they are trying to discover, and validate.

We need all these types of product managers for projects happening right now at the Co-op. Think you’ve got the mindset? Take a look here for all the details.

Andy Pipes
Head of product management