Posters. They’re part of our culture

Arch_Principle_4

Our workspace in Federation House is shiny and new, open-plan and airy, and best of all it reflects our teams’ progress. Whiteboards show what we’re working on now and what’s coming next – they’re chocker with post-its.

But we’re also beginning to fill our walls with posters. Instead of showing work in progress, our posters show off overarching ideas, ones that don’t change from sprint to sprint.

We posted about our 10 Architecture Principles back in April. We’ve since made them into a series of posters. Putting them up reminds us how we’ve agreed to work and makes our workspace ours.  

Posters: words by Ella Fitzsimmons, design by Gail Mellows.

Co-op Digital team

A new website: 12 months of digital product research

The Digital Product Research team builds things to think with. Over the last year we’ve researched a number of areas, and we’ve brought what we’ve learned from that work together in a new website: coop.uk/dpr.

Building and testing quickly

Starting from an idea about how we think the world works, or how we’d like it to work, we carry out experiments to find out if we were right, or why we were wrong. We quickly test and validate our ideas in a wide range of ways including making physical gadgets, building web apps, giving out flyers, knocking on doors, even experimenting on ourselves.

Stuff that matters

Whatever we do, we always start from one of our core beliefs:

  • people should understand and have control over the technology they use
  • technology should work for people and communities, not against them

And we’re always looking for new places where co-operation is a competitive advantage. Over the last year we’ve explored a few areas including insurance, financial freedom and community energy. And we’ve talked about some of it – we’ve blogged about some of our work on paperless billing, terms and conditions and security.

A place for our learnings to live

We’ve amassed a collection of learnings, ideas, prototypes and insights which we’ve brought together into one archive: coop.uk/dpr. Some of what we’ve learned along the way seems quite obvious (young people find it hard to visualise the long term future – who knew!).

Some are more surprising (an interest in renewable energy ≠ an interest in climate change). But we think we have some interesting stories to tell – not just about what we’ve learned, but also about how we’ve learned.

So please take a look, and let us know what you think. Specifically we’d like to know if the site is accessible – we’ve carried out some automated tests, but that’s no substitute for getting it in front of people.

And, of course, we’d like to know if you think it’s interesting.

If you’d have any questions about our work, let us know in the comments.

Sophy Colbert
Content designer

Transforming the Co-op wills service by combining legal expertise and digital skills

I’m James Antoniou, I head up the wills team at Co-op Legal Services. Over the last 10 months or so, me and my team of will writers have been working closely with James Boardwell’s team of digital specialists at Co-op Digital. Both teams wanted to make it simpler and faster to create a legally robust will for Co-op customers and by combining legal expertise and digital skills we’ve done just that.

Joanne Schofield wrote about how making a will can be daunting and how we’re trying to change that and more recently Becky Arrowsmith wrote about how we’ve improved the accessibility in our wills.

This is the first time I’ve worked alongside a digital team but I don’t think it’ll be the last. Here are my thoughts on it.

James: We looked at doing a fully online, end-to-end, digital service. I had a lot of reservations in that, and I think probably most lawyers would do, because they couldn’t see how a computer could be a substitute for 15 years’ worth of experience. So the way we built the service was as a hybrid between being able to take the benefits of the accessibility of starting online, but also making sure that everyone who went through the service took advice to make sure that what they were looking to do was, in fact, having the right legal impact of what they were actually looking to achieve.

So the digital way of working is something that was very new to me. I think as… as a solicitor you are… you’re working in an environment where you’re expected to know the answers, all the time. And coming into the digital environment, it was more about learning, and putting things to users and understanding what they’re telling us, rather than us telling them what they should know.

So, I think legal services and digital; I think it’s… it’s the future. I think it’s the way that legal services are going to be delivered mainstream, over the next sort of probably 5 to 10 years. I think at the moment there is limited routes to that online market. I think that plenty have tried and failed perhaps cos they’ve been offered a wholly digital service as opposed to a service where you get the benefits of the digital channel but it’s also backed up by some robust legal guidance and advice. And I think it’s that hybrid which is where the… the future of legal services lie; because it’s not just about accessibility, it’s about making sure that… that the right advice is being given. And secondly, and probably more importantly, that the customer feels that they are getting the service that’s of value to them and that they’re prepared to pay for it, and they feel that they’re protected, and that it’s something that is going to meet their needs.

Go to coop.co.uk/wills and find out more.

Making it easier to become a member

Last week we announced we’ve reached the 500,000 new member mark since we launched our new Membership in September last year.  

Earlier this year we also said that we want a million new members in 2017 and with that in mind, it’s really important that first-time users can register as easily as possible. That’s why, in our last sprint, the Membership website team focused on improving the user journey and reducing drop-outs.

Completing the online registration

To get an online member account you have to register on the Membership site. If you’re already a member then it’s a case of registering your card (or temporary card) you bought in store.

When we looked at data, only 34% of people who started to sign up as new members, ie those who hadn’t got any kind of membership card from coop.co.uk/membership were completing the journey.

Improving things for this user group is key to achieving our target of a million new members this year. Someone signing up here is potentially a new member that we might never see again if they leave the site at this point.

Something didn’t quite add up

Google Analytics told us that we were losing a significant number of people at the point where we asked new members to pay £1. At first we assumed that paying £1 was too much for some customers. But the 34% successful sign up rate didn’t match well with what we were hearing from users we’d talked to. We found that although some people questioned why we charge £1, their reactions didn’t indicate that a massive 2 out of every 3 of them would be put off by it.

From this, we hypothesised that the poor conversion rate might be down to people who were already members arriving at the £1 payment page. They would have already paid to join, so they could be the ones leaving at this point.

There are over a quarter of a million members with temporary cards who haven’t registered them yet. We know that after 28 days the chances of a card being registered falls dramatically so designing a user journey that helps temporary card holders succeed first time and become ‘active’ is vital.

How we improved the user journey

To solve this we added in another step into the process for anyone wanting to join as a new member. The important interaction change we made was to ask the customer if they had a Co-op card, rather than asking them to remember if they were already members.

screen shot of the 'check if you're a member' page showing the three types of membership card
We included images of the old ‘honeycomb’ card, the new blue card as well as an image of a temporary card as visual prompts. From there, if they have a card we take their membership number and direct them to sign in or register. Now, they don’t see a screen asking them for another £1. We only let people who say they don’t have a card progress further.

It’s working

Our latest data shows that 58% people who are routed to join follow this journey successfully: they pay £1 and become members. That’s a significant increase. Those we now redirect automatically to register are completing their journeys successfully too – which in its own way is important.

As an aside we’ve also reduced the risk of members duplicating their membership by joining online when they already have a membership number. This reduces the burden on our call centre, which currently is the only way members can link their accounts if they have more than one.

What we’ll be working on next

Our next improvement is looking at the sign in journey.

So if you haven’t done it yet it’s now even easier to join us!

Derek Harvie
Product manager

How user research is helping us improve the Membership site

My name’s Simon and I’m one of the user researchers on the Co-op Membership team, alongside my colleague, Vicki Riley. It’s our job to understand what members and non-members need from the service and find out what they think of it. This way we can act on their feedback and continually improve things. Whilst we’re responsible for user research, the whole team get involved in research sessions and meeting users so they can empathise with the people who use the services we’re building. This ensures they design with the user, and not themselves, in mind.

We don’t just rely on one method of user research to find out how people feel about the Membership service. We gather feedback in lots of ways and I wanted to share these with you.

Feedback through the website

The website has a ‘give feedback’ link. As of today, 7 December 2016, we’ve had 9469 comments. We’ve analysed them all and have been comparing them with what we learn from our other research approaches.

Phone call follow up

We often do phone interviews with people who have said they’re happy to be contacted about the website feedback they’ve given. This allows us to get more detailed feedback and also find out how people expect things to work.

Online surveys

We sometimes do online surveys of which allow us to range a wide range of people quickly and easily. These surveys are around 4 or 5 questions long. We’ve found that the easier it is for someone to give us feedback, the more likely they are to leave some.

Speaking to people in labs

We also speak to people in our research labs. These sound far more ‘scientific’ than they actually are. Research labs are usually a room with a computer, a microphone and a camera allow the rest of the team to observe the research. We invite people in, talk to them about shopping, loyalty cards, online services and Co-op Membership. We then watch people using the service as they complete tasks such as registering a temporary card or choosing which local cause to support. I ask them to talk me through what they’re thinking as they use the service so that we understand how they’re finding it.

Store visits

We already visit stores but we plan to do more of this.

Tracking website traffic

Finally, we also gather analytics from the website. This allows us to understand which pages people are visiting, how long they’re spending on pages, what they’re clicking or selecting, and which error messages are triggered most frequently.

By using a combination of these research methods, we have access to a wide range of interesting data about how people use the service.

Using research findings to improve

So here’s an example of how we’ve used what we’ve learnt from our research to make a change.

We’d seen through lab testing that people didn’t always understand that they could choose their own cause to support with their 1% for your community reward. We found people thought that we decided for them, or that they would email us later on with their choice. They didn’t notice there was something on the screen that they could click to choose a cause. Here’s how the page used to look:

The Membership page before our design changes. Many users weren't sure how to choose their cause in the 'your community' box

The comments from the feedback link told us the same thing. People had commented:

“I can’t find where to vote regarding where the 1% goes.”
“How do I select my preferred local cause please?”
“Should be able to select which charities I want to support.”

The analytics were backing this up too. We saw that a significant number of people were getting to the page with the ‘call to action’ (the bit where they could choose a cause) but they weren’t actually selecting one.

The team came up with an alternative design to try and make it more obvious how the user could interact with the page. It was a simple content fix. We added ‘See your local causes’ inside the box about ‘your community’. When we tested it with people in the lab, they understood it – they knew what to do. So earlier this week we put it live. Now the page looks like this:

New design of the Membership page includes a simple content fix in the 'your community' box. It now says 'See your local causes'

It’s early days but we’ve already seen more people selecting their cause and therefore benefiting their community. We’ve seen a 10% increase already. We’ll be keeping an eye on the feedback to make sure we’ve improved the journey. We’ll continue to research regularly and as always we’ll keep using what we’ve learnt to improve the service.

Members can visit membership.coop.co.uk to choose a local cause. If you’d like to become a member you can sign up for membership.

Simon Hurst
User researcher on the Membership team

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