How to run a design crit and why they’re important

One of our design principles is ‘design in the open’. This means we choose to be collaborative, we show our early design work and invite feedback. Holding design critiques, or ‘crits’, is a useful way to do this.

Done well, they:

  • improve our designs
  • improve collaboration between designers and between disciplines
  • offer a different perspective
  • boost morale and strengthen communities of practice
  • show the decisions behind the design

I recently asked on Twitter if a post on ‘how to run crits and how to get the most out of them’ would be useful. People said yes.

So here it is.

What’s the point?

The purpose of a design crit is to give a designer feedback, to evaluate an idea and identify possible changes or different approaches. It’s not to figure out a solution there and then.

Crits can focus on (but definitely aren’t limited to) things like:

  • interaction of specific page elements
  • a specific user flow
  • the emotion a visual style portrays
  • competitor services

Who to invite

Having the right people there is essential. The temptation might be to fill the room with designers but inviting people from different disciplines will make sure you hear a range of perspectives. In most cases it’s good to start with content designers and user researchers because their work is so intrinsically linked with design.

But they’re not the only ones who really understand how design works. I’d be hesitant to blanket call out other disciplines, instead I’d say it’s up to the person whose work is being critiqued to use their judgement and invite individuals they think would offer valuable input into the specific thing they’re sharing.

A golden rule is to invite the maximum number of people you’d be comfortable hosting a dinner party for – a group big enough to encourage discussion but not so big things are unmanageable.

It’s best when the crit is led by the designer who did the work so they can explain the decisions they made around their design. It also means they’re there to receive feedback first-hand rather than hear chinese whispers. However, if that designer isn’t comfortable leading the session, someone else can facilitate and steer discussions while the designer makes notes on the feedback.  

When to run a crit

Run them often at the start of a project then less frequently as the project goes on. Early crits will most likely focus on top-level ideas. When you’re further along in a project, it’s useful to hold crits to look at particular issues with a view to making specific decisions.

They’re also beneficial before project milestones, for example, before it’s too late to iterate features, flows or ideas.

Actually running a crit

  1. Start the session by identifying the aim(s) of the discussion. For example, we want to:
    • improve the registration flow
    • understand if the design is easy to follow
    • assess whether the design meets the project goals
  2. Point out any constraints, blockers and considerations. For example:
    • any content that can’t be changed – this might be due to legal or policy restraints, or deadlines
    • anything that’s already been built and will take more work to change
  3. Show the design. At this point it’s useful to:
    • explain reasoning or constraints of that specific thing. For example, your navigation choice might need to be consistent with someone else’s work or all the content has been agreed and signed off
    • show alternative designs if you have any
  4. Facilitate discussion by:
    • encouraging the group to share 1 or 2 pieces of feedback. Give the option to do this on post-its for anyone not comfortable giving verbal feedback
    • prompting the quieter people so that nobody dominates the discussion
  5. Collect feedback in a format you can share. This could be Trello.
  6. Share feedback and next steps to the wider group while allowing people to give more – not everyone will be comfortable in the session.

One rule: be kind

Sharing work and opening it up to criticism can be a terrifying prospect. Here are a few ways we can make it less daunting and much more productive for everyone.

When sharing your work you must remember the golden rule: you are not your design.

When critiquing work remember to:

Listen. Then speak thoughtfully.

Crits should be a safe space for everyone to share their thoughts. Listen carefully. If you want to respond, consider whether your thoughts are relevant or whether they’ll progress the discussion.

Ask questions

Rather than stating “X is bad” or “Y doesn’t make sense”, ask questions about the reason behind a design decision. Yes, “what’s the reason for…” is kinder than “that’s rubbish”, but it’s also more useful for the session – if you were wondering about something, chances are the rest of the group are too.

State what’s fact, opinion or assumptions

Everything you say in a crit is your point of view but it’s worth clarifying if something is your personal preference or opinion, or whether it’s backed up by research. “My assumption is that…” is just as valuable in a crit than “user research shows that…”. Both are better than “that should be green/bigger/bolder.”

How do you do it?

Designing collaboratively and in the open is important and design crits help us do that. There’s no set method but this is one that has worked for me and teams I’ve worked with.

Do you place importance on critiques and design reviews in your organisation? How do they work? All crit-related tips and tricks are welcome in the comments.

Jack Sheppard
Lead interaction designer

Introducing our secondary colour palette

Since Co-op Digital began, we’ve mostly used 4 colours in our products and services. The majority have white backgrounds, blue Co-op logos, black text (sometimes blue) and our boxes and borders are grey. User interface elements such as buttons and error messages use additional colours but we’ve been quite cautious about using colour more broadly.

We wanted to keep things simple to focus on the design of our products but we’re now beginning to develop our visual language and colour will be a big part of this.

This week we’ve added a colour section to the design manual as well as 22 secondary colours to our palette. Here they are:

Grid of secondary colour palette showing blocks of colours and the hex numbers.

Choosing the colours for the secondary palette

The colours we’re trying out have their origins in the illustration and Food colour palettes from the Co-op brand guidelines. The first iteration was 8 dark and 8 light colours but designers didn’t feel those 16 were enough. They also said they looked kind of ‘muddy’ on screen.

We iterated and now we’ve got a range of dark, mid and bright hues. We’ve adapted them by brightening them slightly to make them appear more pure on screen.

Positive feedback on the primary palette

The feedback we’ve had on coop.co.uk and co-operative.coop has been positive. Users think the sites are easy to read, even on tablets and mobile devices. And making sure the colours we use are accessible, ie, that they’re high contrast enough to be clear and legible, is the most important thing.

However, there’s also an argument that the sites could be more exciting and the secondary colour palette gives us the opportunity to expand ways in which Co-op brand spirit is represented. Yes, we were cautious at first and we made sure we got the basics right before doing too much, but we are a commercial brand and we’re allowed to be a bit more interesting with how we use colour.

Giving designers alternatives

Co-op blue is a dominant colour, one that pops out and grabs the brain’s attention. This makes it great for our logo and for overall brand recognition. But, if a dominant colour is used in numerous elements on a page it can be difficult for a user to prioritise information or find what they’re looking for.

In the past, when our 3 brand colours (plus black for text) were the only ones available, some of our businesses have used Co-op blue behind white text. We use the WebAim colour contrast checker to check our colours meet the minimum colour contrast standards and the white text on Co-op blue isn’t as good as it could be accessibility-wise. Adding the secondary colours to our palette gives designers across the organisation alternatives. Co-op sites are now moving away from using the Co-op blue and are using the secondary palette instead.

Developing an approach to using colour

Along with the secondary colour palette, we’ve added a section on our approach to colour to the design manual. We aim to use colour with purpose (and also with restraint) so as not to make things complex for users.

We’re using colour to:

  • help structure content, eg, grouping things and helping users read content in a certain order
  • indicate what’s important on a page when there are no images
  • attract attention (our Twitter cards are a good example of this)
  • help highlight where action is needed, often by indicating a user’s progression through a service

Some colours already have meaning attached

There are some colour conventions in digital that users are familiar with. For example, a green button is widely used to indicate a primary call to action as a user progresses through a service. This is something we use but we also need other types like sign in buttons. We’re trying out other colours for these but wherever colour conventions already exist in the digital world, we’ll usually adhere to them. There no point making users’ lives harder.

A chance to be consistent

Co-op is a huge organisation and adding a secondary palette gives us the opportunity to create a consistent brand language on screens that’s appropriate to each context. Using just the blue, white and grey is arguably more memorable but it’s just not flexible enough for the wide variety of digital products, services, applications, forms, communications, dashboards and the rest.

Nothing’s final. We’ll need to adjust, add to or take away colours but a defined colour palette should help tie all of these things together under the Co-op brand.

Gail Mellows
Designer

3 reasons why sketching is useful in large organisations

Sketching can be really useful for teams working on digital products and services. It can help you quickly:

  1. Clarify your thoughts while you work through ideas, problems and potential solutions.  
  2. Communicate ideas to a wider team.

Recently, designer and illustrator Eva-Lotta Lamm came in and ran sketching workshops with the Co-op Digital Design team. Although sketching is something we already do, the sessions with Eva were beneficial because she:

  • showed us how to become more confident with our pens
  • encouraged us to be more comfortable sketching in front of the team
  • made us consider the right level of detail for what we need to communicate
  • shared tips to help us improve the quality of our sketches
  • made us consider using the technique in situations we hadn’t been using it in

Apart from these practical things listed, the workshops made us rethink the value of expressing ideas in visual ways within the Co-op – a huge organisation going through transformation.

Here’s why sketching is super useful.

1. Sketching can help us communicate more clearly

Often, there’s a lack of clarity within large teams. It’s not necessarily someone’s fault, it’s just sometimes hard to avoid Chinese whispers. However, sketching means there’s less room for misinterpretation.

Colleagues will have different learning styles, they’ll interpret things in various ways and they’re likely to communicate the same thing differently. Having something visual means there’s something tangible everyone can point to, to explain things clearly to a wider team or stakeholders. They’re showing the same thing, not their interpretation of what they heard days (or even weeks) before.

Of course, there’s something to be said for matching the level of detail in your sketch to whoever you need to convey your idea to. An abstract, visual metaphor help explain something technical to a colleague whose role isn’t technical, but if you need to talk through a webpage layout with a developer, you’ll need to include more detail.

2. It’s a quick, cheap and collaborative problem solving technique

Articulating a complex problem or idea can be tricky and sometimes, sketching it will help. However, being ‘good at drawing’ isn’t a prerequisite for giving sketching a go. Sketching has a low barrier to entry – it’s not about creating perfect works of art, it just needs to capture the spirit of what you’re trying to communicate.

Because we can sketch so quickly and cheaply, sketches can be easily iterated. We can also scrap them completely without feeling like we need to commit to anything.

3. It’s less about ownership, more about collaboration

When we’re working with people who aren’t used to working in an agile way, sketching could be a good way to introduce a more flexible way of thinking. It echoes the idea that nothing’s ‘final’ or ‘perfect’.

Teams can consider a problem and sketch ideas around it within seconds. Some will be potential solutions, some won’t. Either way, the quick pace helps us stay focused on the problem, and with each iteration we get closer to the most feasible solution. The constant discussion while various team members sketch makes the activity really collaborative.

Sure, it was the Design team that attended Eva’s sketching workshops but very few of us were super confident sketchers at the beginning of the session. Sketching isn’t a skill that should be owned by designers or even by a Digital team but it’s a technique we’d encourage all team members from Digital, policy, legal to get involved in. There’s value for everyone in it because it’s something we can use together to create visual interpretations of a problem or idea. This helps the whole team have a shared understanding which we believe could only be a positive thing for team morale.

Try it yourself

Here are 5 tips to change your note taking with sketching. You can watch Eva-Lotta’s video on the same thing too.

IMG_1674

Louise Nicholas and Ciaran Greene
Interaction designers

Co-op Digital talks service design at Design Manchester

Today’s the first day of Design Manchester 2017, Manchester’s annual design festival. From today until 22 October, there’ll be talks, exhibitions, workshops, films, fairs and parties across the city celebrating design in its various forms.

The Co-op is sponsoring the festival, and Co-op Digital is running and speaking at several events this year too. We’ll be talking a lot about ‘service design’ – something that’s really relevant to what we do here at Co-op Digital.

Group of people at The Federation for the launch of Design Manchester this morning, 11 October.

What do we mean by ‘service design’?

A ‘service’ is something that helps someone do something. Co-op services help our customers and members to save money; give to local causes; find out where their local Co-op store is and when they’re open; make a will or organise a funeral. These are just a few.

Co-op Digital has helped our Funeralcare team to give time back to funeral colleagues, so that they can spend more time with families when dealing with bereavement by putting parts of these services online which has made things simpler for users.

For businesses, service design is an holistic, end-to-end design approach that takes into consideration business, customer and colleague needs and creates shared value.

Service design is about collaboration and this is reflected in the events we’re involved in at Design Manchester.

Here’s a round-up.

Service design jam days

Service designer and user researcher Kathryn Grace from Co-op Digital is leading a two-part, co-created event on consecutive Saturdays. The first ‘jam’ day will be an introduction to the importance of service design in a city. Different companies and organisations from Manchester will be sharing skills and their approaches to service design.

The second jam day will be an opportunity to put into practice some of the things we learnt from the first day. The aim of the second day will be to develop a service within 24 hours.  

Read more about the service design jams

We have a great design community in Manchester and we’re privileged to help showcase those in service design. 

Panel discussion: Service design and Manchester

Technology Engagement Lead Emer Coleman and Co-op’s Group Design Director Ben Terrett will be part of the panel to discuss how cities grow and evolve. The panel will specifically be talking about how Manchester can attract people and businesses that can develop and maintain vital services that make a city work and make it an enjoyable and easy place to live in.

Read more about the Service design and Manchester event

Design city reframed

Co-op Digital’s Lawrence Kitson will be speaking about service design as a team sport. He’ll explore how we can make a difference and affect change by co-operatively designing great end-to-end services that solve user needs and provide shared value.

Read more about the Design city reframed event

Everyone’s welcome (not just designers!)

Yep, this is Design Manchester so we’re expecting to see a lot of designers over the fortnight. But our events are open to all. If you have an interest in how Manchester’s future is being shaped and how cities ‘work’, these events will be of interest to you. We’re mostly aiming to open up discussion and get people talking about, and sharing ideas about, the design of services across Manchester.

Kathryn Grace
Service design and user research

Gail Mellows
Designer

We’ve added tables to our design manual

This week, we’ve added a section about designing tables to our design manual. We’ve done this so that our tables are understandable, are used for suitable information and address user needs first.

This is the second update to the design manual since we publicly released in January 2017. We released our design manual so we could start to share design styles, patterns and advice for people building digital services at Co-op.

What we’ve done

We looked at a lot of different tables from around the Co-op to explore what kind of information we need to be able to present, and what a user needs to understand from it. We also looked at best practice in how data should be displayed working closely with the Co-op’s data science team. From this, we created a set of styles that can be used as guidelines for designing tables in our digital services.

Designing tables

In her book Letting Go of the Words, Ginny Reddish writes:

When a site visitor asks a question to which your first answer is “it depends,” that’s a clue that you need a table. What it depends on becomes the left column of the table. The answer to the question for each site visitor’s situation becomes the right column.

Tables are good for answering questions with multiple answers as they are a good way of presenting a lot of information in a way that’s easy to scan.

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

  • use a table to display data
  • format data in a table
  • use borders and type within a table
  • create a responsive table
  • code an HTML table correctly

We’ve got more research to do

What happens next is more important than the work we’ve done so far. We’ll be asking the design team (which includes interaction designers, content designers and user researchers) to see if our tables help solve design problems. We’ll continue to research how well they help real users find the answers they’re looking for.

We’ll update the design manual with what we learn.

What else have we done?

Created a simpler prototyping kit for designers

Testing our assumptions with real ‘in browser’ prototypes is an important part of building a new service. However we’d had feedback that the current prototyping kit was a bit difficult for some designers to set up. We’ve responded to that by building a more simple HTML and CSS only ‘copy and paste’ version that we think will help.

Added a section on 404 pages

When a user follows a broken link, they arrive on a 404 page. You can use the design manual to find out how to create a 404 page that:

  • reassures the user
  • helps them get back on track
  • doesn’t make them feel as though they’ve done something wrong

Tell us what you think

Check out our tables and 404 sections and let us know what you think. Your feedback will make the design manual better.

Matt Tyas
On behalf of the Design Manual team

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