This is how I work

Location: London
Current Gig: Product Manager, GOV.UK, Government Digital Service.
Current mobile device: Samsung Galaxy S8
Current computer: At home: A self-assembled desktop from 2014, optimised for quiet acoustics and now with a 1070 graphics card, or a Asus ZenBook UX305CA laptop. At work: A 13″ Macbook Air.
One word that best describes how you work: Spiritedly

First of all, tell us a little about your background and how you got to where you are today.

Disclaimer: When you’re applying for a job you spin this stuff into a coherent story.  Certainly there are threads you can follow, but the first part of my career was a series of improvisations and desperate expedients. After a few years I’m now in the fortunate position of being in control of where I want to go, and doing a job I love.

When we were around 9 years old, my mum and dad were dead against me and my twin brother getting any sort of games console. We learnt our times tables and got a family computer. (I later found out that they were planning on getting a family computer anyway…) Me and my brother played lots of computer games together. Starcraft, Little Big Adventure 2, Heroes of Might and Magic, Unreal Tournament. This probably trained my brain to be methodical and be confident in understanding systems, and sold me on the merits of shared exploration and adventure as only one person could play at once.

I went out-of-town to a grammar school in leafy Bucks, and was fortunate to learn HTML. I built my first website on freewebs, about Grand Theft Auto 3. The site had neon text on a black background, character skins that I’d customised myself, car mods, a hit counter and way too many popups. I desperately wish I could share it with you but it seems to have been scrubbed from the face of the internet. Beyond computer games I didn’t really have the confidence, knowledge or interest to dive deeper into what computers could do so this thread lay slightly dormant.

Having originally assumed I’d wanted to do a PPE degree, I decided that history was more my thing. It’s varied, has lots of interesting stories, and is all about people living through whatever situation they find themselves in. I tried my hand at economic history, political history, social history and cultural history. Turns out I really enjoy cultural history and medieval history.

In hindsight this degree was exemplary training to be a Product Manager – you have to rapidly master a new topic and communicate clearly and confidently about it. It trains you to be a bit of a renaissance person, interested in diverse things and with a bit of a sense of adventure. I spent hours each day in studious solitude in various libraries, but also spent a couple of hours each day in excellent conversation with other people in my college over lunch or dinner. That ability to dive deeply into someone’s domain of expertise and get to know how it works, what they care about and what they find difficult, was drilled really well by this.

During this time I assumed that I wanted to be a museum curator. I’d done a bunch of volunteering at the London Canal Museum, working on stuff like an audio tour of the walk from Camden Lock to Islington Tunnel, and a series of audio installations in the museum. In the summer before my final year at uni, I remember a chat with the chairman who advised me that there weren’t really any jobs to be had in the sector. I also reflected on the demographics attending museums and thought that I might be able to have a wider impact doing something else. But I wasn’t sure what that was.

This was a useful if poorly-timed rethink. I left uni without a real plan. I applied for lots of things, including being a radio weather reporter. I came within a hair’s breadth of becoming a trainee television creative, coming up with gameshow concepts. (Apparently some of the concepts I pitched were a bit high-brow. An acceptable rejection.) I nearly ended up working in policy in the charity sector, which is what my twin brother does now.

I’d done a fair amount of digital communications for university societies, just as social media was taking off. A meetup with an old teacher of mine, now working in medical education, pointed me in the direction of an opportunity to use these skills on the creation of an online learning community for training doctors. It felt like a break so I packed my bags and moved to Kentfor the contract.

I didn’t know about agile, or about user needs or iterative design at this point, but I gave it my best shot and started learning more and more about how the different parts of digital fit together. I was working on all aspects of the site, alongside a developer, so built my understanding loads. My manager was excellent at helping me understand the politics as well.

From here I did digital projects and digital communications jobs for a while. I remember one early job, finding out that a ‘web editor’ role in practice needed a firm technical understanding of how website backends worked. I got in touch with my friend Andy Jones, and he talked me through everything in a call that same evening. If ever I’ve been generous with someone else in helping them understand something technical, believe me when I say I’m just paying it forward.

I moved around quickly, much of this as result of the financial crash and funding cuts causing difficulties for the charity sector. Admired GDS since 2013 and was delighted to join in 2017.


Take us through a recent workday.

A standard weekday starts with a half-hour checking up on emails and Slack before a standup with the first of my teams at 09:45. We take ten minutes or so to run through work-in-progress, coordinate activities and discuss any blockers. I repeat the process at 10:00 with my other team.

As a Product Manager my job is about making sure that we’re solving the right problems, that we’re adding as much value as possible, and aligning around the right vision. Day-to-day this means that understanding, assessing and communicating purpose is my role. So I’ll be making value judgements on how to approach certain areas of work – whether to gold-plate a feature or do something basic, for example, or which from a set of options to work on – either with my team or solo. I’ll spend most of the day going from meeting to meeting – which sounds ghastly, but actually is a series of interesting chats with intelligent and motivated people, diving deep into interesting problems. I love working with the different specialists in my teams, and it’s a real brain workout. I do sometimes regret that I don’t carve out more time for solitary intellectual activity, diving deep into a puzzly problem, but if I had to choose, I’d take the group approach every time as it feels more dangerous and collaborative.

When I’m at my desk, I’m usually doing some form of written communication with someone not in my team – a user or stakeholder in another government department. There’s an interesting tradeoff here between ruthless prioritisation of your time, and maintaining relationships and being diplomatic. As a Product Manager, lots of people want your input, or for your to do something for them. So you also spend a lot of time politely saying no to things.

We pause our working day at 3:45 for 15 minutes to have fika – a break for coffee, cake and a chat. (Sometimes just the final one). The key thing is that it’s a non-work environment, so we have an actual break and people can get to know each other.

What apps, gadgets, or tools can’t you live without?

I feel at home wherever my desktop computer is set up.

I put a lot of value on having something that can play music.

What’s your best shortcut or life hack?

Sometimes not doing a thing is the best approach.

Take us through an interesting, unusual, or finicky process you have in place at work.

I insist that every card on my team’s trello board has a ‘What’ and a ‘Why’in its description, so that anyone can understand the purpose of the work. “Can you get a What and a Why on that?” has become a sort of joke catch phrase but I’m okay with that. It makes sure that everyone in a multi-disciplinary team understands the purpose of everything that is being worked on, and it trains people in communicating beyond their own specialism.

How do you keep track of what you have to do?

Google calendar for solo tasks. Trello cards for things I’m working on with my teams.

I’ve tried the Getting Things Done framework, but when things get busy I’ve found it too brittle.

I take notes of  things to do on post-its and stick them to my laptop. I triage them to something electronic within the hour.

What’s your favourite side project?

My Social Summary. I built it from the ground up (that’s why the front-end looks rubbish ;)) and I learnt loads. It’s now a paid-for product. For £3 a month you get a daily (or twice daily) summary of the best material shared by your twitter network.

I’m also proud of the technical work I did on a creative project with my ex-girlfriend. I set up most of the standard things that a competent developer would do: version control, automated testing, a decent build pipeline, programmatic creation and destruction of review applications. The product idea was a fun and interesting one, and I got to play around with a few different APIs.

What are you currently reading, or what do you recommend?

For work-type reading, I’d recommend “Turn the Ship around” by David Marquet. It’s about intent-based leadership and how you can give people space to do great things. In knowledge work you need to lead this way, not in a command-and-control fashion.

The novels that have impressed me most as an adult are probably Nabokov’s Pale File and Paul Auster’s New York Trilogy.

Who else would you like to see answer these questions?

Some of the Lead Product Managers and Heads of Product at GDS and across government.

What’s the best advice you’ve ever received?

“Time’s short, your life’s your own. And in the end we are just dust and bones.”

“Work smarter not harder”

“Just Fucking Do It”

One way of running an agile team

At the Government Digital Service (GDS), we divide our work up into 3-month missions. We’ll give a multi-disciplinary team of about 10 people a particular problem to solve or a high-level idea of a piece of value to deliver within 3 months. We vary scope as we go, with time and resources being fixed. We build our understanding as we go, and change our approach as necessary to deliver the most value in the timebox. We’ll generally plan work to increase our understanding of what the right thing to do.

As Product Manager, my role is to make sure that we’re solving the right problems, and that we’re getting the most value from the work we do.

At the start of a mission, I set some clear overall goals for that quarter. Be upfront about what you’re not working on, so that everyone’s clear.

Work back from the end state you want to get to at the end of the quarter – e.g. migrating from one supplier to another, or launching a new feature that successfully meets its goals – and think about the things that will need to happen to get there. This will generate some milestones. You can start to build a high-level plan of what’s coming up in the quarter by mapping when you think you can hit these milestones. Do this with your delivery manager and tech lead, so that it’s sensible. It’ll change as you go, and that’s fine. I like to do this with post-its on a wall in the team’s space.

Within this structure, I like to work in weekly sprints. This means that you plan the detail of your work a week ahead. I like to run sprints from mid-week to mid-week, so that everyone knows what they’re doing on Mondays and Fridays, and those days can be kept free of meetings.

I run planning with the whole team – which is really important to build a shared understanding of the problems everyone is working on, across the disciplines. A day or two before the planning session, I’ll have a series of conversations to decide on the most valuable work to be done in that sprint. Some of these will be with my tech lead and delivery manager, others will be with the different specialisms in the team (e.g. user research, performance analysis or content design). The goal is always to check in with the big picture aims for the quarter, dive into any thorny questions we need to think about, or work to review in detail together, and then agree on what do work on in the upcoming sprint. Often this will be something already mapped out at high level, and now we start to consider the detail, but sometimes it’ll be something new.

These pre-planning conversations are a lot of fun, and a chance to think deeply about each of the disciplines in my team. They align us on goals and scope for the week – so we’re thinking carefully about how much is responsible to try and take on. In most quarterly mission teams I’ve been on, we’ve found estimating doesn’t work too well, as there’s lots of uncertainty inherent in a mission, and with a newly-formed team it takes a while to understand your velocity. So we rely more on gut feel, experience and the ability to iterate week-on-week if we felt a given sprint had too much work or not enough.

Once these conversations have finished, I’ll leave the different team members to write up cards to describe the work. I have a standard format I want cards written to – they need to have a ‘What’ and a ‘Why’ that anyone in the team could understand. But I don’t need to write the cards myself – it’s good practice for people to be able to communicate about their work, and it saves me time. If someone is struggling with writing cards to this standard, I’ll take the time to pair with them to iron this out.

The goal of writing these cards is to inform a robust planning conversation. Going into the team’s weekly planning session, we want clear goals and alignment on the big picture from each of the specialisms. The goal of planning is to think through the complexity of the work as a team, to really flesh out the detail of the cards – adding acceptance criteria, or thinking about how we might tackle a thorny technical challenge. But it’s also to build a shared understanding of what the other disciplines are working on – in a time-efficient way.

Ideally I’ll introduce some goals for the sprint, covering each of the specialisms. Probably tied in to the milestones for the quarter, that get us to our goals.

Once I’ve introduced the overall goals, and we’ve nuanced them if we need to, then we go into talking through the individual cards. I usually invite other people to introduce their own cards, and then I make sure that there’s a good quality converstaion on each card – making sure that by the end of the discussion we understand the value we’re trying to deliver, and have thought about the approach we want to take.

So this session is about sense checking, challenging, thinking about approach – but isn’t proscriptive about approach. The person who decides to work on the card takes the lead on that, calling on others for support if needed. Planning is very useful for being proscriptive in defining quality, and in adding acceptance criteria to a card. As with planning overall, making sure we know what we need to do is more important than how – the how is worked out in the ground.

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.



  • 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.”


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.


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) 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 or 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.,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 –,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.


    View an example article.

    multi section navigation highlighted, from

    • 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 – – 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.


    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.


    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?