How might we broaden political discourse and understanding in people age 25-35 in the UK? – Design project from the Design Kit course

This is a writeup of the design project I carried out with Tamsyn Hyatt as part of Ideo and +Acumen’s Design Kit: The Course for Human-Centered Design. Check out the prototype we produced.

Inspiration

Interviews

  • We spoke to people with a range of political views, and carried out participant observation of their news-consumption activity.
  • We learnt from experts: Framing and messaging from a third sector expert; Rules of social media and political discourse from a digital communications director.
  • Key quotes

    “I don’t need stirring up. I want information and to make rational decisions. It doesn’t need to be heated.”

    “It sometimes worries me that I only read news from a source that shares my views. Yet clearly there’s a whole other perspective, because the majority of people voted for Brexit. I don’t understand that, and I never will if I only ever consume news written by people like me. It would be helpful to see other perspectives, even if I don’t agree with them.”

    “If I can understand what their argument is, I’m better placed to counter it. But that would need to be from a reliable source, even if I don’t agree with it.”

    “Reading contrasting opinion pieces is helpful in forming ideas, and in developing new ways of thinking.”

Ideation

Key themes

  • Desire for reasoned argument from both sides
  • Time and efficiency
  • Payment and paywalls
Insight Design Question
People are willing to consider alternative viewpoints but have limited time to do so. They’re struggling with business as usual, let alone anything new. How might we deliver diverse views that are quick to consume, but not sensational or click bait?
Users are concerned that they don’t know what a credible mainstream ‘opposing’ source looks like. How might we find the best content to represent diverse views?
People may not accept views wildly different to their own as untenable, and so not engage with them. How might we find content which will be acceptable/viable to people of different viewpoints?
People generally have a notion of reliability that transcends the political spectrum. i.e. they concede that publications that they may not agree with ideologically are capable of reporting something useful, despite ideological differences. How might we stretch and push people enough to challenge them but not repel them?
Most people didn’t pay for news. How might we make a product that is either zero direct cost to the consumer, or which is seen as sufficiently valuable to warrant purchase?

Ideas from Brainstorming

  1. A twitter account – or accounts – sharing ideologically diverse content. Users can subscribe to high-quality content outside of their ideological viewpoint.
  2. A news site where diverse content is submitted by users, grouped by theme and ranked for quality. This means that the most high-quality articles to represent a given ideological position on a given topic bubble to the top.

Storyboard overview

The person
Name: Brian Simmonds
Age: 29
Profession: Administrator for a small healthcare company

Step What is happening? What is the most important question to answer? How might we answer it?
Reads the day’s news following his normal routine Brian rushes to work. He squeezes on to the train and checks his regular news sites on his phone. [already explored in Inspiration stage] [already explored in Inspiration stage]
Becomes aware of the tool He receives a message from his friend suggesting that he check out a new news tool What channel of communication is likely to encourage someone to look at a new news source? Who would the message need to come from? Test with real content in people’s facebook feeds, versus whatsapp recommendations and personalised emails
Looks at the day’s news on the new tool Brian reviews the content on the news site and is prompted to read content from different ideological viewpoints to his own. They are high quality, so he finds them challenging but interesting and informative. Will people actually choose to read an article that they disagrees with ideologically? Build a basic wireframe prototype and carry out participant observation user testing
Rates an article that he read Brian gives a thumbs up or a thumbs down to each article he read, helping other users see which ones are best, from each ideological point of view. Do perceptions of quality actually cross ideological boundaries as our research suggested they could? Will people positively rate an article that they ideologically disagree with? Build a basic wireframe prototype and carry out participant observation user testing
Shares an article that he enjoyed in his own reading Brian notices that one good article he has read today isn’t listed. So he submits this article to the site Will he take the time to share content if? (Particularly as there isn’t currently any social reward to him for doing so) Trial submit form on test service. This could be achieved using a Google Doc. This would then be manually added to the site, if the article passed a basic quality check
Shares the tool with others Brian finds the tool useful so he shares it with others in his network. Will the service be able to spread to others without paid advertising? Test on a functional prototype, and invite users to share. Build in basic social sharing features to prompt and facilitate this. E.g. facebook and twitter.

Prototyping

What did you prototype? What question(s) were you trying to answer?

We ​tested a clickable digital prototype​ made using the Balsamiq mockup tool.

The most important question to research was:

  • “Will people actually choose to read an article of an ideological perspective that they disagree with?”

The most important secondary questions were:

  • Will people understand our way of representing ideologically diverse content? What interface design approaches might be best?
  • Do perceptions of quality actually cross ideological boundaries as our research suggested they could? In practical terms, will people positively rate an article that they ideologically disagree with?

What did you learn from testing your prototype?

  • People looked at ideologically diverse content But this may have been ‘under duress’ as they knew they were being observed. To have confidence in this result, we would need to test in a more anonymous fashion, and in a more real-life context.
  • Users were unclear what the ‘thumbs up’ and ‘thumbs down’ meant. Does a thumbs up signify endorsement, or liking, or was it a dispassionate quality measure saying that an article makes valid points and makes you think, even you don’t actually agree with it?
  • Some users found the left-right split a bit binary. Could this be improved, to better show nuances of different positions? Is it actually useful to divide content up into different ideological sections of the page?

What might you consider for future iterations?

  • Change the ‘thumbs up’ and ‘thumbs down’ to something more emotionally neutral. It will need to signify that this piece is well-constructed and reasoned, but must not imply liking.
  • Explore whether community submissions are the best model for discovering new content.
  • Explore pulling in content automatically from high-quality sources with different editorial perspectives.
  • Explore visual and layout approaches to presenting diverse content relating to a given topic that will scale well to mobile devices. (The approach tested was desktop only, as it required more horizontal space than is available in a smartphone or tablet)
  • Explore how to categorize content beyond a left-right binary. Consider in relation to the above point about visual design and layout.
  • Allow people to add tweets, and embed these directly on the page.

What makes an effective digital donation process?

I’ve made donations to a number of top UK charities. They use these techniques to encourage donations:

  • Promote regular giving
  • Amount shopping lists and user choice
  • Ease of use
  • Images of people
  • Social proof, trust seals, where your money goes
  • Emotional reinforcement
  • Use donations as part of a multi-channel relationship

I’ll now elaborate a little on the processes of Macmillan, Cancer Research UK and charity:water

Macmillan’s single donation process

The Macmillan homepage focuses on people and their stories – each of its sections is lead by a photographed person sharing their story.

The donation ask comes either in the rotating carousel or through the site-wide donation button at the top right of each page.
This provides a clear, route to making a donation for those who want to, but the site as a whole leads with support.

macmillan 1

The donate page:

  • Focuses on people and feelings.
  • Directly addresses the visitor as essential, and asks how much they’d like to give.
    This appeal directly builds on the core Macmillan brand message “so no one has to face cancer alone”
  • Empowers the user with choice – of donation type and amount.
  • Shows, for each of the different donation amounts, how many people are giving the different options. This provides social proof.
  • Prioritises regular giving over single donations, because regular giving is more useful to charities.

Two ideas for how this page might be made even more effective:

  • Reduce the number of options at the top of the page – they may distract the user and reduce their propensity to give.
  • Change some of the accompanying images so that they show people. The image that accompanies the £25 donation features a nurse and a patient or family member smiling at each other. I suspect that this is more compelling than the £50 level which shows a plate of pasta.

Here’s what you see if you choose to make a single donation page:

macmillan 2

 

macmillan 3

  • From the user’s perspective, the entire process happens on the Macmillan website, and with the Macmillan brand.
  • Emotional reinforcement through the form.
  • Trust seals increase credibility
  • Clear phone number to contact in case of difficulty
  • People can see how far through the process they are.

After the 3d secure step, which I won’t show here, you’re taken to the thank you page:

macmillan 5

The thank-you page:

  • calls you out by name and praises you and your impact.
  • Gives additional actions – sharing through different channels, or campaigning.
  • Isn’t the end of the journey – the user also receives a thank-you email:

macmillan 6

The thank-you email:

  • Gives users a chance to find out more about their donation – which is working to build support or implicitly to upsell.
  • Outlines Macmillan’s offer of support – building a reciprocal relationship.
  • Begins to build a multi-channel digital relationship with the donor.

Cancer Research UK’s single donation process

cancer research uk 0

The Cancer Research UK homepage:

  • Use lots of social proof.
  • Features a clear box for people who have already decided to donate before coming to the site.
  • Incorporates the site-wide donate button.

cancer research uk 0.5

The Cancer Research UK donate page:

  • Uses human pictures
  • Is focused and calm, despite including a range of options. Clearly the different options have been prioritised.
  • Prioritises regular giving.

cancer research uk 1

The single donation form:

  • Subtle attempted upsell to regular donation
  • Empowers visitor with choice about where their money goes – but a simple choice.
  • Gift aid option explained visually.
  • Visitor empowered to choose the easiest payment options that suits them. I chose to pay with paypal.

After taking payment, I then had the opportunity to choose my communications preferences:

cancer research uk 4

I was then taken to the thank-you page:

cancer research uk 5

As with Macmillan, the email thank-you message was used to drive multi-channel digital engagement:

cancer research uk 6

The email shows the difference that your donation makes, but also has secondary actions: taking an exciting quiz on improving lifestlye; an opportunity to get support or to connect; and an invitation to deepen engagement with research.

charity:water’s single donation process

charity water 1

The donate page:

  • Uses powerful visuals, communicating the impact of donations.
  • Reassures you about where your money goes.
  • Is clean and focused.
  • Makes paying incredibly easy

Marvel at the ease of use of the Stripe popup. Why aren’t more charities following the lead of ecommerce and using Stripe?

charity water card 1

The payment form only asks for the bare minimum it needs to take your payment

charity water card 2

charity water card 3

charity water card 4

The thank-you page:

  • is focused, and shows the impact of your donation.
  • upsells to a bigger supporting action – using the principle of consistency.

charity water card 5

The email thank-you leads with an image, and articulates the impact of the cause.

I’d be interested to see this exercise carried out on mobile. How well do the top charities compare?

Page load speed of top 10 UK charity brand websites

Visitors like fast websites, and your digital performance suffers if your site loads slowly. How fast are UK charity websites, and which charity has the fastest website?

I’ve surveyed the websites of the top 10 UK charity brands, as identified by the 2014 Charity Brand Index. From a performance perspective, the ideal is to have a site that loads quickly, and for the amount of downloading required to be as small as possible. So you want a low ‘load time’ and a low ‘page weight’.

Here’s how the sites compare:

Graph displaying load time of the top 10 UK charity brand websites

Graph displaying page weight of the top 10 UK charity brand websites

  • BBC Children in Need and Comic Relief had the fastest home pages.
  • If you’re commissioning a new website, or want to improve the performance of your existing site, aim to beat the average performance of these sites. Aim for pages that:
    load in 3.5 seconds or less
    have a page weight of 1.9 MB or less
  • If your pages load in 2 seconds or under, and if your page weight is 1MB or less, you’re doing very well.

This data was obtained by running 4 unthrottled desktop speed tests using GTMetrix between 16 August and 22 August 2015 and averaging the results.
An interesting follow-up would be to look at mobile performance: set a mobile browser and throttle the connection to a common mobile download speed.

Download the data (ODS)

Why page load speed is important – the impact of site speed on conversions and revenue

Visitors expect your website to load quickly, and will leave if you make them wait too long. People will leave in a matter of seconds, and fractions of a second are significant here. Designing an attractive and usable website is important, but its performance shapes how it is used in practice. If visitors don’t even load your page, there’s no chance of them converting, and this reduction in conversions hurts your profitability. Taking a positive view of this behaviour, there’s an opportunity to increase conversions simply by improving your page speed.

Evidence for the impact of page load speed on business performance

Walmart: reducing page load time by 1 second causes an up to 2% increase in conversions. (Study slides, analysis)

Yahoo: reducing page load time by 0.4 seconds increased traffic by 9%. (Reference)

Google: increasing page load time from 0.4 seconds to 0.9 seconds decreased traffic and ad revenues by 20%. (Reference)

Amazon: every 0.1 second increase in load time decreases sales by 1%. (Reference)

A 1 second delay in page response can result in a 7% reduction in conversions. (Reference)

Radware: “one-second HTML delay resulted in… 3.5% decrease in conversion rate…” (Reference 1, reference 2)

Shopzilla: reducing average load time from 6 to 1.2 seconds increased revenue by up to 12%. (Reference)

Mozilla: reducing average load time by 2.2 seconds increased conversions by 15.4%. (Reference)

AutoAnything.com: 50% reduction in page load times increased sales by 13%. (Reference)

Obama campaign: reducing load time by 60% increased donation conversions by 14%.

How to test and improve page speed

To see how fast your pages load, go to gtmetrix.com or webpagetest.org and plug in your URL (or a competitor’s ;)). GTMetrix uses insights from Yahoo and Google’s separate page speed testing tools, and draws from their banks of improvement recommendations.

These free services will provide recommendations for how a developer could improve your site’s performance. Things like compressing images, making effective use of browser caching of static assets, and optimising the critical rendering path.

To learn more about the practical measures you can take to improve page load speed, this free online course on page load speed is useful.

How to design usable multi-page articles

In-depth digital articles can be hard to navigate. Dividing them into different sections can make things easier.

For example, at Mind, we split our information on depression into subsections, so that if you want to quickly navigate to “Symptoms”, “Causes”, “Self-help, treatment and support”, “How can friends and family help” (etc) you can do so. It also helps people understand the content that the article will cover much more easily than requiring them to navigate through a single long page of text.

But there are some drawbacks of splitting your information into different sections – sometimes people don’t know that they’re reading one part of a larger topic. So the way that you show that there are other sections, and allow people to navigate through them, is important.

Reviews on technology sites are similarly complex, and these sites face the same navigational challenge. How do different technology sites approach multi-section articles, and which approach is best? I’ve assembled a few screenshots here (with added highlighting and some analysis). I’ve also tried to summarise best practice as I see it. I’d’ be interested to see some user testing on all this, to see if my review is on the right track. This material is all for desktop – there’s another discussion to be had for mobile.

Best practice

  • Prominently number sub-sections.
  • Include sectional navigation at the top and bottom of each page.
  • Include numbers in your section headings if your content is sequential
  • Use the overall article heading and the heading of the sub-page to describe structure. You need to be attentive both to positioning and hierarchy, and to labelling your content clearly.
  • Include “next” and “previous” section navigation. Be aware that it needs context to make sense. This can be provided either by the button itself, or by proximity to a summary of the sections of the article.
  • List all the sections of the article – don’t hide them in a dropdown – and show the user where they are currently in relation to other sections.
  • Make your inter-section navigation tactile and make sure that it is consistent and not obscured.

Tom’s Hardware

View an example article. Click on the screenshot below to see a full-size version.

a screenshot showing a multi-section article on tom's hardware, with navigation elements highlighted

I think Tom’s hardware is very effective at helping people understand and navigate its multi-section articles:

  • There’s navigation at the top and the bottom of each section.
  • Sections are numbered – which, particularly when looking at the top section – helps convey the fact that this article is made up of multiple sections.
  • The proximity of the navigation elements at the top of the page is useful. The section number, the dropdown, and the next and previous buttons (one of which is greyed out in this case, which suggests that it relates to the number in front of the heading) are all displayed close to the heading.
  • The interactive elements are nice and chunky, and are highlighted using a dominant colour. This suggests that they are interactive.
  • The bottom navigation section gives more space to the next and previous buttons.
  • In the bottom section, under the heading “Summary”, the different sections are numbered and their names are written out. The current section is highlighted in bold, with a chevron next to it.
  • The adverts at the bottom of the page clearly come after the body of the article, and so don’t add confusion.

There are a couple of small points for improvement:

  • The URL could do a better job of making it clear that you’re in the first section of a multi-section article. http://www.tomshardware.co.uk/gaming-cpu-review-overclock,review-32885.html looks like the URL of a one-off page sitting directly under the home page. It’s only when you get to the second section of the article – http://www.tomshardware.co.uk/gaming-cpu-review-overclock,review-32885-2.html – that you can infer any structure.
  • The next and previous buttons themselves don’t make it clear what they relate to. In isolation they could be confusing: “Next” what? Next article in chronological order? Next page in this category? But in context these buttons work well, as the summary section makes them much clearer.

    Tech Power Up

    View an example article.

    a screenshot showing a multi-section article on Tech Power Up

    I think this design is less effective:

    • There’s less consistency between interactive elements, which it makes their purpose less clear. (Compare the “Packaging & Contents” buttons at top and bottom) So while these buttons feature at top and bottom of the page, they don’t have as much impact as they could do.
    • Of the two buttons, the one at the bottom is much better. It explains itself as a section navigation by saying “next”, and also explains what section you’ll be taken to. The top button doesn’t make it clear that it relates to another subsection of the current article. It’s also hidden among the social links.
    • A dropdown is used to allow navigation between sections. This takes up less space than the summary solution used by Tom’s Hardware, which shows all the heading names, but might confuse some users if they don’t know that they’re currently in the listed section of a multi-section article.
    • The use of numbers helps to show that this section sits in a sequence. But the numbers are shown at the bottom and not the top of the page. Tom’s Hardware, on the other hand, brings these section numbers to the fore at the top of the article.
    • There’s no back button, unlike Tom’s Hardware. Rather, the dropdown navigation sits in-line with the next button. Again, this saves space but may introduce more confusion.

    Overclock 3d.net

    View an example article.

    multi section navigation highlighted, from overclock3d.net

    • The page title, and the next and previous section buttons aren’t very clear. The “previous” button on the first page is ‘greyed-out’ (lightened in colour to show that it’s not functional in this context), but the difference in colour is so slight as to be potentially missed.
    • At the bottom of the page, sections are numbered, and previous and next navigation is used as well (it’s ‘greyed-out’ when not relevant) on the left hand side, and a dropdown showing section contents is displayed on the right hand side.
    • The URL – http://www.overclock3d.net/reviews/cases_cooling/nanoxia_deep_silence_ds4/1 – suggests that we’re in part one of a large piece of content, but it doesn’t itself tell us (or search engines) what this section contains.

    Hexus

    View an example article.

    hexus multi section articles with navigation highlighted

    • Advertising distracts attention from the top navigation. Confusingly, it’s in the same colour as the bottom navigation.
    • The hierarchy of overall article heading, and the heading of the individual pages, is nice and clear. The same is the case with Tweak Town, below.

    Tweak Town

    View an example article.

    screenshot of a multi-section article on Tweak Town, with navigation highlighted

    • The use of colour around the top navigation is quite distracting, which is a shame, as otherwise this design is good.

    Hard OCP

    View an example article.

    screenshot of a hard ocp multi-section article highlighting the navigation

    • The navigation might need to be more prominent to be visible to new visitors.

    Anand Tech

    View an example article.

    screnshoot of a multi-section article on anandtech, with the navigation highlighted

    • The top doesn’t feature any navigation options.
    • The top doesn’t make it clear that you’re in a section of a larger article through use of headings
    • The bottom next navigation says the name of the section, but it doesn’t make it clear that it is the next section in a sequence of sections. It could potentially be anything. The title of the second section in this case is confusing – “Mantle: a low-level graphics API for CGN”. This could quite easily be referring to a completely separate article on Mantle.
    • The bottom navigation doesn’t have arrows or next buttons. This can be confusing if you arrive part way through an article from organic search.
    • The bottom dropdown shows section titles, but no section numbers, even though these are in URLs after the first page.

    Vortez

    View an example article.

    screenshot of a vortez multi-section article, highlighting the navigation

    • There’s a breadrcumb at the bottom of the page, which makes it clear that you’re in page one of a larger article, even if there isn’t an easily scannable summary of the other sections and their contents.

What Graspop 2014’s running order teaches us about user needs and being responsive

When attending a music festival, your most important decisions relate to which bands to see, and when and where they are playing.*

You want to know which bands clash with each other; you want to be able to work out how long you can spend checking out a new band before leaving to get to the front in time for a band you know you’re going to enjoy.

I love planning activities within constraints to maximise my enjoyment, so I was excited to see the Graspop Metal Meeting 2014 running order announced.

But I was soon disappointed, as I downloaded the document and tried to start planning which bands to see.

In looking at this document I made two basic visual assumptions:

  1. As we go down the page, the hour of day increases.
  2. Bands on the same horizontal level are playing at the same time.

This guide went against both of these assumptions:

  1. As we go further down the page, as a general rule the hour does increase. But each stage goes at its own pace, so it’s hard to compare between stages.

    meshuggah and megadeth timing old graspop 2014 running order

    Meshuggah are further down than Megadeth, but go on stage nearly 3 hours earlier.

  2. Bands on the same horizontal level are often playing at very different times.

    sabaton and unida timing old graspop 2014 running order

    On first glance it looks like Unida and Sabaton are playing at the same time. But if you look at the times, Sabaton actually starts 2.5 hours after Unida has finished. Plenty of time to see both.

Okay, so things weren’t looking great. I started thinking about making my own spreadsheet, but I thought I’d give the festival the benefit of the doubt and get in touch:

And in response they made a new version of the running order, and have updated their website with this new version:

The extent to which the document has changed underlines just how hard it was to use before.

We can now compare Meshuggah and Megadeth much more easily:

graspop 2014 improved running order meshuggah megadeth

And we can see that Unida play their set a long time before Sabaton:

new and improved graspop 2014 running order

The new running order is so much easier to use:

  • Easier to understand which bands are playing at a given time: all stages follow the same time axis.
  • Easier to understand the overall shape of the day across the different stages.
  • Colour coding helps distinguish between different stages when scanning down the page.
  • Easier to read because the background is white.

I think there are a few lessons here:

  • Usability is important. Some documents exist almost exclusively to be used. When designing them, we should try to understand how people will make use of them. User testing before launching a product is the safest way to do this, otherwise you risk the product failing to serve its purpose because you miss something important. If everyone attending Graspop in a couple of months was trying to use the old running order, I think there’d be a lot of confusion and frustration.
  • Listening is important. Graspop could easily have ignored my tweet and my point, but instead they chose to engage with it. Credit to them for being open to that.
  • Responsiveness is important. The festival was ready to act on what I said, and pushed out a new version of the running order in less than 4 working hours after I posted my message. If you don’t get it right the first time, being ready to respond and improve things is a pretty close second. Well done Graspop!

* Other important decisions include where to camp, who to befriend, where to obtain provisions, and whether to risk crowdsurfing or a wall of death. But I’m not going to talk about these things here.

My favourite New Year email campaign

This evening a sharp email campaign arrived in my inbox. It’s from Meetup, a platform for people to arrange in-person meetups around shared interests.

With talk of New Year’s Resolutions becoming a little tiresome, the one-word subject line “Unresolutions” feels liberating and iconoclastic.

meetup unresolutions subject line in Gmail
The content of the email is clear and focused:
meetup unresolutions email content
The body of the email has an intriguing statement and an invitation to positive action, with a deliciously chunky button, leading with the imperative “try”. So of course I clicked on it.

Great landing page:

meetup unresolutions landing page

Strong visuals, focus on the central image and call to action, with other options invitingly waiting at both sides of the screen. The page covers a good range of options.

I like this campaign – it’s positive, empowering, expansive, exploratory and hopeful. Have you seen a good email campaign recently?