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

Design & creativity

If you want to be creative, move away from your desk. Go for a walk, just like Beethoven did. At Webcredible, we’re always experimenting with different techniques to foster creativity. A lot of the ideas we’ve implemented for the Webcredible Training Academy have come out of the ideation-through-play workshops we ran with trainers, one of which was a Design the Box game. The objective is to create a physical box to sell your ideas. We posed the question “How would you sell the Webcredible Training Academy if it was sold in a box?”

We had 10 participants divided into 3 teams. A week before the workshop, we emailed a request out to all the staff to bring in their empty cereal boxes. We received loads! We flipped the boxes inside out and glued the edges back together so we had blank boxes to work with. Other materials at our disposal included pens, sharpies, A4 sheets of paper of different colours, post-its and basic art and craft supplies (e.g. pipe cleaners, ribbons, glue, sticky tape, stickers, rubber bands etc.).

The game was divided into three phases: filling the box, making the box and selling the box.

Phase 1: Fill the box (10 mins)

Before making the box, the teams spent some time discussing what’s inside the box, what was important to convey the vision and what made their ideas different or special. Some of the questions we tried to answer were:

  • What is the value proposition?
  • Who is the target audience?
  • What made it different to similar offerings from competitors?

Team ‘MindCredible’ discussing initial concepts

Phase 2: Make the box (30 mins)

This was the fun bit – building the physical box. We used the following prompts to help the teams get started:

  • What’s it called?
  • Who’s it for?
  • What is its tagline or slogan?
  • What are its most compelling features? Benefits?
  • What imagery would make it stand out to you?

The teams scurried to gather the right materials for their box. Having physical objects to touch and play with helped teams think beyond digital. The very act of building a physical product got them working together, each member contributing to the box in their own unique ways.

Alex Baxevanis, one of our most experienced trainers wrote a little story to go on the side of the box. It was about his own UX journey, the challenges he faced and how we learned the skills he needed along the way.

Team ‘Conquer!’ building the box

Phase 3: Sell the box (2 mins per team)

Each team pitched their box back to the group for 2 minutes. We listed all the ideas from three teams on a whiteboard as they presented.

Team ‘Conquer’ selling their box: Conquer your UX fears! Climb the digital mountain.

After all the teams finished presenting, each participant voted on the ideas by placing dot stickers next to their favourite ideas on the whiteboard - 3 stickers per participant. Team ‘Digital Superstars Bootcamp’ the clear winners with 17 votes!

So which ideas turned into reality?

Training journey map

One of the teams created a physical parallax scroll to show the personal and professional development journey that a training participant would take, an idea aptly named ‘ Climb the UX mountain’. That idea helped us develop a training journey map which grouped the courses into the relevant steps of a product design and development process. We further iterated the design through card sorting with internal staff and training participants who sorted the courses into groups that they found logical.

Modular course format

Another popular idea that came out was splitting the courses into smaller courses. We used the idea to break apart our courses into smaller self-sustaining 1-hour modules. These modules made the courses easier to digest for the training participants and easier to create and deliver for trainers. Also, any of the modules could be taught as a smaller workshop.

The 3 boxes proudly on display in the office

At Webcredible, we’re always experimenting with ideation through play to get the creative juices flowing. If you would like to learn how to run UX workshops that foster creativity and innovation, check out our innovation & product development course or contact us.

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

If you look closely at the principles of user experience and UCD, they’re useful far beyond the web. Even if you manage or develop non-digital products and services, business plans or traditional marketing communications then don’t think that UX isn’t for you, it is!

At Webcredible, we’re doing just that. As part of our continuous improvement programme we’re using our UCD methodologies and expertise to improve our own Training Academy. This is the first of a series of blogs that will take you along the challenging (but fun!) journey that we’re going through in applying UCD principles to product development, with the aim of improving our training offerings.

This blog is going to share our process and learnings from step 1 – stakeholder research.

Why do stakeholder research?

Stakeholder research is a great way to bring all the key internal stakeholders on to the same page and collect their ideas to ensure you have their buy-in. Just like any other UCD project we run for our clients, we started off by conducting research with as diverse group of stakeholders as possible including trainers, marketing, sales and senior management. Each of these departments and individuals have their own set of goals and needs, so it’s important to get a cross-section of your business together.

One of the most difficult parts of organising workshops like these is to make sure people are available. The offering of food at meetings quite often works but sometimes it’s just not possible to have everyone attending every workshop. To get around this there are 2 things you can do:

  1. Split workshops into smaller, mini workshops that require less time in a row. People are more flexible if it’s 45 minutes rather than 3 hours.
  2. Don’t fret if not every last person can come. The importance really is about representatives for each need. This does come with a caveat however, part of the purpose of stakeholder workshops is buy-in, which you won’t get if someone isn’t able to contribute their ideas and thoughts early. Go and collect them and add them in if someone key can’t make it.

We ran a series of 3 stakeholder workshops last November to build a shared understanding of the goals, barriers and visions for the Training Academy.

How do you run a stakeholder workshop?

Step 1: Pose simple questions, one at a time

During our Training Academy stakeholder research we held 3 separate mini workshops, 1 for each theme – goals, challenges and vision. Concentrating on each of these separately allows ideas, concerns and needs to come forward before being analysed – “great idea but we can’t do that because…” doesn’t happen here – it’s green hat thinking.

In the goals workshop, we posed three questions to the participants to get them thinking about different purposes of the training academy:

  • What does the business want out of the Training Academy?
  • What do the customers want out of the Training Academy?
  • What do the trainers want out of the Training Academy?

Step 2: Idea generation

Each participant wrote their answers on individual post-its first before sharing them with the group. Letting participants write their answers individually first has several benefits:

  • Writing is an individual activity that requires thinking. So it gives thinking time to participants to surface more ideas.
  • Some people are not comfortable with the idea of speaking up in a group. A lot of great ideas never see the light of day because their owners are too afraid to speak in a meeting.
  • It reduces group think (when everyone in the meeting thinks the same).
  • It ensures a level playing field and that everyone’s ideas are heard and considered, not just those of the HIPPOs (highest paid person’s opinion).

After writing down their answers on post-its, the participants posted them on the wall under the relevant question.

Step 3: Consolidation

We then conducted affinity diagramming to arrange the post-its into groups based on themes that naturally occur. We then labelled each group of post-its based on its theme. We ended up with LOTS of colourful post-its on the wall!

As you can see from the number of post-its, even a short session can generate a lot of ideas. The key is to prioritise those ideas and start with the high priority ones.

What did we discover about the Webcredible Training Academy?

Business goals:

For Webcredible, training is an integral component of our delivery. Yes, it helps us make more money (what business doesn’t exist to make money?) but besides that, it helps us share our love of UX and educate our clients. Educated clients are more aware of the ROI and the value of customer-centric thinking, which makes our job a lot easier. It helps us become a one-stop UX shop. So we don’t just build great customer experiences for our clients, we also help them do it themselves.

Another goal the business was looking forward to was having a lively office every day. We recently moved into a much bigger space and having training participants in the office keeps the office buzzing and keeps the knowledge (and beers) flowing!

Trainer goals:

One of the many reasons I joined Webcredible was because at Webcredible I could continue my love of teaching as part of my day job. It was great to see this sentiment shared by other Webcredibles. I learned early from one of the UX gurus that I look up to, Kim Goodwin. She (and I) believe that we can change the world through better design but we can do it even faster if we teach others to do it. One of the major goals for trainers was to share their knowledge and help clients beyond delivering successful projects.

Training also helped them reinforce their own learning and expand their network of contacts. They also wanted to ensure that we set the right expectations with participants attending the courses. We have had instances where participants book themselves onto a UX course, expecting to spend the entire day learning about user interface design. There are still a lot of misconceptions about what UX is and we need to clarify those expectations better.

Training participant goals:

The trainee goals we compiled were mostly based on the feedback from training participants and the experience the stakeholders have had engaging with participants at various levels: pre-sales, on-the-day and post-training support. These findings will be further validated through user research with training customers. It may seem very ‘non-UX’ to make assumptions about your users goals. But it’s useful to have a benchmark of internal perception and either back it up or challenge it with user research. It’s also a great way of starting to get your stakeholders to think from a customers perspective.

One of the key goals for the training participants was to learn high quality content from expert trainers. More importantly, they need to be able to put their new knowledge into practice straightaway. Hence, on top of learning industry standard best practices, they want to learn how to take the first tiny steps within their roles to gather small wins and build credibility of UX within the organisation.

Tied in with one of the trainer goals above, participants also need help in picking the right course. The vast field of experience design and the myriad of topics within it can be daunting for people to navigate around to find the best match for their needs. Hence, they need clearer pathways through the ‘labyrinth’ of courses.

What’s next?

So those were the goals, the things that we would like the Training Academy to achieve. But what’s stopping us or can potentially stop us from achieving those goals? We tackled those questions by repeating the above workshop but posing the question of barriers and challenges.

At the start of the new year some of our clients approach us and ask what new UX and design trends they need to be aware of. To help them out I try to keep my ear to the ground and talk with my colleagues. So here they are, the things I think are going to take off in digital this year.

Screenshot of Snowfall website

Storytelling

Specifically in the form of single-page sites with parallax scrolling. The New York Times started this trend back in 2012 with its launch of Snowfall. It takes more traditional publishing techniques and brings them to life with the power of digital  - using movement, interaction and effects like parallax scrolling to create one seamless experience. Over the last couple of years this already popular trend has come a long way, and I can see it becoming common practice as more companies embrace it as method to engage and delight their customers with their brand, products and services.

Screenshot of National Geographic's 'rendezvous with death' documentary website

Split page layouts

With the above in mind, I think the use of split pages to tell two halves of a story or show different products will become much more popular. Line25 have collated some good examples if you’re unfamiliar with the concept. One of my favourites is still the National Geographic’s interactive documentary ‘Rendevous with Death’, which tells the lives of both President John F Kennedy and his accused assassin, Lee Harvey Oswald, in parallel. It’s extremely powerful and digital storytelling at its best. Whilst this site went live back in 2013, it is still one of the finest examples I’ve seen and is one of the reasons why I think this trend will stand the test of time.

Screenshot of the dropbox user guide landing page

More recently, this method has been used by companies to showcase products and services, specifically those with two distinct offerings or audiences. Dropbox is one example of this. They’ve adopted the approach for their guides; splitting the site between their business and admin users. It’s a clear way of signposting to different audiences, and I think it works really well.

Minimalist navigation

Screenshot of Newton Running homepage

In 2014 leaders such as Google introduced more frequent use of hidden navigation, and the ‘hamburger‘ menu became ubiquitous for mobile sites. This year, I think we’ll start to see this become more widespread across larger screen designs. This is great for designers as it allows us to focus the attention on content without the noise of headers and footers.  Newton Running is a good example of this approach. On their homepage, the design is all about the navigation, which enables users to get to the section they are interested in quickly and easily. From there, the navigation is minimal, it’s all about interacting with and experiencing the trainers.

In addition to minimal navigation, this site also adopts some of the other trends mentioned in this article, including a split design to signpost to men and ladies and parallax scrolling to tell their story.

Skeuomorphism

Love or hate it, skeuomorphism is already starting to make a comeback but this time with a more refined flat design approach (so no more 3-dimensional bookshelves, Apple!). Designing for the much lauded Internet of things (IoT) will mean that we only start to see more UI elements that resemble everyday physical objects that are familiar to users. Some nice examples of this can be seen in this Awwwards UI inspiration article.

Email design

As the most successful tool at a marketers disposal, I think designers will start to adopt a more user-centred approach to the end-to-end design of emails. Consideration will be given to their role in the user journey and how they are part of the multi-channel experience. Designers will need to think about strategy, content and design – it’s no longer just an email. Perhaps with future releases of outlook (and other email clients) we’ll even get greater HTML and CSS support. One can dream…

I hope you find this useful! Please feel free to suggest some trends of your own in the comments.

Happy new year! At the end of every year it’s become a tradition at Webcredible to ask our consultants for their UX resolutions. So without further delay, here they are!

@gmaninis:

  • UX people need to be involved in more strategic decisions!
  • UX to drive organisational change in thinking, structure and decision making etc
  • Clients to buy more into customer research and understand why we are doing what we are doing!

@donerix:

  • Embedding UCD thinking within the whole organisation and not just the responsibility of specific individuals or teams – think the ‘digital by default’ strategy of the Government Digital Services (guys who’re responsible for GOV.UK)
  • And following that, if organisations don’t yet have a digital strategy, it’s time to come up with one!

@Nordic:

@boomrich:

What are your 2014 UX resolutions, and what do you think of ours? We would love to know so please leave a comment below. If you are looking to give your customer experience new lease of life in 2013 but aren’t sure where to start, get in touch and we can help you have a great year!

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