Learn more about user experience, web development and digital marketingView training courses

Webcredible Blog

Dulux’s augmented reality Visualizer app has hit its biggest milestone yet, a massive 3 million downloads.

Webcredible, in conjunction with Dulux, String and Tessella designed the app which launched in May 2014. We’re very excited that it has reached such a vast number of users and has been recognised as an innovative first in the industry, having won 3 awards.

Visit the case study if you’re interested in learning more about how we developed the idea, customer experience and design for the app.

Making sure that text colours in your digital interface are accessible for your users is a really important aspect of a well executed visual design.

If you’ve ever been asked “I assume all the colours are accessible?” by your client and were unsure of what to answer, then this post is for you. The tips below will help you to comply with the W3C guidelines for text and colour so that you’ll always be able to make a confident response of “Of course!”.

Visual design plays a large role in communicating the business’ proposition and personality. When this works well, the design is appealing and appropriate in tone for the audience. Equally important though is making sure that what you’ve designed works for the broadest possible audience. For the subject of this post we’ll consider people with colour-blindness.

Colour blindness – colour and accessibility

Colour is an inexact and relative art. We all see colour slightly differently and our perception is literally ‘coloured’ by the context in which we view it, such as a device’s screen and the surrounding environment.

Being inexact we need to select colours that will perform well within a range of environments, e.g. bright or dark lighting environments, and that can be perceived by those with vision perception deficiencies. This should not be under-estimated as roughly 8% of men and 0.5% of women worldwide live some form of colour blindness.

In practice, colourblind people confuse certain ranges of colours, the main challenge being able to detect the difference between certain colours. The colours depend upon the type of colour blindness, however the most common form is the perception of difference between red and green.

The image below shows 2 mugs, one green, the other red. Left: standard vision. Right: how the image is perceived with a form of colour blindness – red and green are almost indestinquishable.

red-green-example

Design with additional visual cues to support meaning

Colour is commonly used to convey information in interfaces. For example:

  • Graphs and charts often rely on colour to differentiate entries
  • Websites are often colour-coded to differentiate sections
  • The active item of a menu is often signified with a stand-out colour
  • Buttons are often coloured to attract attention, or indicate their purpose
  • Forms elements use colour to show focus, correct entry or errors

As demonstrated above, the problem here is that colour alone can not be relied upon to convey difference. If we used the colours alone to indicate something important such as ‘stop’ or ‘go’ – the meaning would be lost as the perceived colour contrast is too low.

The example below show the colours red and green used to indicate meaning: positive and negative percentages and success and error states for forms.

colour forms

Now the same image with Photoshop Colour Blindness filter applied, you can see that it’s the additional visual cues of the up and down arrow for percentages, and the form’s tick and cross supply a second route to convey meaning when colour alone wouldn’t be enough.

colour-forms-filtered

Designing for sufficient colour contrast

The next thing to crack is ensuring that the foreground (text) and background colours you use provide enough contrast to allow colour blind users or those using a monochrome screen to view information.

Firstly: Identify if the text needs to be compliant

Text with meaning will account for most, if not all, of the text on your screen, such as headings, body text, labels, tag, buttons etc. These all convey useful information and need sufficient contrast.

Text as decoration e.g. text that is not intended to be ‘read’ and logotypes (the text that is part of a logo or brand name). These have no minimum contrast requirement. But why would you set your logo with colours that make it unreadable for some of your customers?

Secondly: Define the minimum contrast for each type of text

There are 2 contrast ratios to remember:

  1. 4.5 – 1: For regular weight text under 18pt in size
  2. 3 – 1: For regular text size of 18pt or over and bold weight text under 18pt in size

As you can see the weight of the font you use influences it’s legibility. So also bear in mind that if you like to use lighter weights you should check that your contrast ratio a little higher than 4.5 – 1, to be on the safe size

The image below demonstrates a variety of foreground and background colour combinations. The last 2 examples are particularly hard to read.

Colour-contrast-exampes

Colours can be deceptive

Checking your design in grey scale can be very revealing. Below: The previous image converted to greyscale. Notice how the bottom 2 examples of become completely unreadable.

Colour-contrast-exampes-grey

For further explanation please refer to the W3C guidelines on minimum contrast.

A simple process to guide your visual design decisions

Here’s a whistle-stop journey through a made-up design project.

1. Design in greyscale

The simplest place to start is to design in greyscale, as this focuses the designer to consider layout and visual balance before tackling the subjectiveness of colour. The design should be clear and easy to read, with a thought through text hierarchy in terms of position on the page, size, weight and shade.

Site-A

2. Add colour to your design

Your choice of colours will depend on the look & feel of your brand’s visual identity. This is time for experimentation to get the overall look you want – in this case, bright and vibrant background colours.

Site-B

3. Check your design for contrast

Now it’s time to check if your design meets the mark. You can do this several ways. I tend to look at the design in greyscale once again and see what effect the Photoshop Colour Blindness filter has on the overall design.

Below is the design in greyscale and with the Colour Blindness filter applied.

Site-C-grey-CB-filter

As you can see below – the main offenders are the coloured text boxes and blue link text at the bottom of the layout.

Whereas the 2 buttons (top right) passed the AA compliance test in the Snook Colour Checker, this was because their larger type size required a lower contrast ratio of (3 – 1).

Site-C

4. Adjust your colours

So now you know where the problems lie, it’s time to correct them by optimising your colour choices. We recommend the Snook Colour Contrast Checker Tool. To use it:

  • Enter your text HEX colour reference into the field at the top field of the Foreground Colour box
  • Enter the background colour HEX colour reference into the Background Colour box
  • The contrast ratio and compliance rating is displayed on in the Results box on the right hand
  • If you’re getting ‘NO’ it means that your contrast ratio too low
  • To adjust the colours and find a compliant colour combination, the easiest thing to do adjust the Saturation and Value sliders
  • When you get a ‘YES’ on the line WCAG 2 AA Compliant field you know that you’re on to a winner
  • Copy the HEX values and paste them back into Photoshop to adjust the colours of your elements

snook

After going through the design and making corrections to the non-conforming colour combinations, we arrive at a design which we can confidently state as colour contrast accessible.

Site-D

In summary

It’s not difficult to arrive at an accessible visual design, it just takes a bit of extra time as you refine your design and colour palette. The satisfaction gained from designing inclusively for the widest audience is very rewarding and will put you in a position for when you the client asks that question “Are the colours accessible?”. The answer will be a very confident “Yes!”

Further reading

Types of colour Disabilities

W3C: Contrast (Minimum): Understanding SC 1.4.3

There is great little book in the Webcredible library called ‘lunch at the shop: The Art and Practice of the Midday Meal’. It’s part cook book, part manifesto and describes the benefits of eating together at work along with a bunch of recipes suitable for communal catering.

This concept really resonates with me because ever since I can remember I have enjoyed preparing and eating food, and at Webcredible I am not alone. We are a greedy foodie bunch! From what I can tell this isn’t unique to Webcredible as there seems to be a UX wide obsession with the social and gastronomic elements of lunch (& breakfast & dinner…).

At our old office the most we could muster was microwaved leftovers, so when we designed our new office space one of the non-negotiable requirements was a full kitchen and café area so that we could indulge ourselves in eating. As soon as we moved in I hatched a plan to have a monthly company lunch prepared by and for the staff.

Month 1

I wasn’t sure how feasible it would be for everyone to stop work and eat together so I decided to run a pilot. We had a series of challenges to overcome:

  • How to turn on the new oven
  • Using an electric hob with a lock that no-one could turn off
  • Scaling up a recipe to feed 30+ people
  • Catering for meat eaters, veggies & vegans

To keep it simple we cooked a large Spanish style sausage Fabada with giant Judion Beans from Borough market, we filled our oven with jacked spuds and made a simple salad. The prep time was short and the food went down well along with a few beers. The pilot was a success.

lunch1

Month 2

The bar was raised when Nirish prepared Nepalese specialties influenced by his grandmothers recipes, with rice prepared by Hua, curry by me and dessert by Scott.

Recipes:

lunch2

Month 3

The office was transformed into a fantastic diner with pulled pork baps, veggie chilli, sweet potato fries and sprout slaw prepared by Rich, Mark, Chi & Tom.

Recipes

  • Pulled pork
  • Chilli. Tipped ingredients into a pot with enough chilli powder to bring down a walrus. Left it to simmer for a bit then served.
  • Sweet potato fries 

In my eyes having monthly lunches cooked by staff at Webcredible has been a huge success. It’s great excuse to get everyone in the company together and socialising. Well worth the effort it took having a kitchen installed in the new office!

If you’re looking for your next user experience opportunity (and happen to be a first class cook!) we might be the agency for you! Check out our vacancies and you might be enjoying an office-cooked feast sooner than you think.

The way you kick-off a project can make it or break it. Yet often, we dive straight into delivering against the project plan and things go awry that could have been prevented by an effective project kick-off.

Here are a few things you can do to kick-off your project in a more successful way than just saying ‘Go’.

1. Get everyone together

I mean everyone – the client, the third party agencies, the core team. Anyone that will be working on the project at some point, not just the people that have the first set of tasks in the project plan.

This is beneficial because it means everyone can meet each other and get to know who they are working with. It wouldn’t be unusual for you to never see these people again (as email & phone communications often take over) so putting a face, as well as some personality, to the email address is important. For junior members of staff this also has the benefit of making the client more approachable.

Having a bonding experience at the very beginning creates a sense of ‘one team’ – and people communicate and deliver better for people they have personal understanding of.

Think you can’t do it because not everyone will be free at the same time or you can’t fit everyone into a room? It doesn’t have to be long, and it doesn’t have to be in person – video conferencing or Skype is a good enough alternative.

2. Talk about over riding objectives

Having a single vision for why this project is happening so that the whole project team understands it will allow better decision making throughout the project, particularly for decisions that have to be made on the fly.

This is ideally done by the client (straight from the horses mouth so to speak) and whoever has had the conversations with the client to shape the project. These are the people who can best explain what problem the project is trying to solve, and why. After all, you’re not really building a website just because someone wants a website, it’s because you want more people to find your products, for example.

3. Clarify roles and responsibilities

Job titles may not describe what someone is actually doing on the project, and job titles often mean different things in different industries or organisations. When you go around the table doing introductions, make sure each person describes their role on this project, not just their job title.

This also helps people know how they fit in to the team, and everyone knows where to go with problems or questions.

4. Definition of deliverables

Similar to the lack of consistency in job title terminology, names of deliverables can also mean different things to different people.

Not all tasks need to be explored, but ensure that everyone understands what outputs they’re getting from which teams. Simply saying, the design team will deliver the designs can leave ambiguity – are they delivering them as Photoshop files, for every page or just key pages, with interactions annotated or not…

Key events should be discussed and scheduled at this point as well (key delivery dates and meetings for example).

It can be hard at times if you don’t know what you’re delivering – for instance, if you need to do user research to know what strategy or design work needs to be prioritised. But at this point you can make assumptions even if you don’t have complete clarity, and ensure the teams know who they will be delivering to, even if they don’t quite know what yet.

5. The PLAN

Try and keep it as simple as possible to make sure it’s relevant and understandable for everyone in the room.

In as much detail as possible the plan should cover how and when things happen, but resemble more of an approach than a detailed project plan. When you’re looking at the plan, encourage group discussion, your plan at this stage shouldn’t be concrete so update the document during the kick-off to flex to new information.

6. Risks and assumptions

I always ask “what could go wrong” what are the risks – for all parties, agencies, internal teams, client, stakeholders. Then think over possible solutions as a group.

The difficulty for most projects is the client relationship and how you approach risks in the project. Honesty is the best policy, and starting your relationship in this way will encourage that behaviour for all teams involved, so any issues are confidently brought to light immediately.

7. Be prepared for the kick-off

There are a few things you’ll need to bring or prepare for this meeting to make the most of everyone’s time, including:

  • Relevant sales documents – briefs and proposals
  • Research on domain, industry and client
  • Invite the team to register / log-in to any technology that you’re going to use to manage the project so everyone can get used to it early
  • Send out an agenda, and always run your kick-off’s in the same format – your teams will then know what to expect and it’ll run much more efficiently
  • Do a rehearsal beforehand – then you have a sense of how long it will take

These are the main things I try to do for our kick-off’s to help projects run smoothly from the offset. I’d love to know what you do that you find useful so feel free to pop them into a comment below.

If you’re interested in learning more about project management I teach two courses, digital project management and agile project management.

I’m very excited to announce that after 6 months hard work researching, designing and testing the amazing new brompton.com is live!

As with all user-centred design projects, we always start with a good dose of research (business requirements gathering and user research). Re-designing the website for iconic British brand, Brompton Bicycles was no different.

Their mantra of “Made for you, Made for cities” meant they jumped right on board the user experience philosophy of making sure that their digital interfaces were as delightful to use and well-engineered as their products.

Read on if you want to explore some of the lessons we learnt along the way in case you:

  • a) love Brompton and you’re fascinated for a sneak preview into how the website redesign progressed or
  • b) want to learn from our experience to get a few quick tips from a real project

So, here are the lessons we learnt and a sneak preview behind the scenes of the Brompton “Made for you, made for cities” website redesign, starting with user research.

The plan of action for Brompton user research

The key techniques chosen for the user research were:

  1. Guerrilla user research: We did a lot of guerrilla research, hanging around in bike shops so we could interview bike owners to find out about them and what they thought of the brand. We also talked to many Brompton owners, stopping them on the street to ask questions.
  2. Analytics data: We did research through analytics analysis. We used Google Analytics to work out what the key user journeys through the site were, where people were dropping off, behaviour trends, platform usage etc. It also helped us to identify what was missing from pages and what SEO opportunities were open for Brompton to increase their traffic. Identifying additional keywords to target was key for the success of the website moving forward.
  3. Shop visits (Ethnography): We also visited shops as part of our guerrilla user research to understand how dealers sold them. This was about seeing how dealers needed to use the website in the sales process by watching them use it in real scenarios. This uncovered  the frustrations resellers had with the site as it was and what customers asked them about
  4. Focus groups: We ran focus groups at Webcredible HQ using the old Brompton website as stimulus to explore what people liked and ideas of what we could do moving forward. We then looked at what made ‘owners’ and ‘prospects’ tick and what they each needed from the website so we could make sure that both user groups were designed for.
  5. Stakeholder engagement: We also planned in multiple stakeholder engagement workshops with the senior management at Brompton. This was really helpful to ensure their priorities were considered and everyone came on the same journey. Kicking off with a stakeholder workshop was great, it got the whole company engaged and helped us to really understand what their priorities were. Everyone had an opportunity to share what they had a say.

Why was user research important?

The most important objective was to cover as many different user groups as we could. A common trait among Brompton owners is that they aren’t ‘typical’ cyclists, and we all know it’s dangerous to pretend we know the thoughts and natural behaviours of our users without observing them properly. So, we spoke to commuters, as well as doing research in bike shops.

It was key for us to cover as much of the international market as we could as well. We did interviews with business stakeholders worldwide, including those from US, China, Taiwan, Holland and Italy to make sure that we considered cultural differences, requirements and needs, how the bike was used in different cultures and how the brand was perceived.

Spending the time doing user research upfront was really important, as with all our projects, and we used it to create a digital strategy based on real perceptions and needs of users. We then addressed the current frustrations and reservations that people had with the website and brand.

Did you learn anything interesting about the Brompton brand?

The findings from our research with Brompton can be split into 3 major themes, one related to the international use and perception of Brompton, one around the UK perception of Brompton bikes, and one around how even rock stars use them…

  • There is a huge amount of commuting by bike across the world, particularly in places where people don’t have much space to live, having a bike that folds up is really useful.
  • The English heritage is hugely important in the Far East market.
  • In the US, people don’t tend to commute by bike but instead like to take bikes away at the weekend. The Brompton meets this need by easily fitting in to an RV and has the performance of a non-folding bike.
  • In China, they have a basket attachment so they can use it in a supermarket and unfold it ready to ride home.
  • Taiwan has meet-up type groups that travel to different street food stalls every Friday on their Brompton’s – they ride and eat together.
  • In the UK, people associate folding bikes with getting a train. “I don’t get a train so I don’t need a folding bike” was heard numerous times during research, despite a person meeting all criteria for needing one.
  • Bon Jovi’s road crew had been in the week before and had all just come back from a gig. The whole crew had bought Brompton’s to get around cities in downtime. When they are finished a gig they threw them in flight cases with the instruments and shipped them to the next place.

All of the above findings were key insights we fed back to the company – they are real perceptions and use cases that we addressed in the project.

What were the deliverables from user research?

The above insights were taken back to Webcredible HQ and the walls were smothered in post-it notes ready for analysis and recommendations. This was used as a basis for creating personas, which in turn aided in developing a digital strategy. The process went a bit like this:

  1. Stick post-it notes to the wall, group things together, map ideas and make suggestions
  2. Create customer journeys and personas
  3. The above is all an iterative process, with the Webcredible team and Brompton stakeholders taking part
  4. Present the digital strategy back for sign-off
  5. Get going on design & build!

 

How research fit into the larger project

  • Step 1. research.
  • Stage 2. Create a strategy and roadmap – we refer back to this at every stage, when you’re designing and you have an understanding of your customers it is much easier to design and make something that will meet their needs.
  • Stage 3. design, iterate, build, test and launch! (OK, probably more than just three stages…)

What we learnt for next time?

The biggest lesson I learnt from the project was to do with Guerrilla user research.

Guerrilla research is hard work, you need to be well rested and clear headed to be able to stop people you don’t know in the street, who really don’t want to talk to you. It’s very hard to document as well, people don’t like having a camera put in their faces, but if you don’t record it then it’s hard to document. So, when you’re trying to do a lot of research in a short amount of time it’s important to think how you can record it. I ended up writing it down in a notepad. Next time, 2 people – one talks, one takes notes.

Also, don’t do what I did – I spoke with a woman who was looking at thermal tops, she was a famous actress and just needed to buy some thermals and didn’t seem impressed I didn’t know who she was!

—————————————————————–

So, there it is – a quick lesson learnt on guerrilla testing and an overview of how to structure a user research project. If you’d like to learn more then we have a great user research course run by our Head of Research, Isabel – and loads of events, so sign up for our newsletter to be the first to know about them.

If you’re a Brompton customer or are interested in purchasing one of their bikes – take a look at their amazing new website, it’s live now!

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

Training academy

View training courses

About us

We're a user experience agency (UX agency) that creates people-centered, efficient and delightful digital experiences.

Get in touch on 020 7423 6320