Clearleft | Blog The latest news from Clearleft en-gb Thu, 26 Apr 2018 10:48:01 +0000 Thu, 26 Apr 2018 10:48:01 +0000 Workshops Mon, 23 Apr 2018 15:55:47 +0000 There’s a veritable smörgåsbord of great workshops on the horizon…

Clearleft presents a workshop with Jan Chipchase on field research in London on May 29th, and again on May 30th. The first day is sold out, but there are still tickets available for the second workshop (tickets are £654). If you’ve read Jan’s beautiful Field Study Handbook, then you’ll know what a great opportunity it is to spend a day in his company. But don’t dilly-dally—that second day is likely to sell out too.

This event is for product teams, designers, researchers, insights teams, in agencies, in-house, local and central government. People who are curious about human interaction, and their place in the world.

I’m really excited that Sarah and Val are finally bringing their web animation workshop to Brighton (I’ve been not-so-subtly suggesting that they do this for a while now). It’s a two day workshop on July 9th and 10th. There are still some tickets available, but probably not for much longer (tickets are £639). The workshop is happening at 68 Middle Street, the home of Clearleft.

This workshop will get you up and running with web animation in less time than it would take to read all the tutorials you have bookmarked. Over two days, you’ll go from beginner or novice web animator to having expert level knowledge of the current web animation landscape. You’ll get an in-depth look at animating with CSS, JavaScript, and SVG through hands-on exercises and learn the most efficient workflows for each.

A bit before that, though, there’s a one-off workshop on responsive web typography from Rich on Thursday, June 29th, also at 68 Middle Street. You can expect the same kind of brilliance that he demonstrated in his insta-classic Web Typography book, but delivered by the man himself.

You will learn how to combine centuries-old craft with cutting edge technology, including variable fonts, to design and develop for screens of all shapes and sizes, and provide the best reading experiences for your modern readers.

Whether you’re a designer or a developer, just starting out or seasoned pro, there will be plenty in this workshop to get your teeth stuck into.

Tickets are just £435, and best of all, that includes a ticket to the Ampersand conference the next day (standalone conference tickets are £235 so the workshop/conference combo is a real bargain). This year’s Ampersand is shaping up to be an unmissable event (isn’t it always?), so the workshop is like an added bonus.

See you there!

This was originally published on my own site.

Inside CSS Fri, 20 Apr 2018 08:33:00 +0000 Last week I was privileged to be invited into the heart of where the World Wide Web is defined – I was to be an observer in the latest CSS Working Group’s face-to-face meeting.

Our venue was a 100 year old former brewery; a tastefully converted five-story brick building on the eastern side of Berlin. Inside I was greeted by an early breakfast of coffee, fruit salad and pastries, and a group of 35 men and women from around the world, smiling and clearly happy to see each other again. Some of these folks I knew already: as friends, online acquaintances or by reputation. Others I would come to know over the next two days. I was an outsider to the group, but made to feel welcome as we settled down behind our laptops, arranged in a large horseshoe in the bright top floor meeting room.

The CSS Working Group (CSS WG) is the team of independent experts and employees from W3C member organisations (including Apple, Microsoft and Google) who write and maintain the standards for all the CSS we use on a daily basis. Almost everyone in the group is a volunteer, contributing in their spare time, or as a part of their day job with the blessing of their employers.

Six continents were represented by the folks in the room. This means that much of the CSS WG’s work is done remotely, but three or four times a year they get together to resolve particularly thorny, contentious or impactful issues face to face. Resolutions that will potentially affect us, as web designers, for years to come. It was fascinating to see how those decisions were arrived at, and to be able to make a modest contribution to some of them along the way (as anyone can do actually – more on that later).

Photo: Rossen Atanassov

I seated myself next to Rachel Andrew, an Invited Expert of CSS Grid fame. The first piece of advice Rachel gave me was to open up the IRC channel which would be used to share links and continually minute proceedings (thanks to the indefatigable Dael Jackson). If you’re unaware of IRC you can think of it as a lightweight precursor to WhatsApp groups or Slack channels, predating the Web.

The first activity performed by the group was the most efficient round of introductions I had ever encountered. With each person announcing themselves in the room and on IRC as “Rossen Atanassov, Microsoft”, “Richard Rutter, observer, Clearleft”, etc., we got through 35 people in less than 2 minutes.

The agenda for the three days had already been agreed and shared through the CSSWG wiki, so I was aware of what was to come. Almost all the issues addressed were opened in Github, with an hour or more allocated to a particular CSS module or other area of the overall specification. Each issue required a particular action or answer, such as “How do we allow for paragraph-level line breaking?” and “Should we implement or unship word-break:break-word?” and even “Who defines box-sizing?” (yes the box model ambiguity still rumbles on.)

The room was refreshingly quiet and respectful, with just one person speaking at a time (mostly). There were a few key voices who were ever-present in the discussions, but for the most part each person got involved when their area was raised. Otherwise folks were silent, keeping on top of things through IRC, with half an ear on proceedings, seemingly getting on with other business. Just occasionally the restrained voices would get raised, ears would prick up and heads would lift above laptops:

— There’s no need to make it personal, I'm making a forward looking statement where if we see this in the future it behooves us to pay attention.
— Right let’s just move on.
— We’ll resolve to add an issue and a fix for 2.1 to disambiguate width for inner and outer width. Any objections?

Just as in that snippet of conversation, all discussion worked towards a solution or a proposal. These were phrased very specifically as ‘resolutions’ with each one being opened up for objections and passed if there were none. It was a remarkably efficient way to gain consensus, almost certainly helped by much of the hard thinking being done prior to the meeting. In the spirit of openness – a founding principle of the Web, the resolution and the relevant part of the IRC log would then be posted to the originating Github issue.

The consensus building is vital. Representatives from all the major browsers were in the room, collaborating closely by proposing ideas and sharing implementations. But most fundamentally they were agreeing together what should go in the specifications, because what goes in the specs is what gets built and ends up in the hands of users.

A day and half of proposals, discussions and resolutions later, my turn came. It was time to resolve a whole afternoon’s worth of font and text issues. I chimed in with a few contributions and got to see first hand why some of my variable font tutorials would now need updating, as it was resolved to modify the CSS Fonts Module specification in a number of ways, and hence to change some current browser implementations (definitely for the better, so I’ve no complaints on that front).

All in all it was fascinating to see inside the CSS Working Group, and I’m extremely grateful to Elika for inviting me. We all have a lot to thank this group of smart, extremely hard working folk. One of the best ways any of us can do so is to contribute to the discussions on the W3C’s CSS WG Github issues. It was clear to me that all comments from web designers and developers (“authors” in W3C parlance) are welcome and form part of the debate leading to better CSS standards, so quietly and respectfully do join in the conversation.

* * *

For more CSS, typography and variable fonts fun join me and a fantastic line-up of design experts from around the world at Ampersand, the web typography conference, now in its fifth year.

Announcing UX London Office Hours Tue, 17 Apr 2018 10:46:00 +0000 Starting this June, I’m going to be running a UX focussed “Office Hours” drop-in session on the last Thursday of the month in London.

If you haven’t come across the concept of “Office Hours” before, it’s a practice that’s been popularised by venture capital firms, but has since spread to other areas of the industry.

How it works

I’ll block out my day for a series of 45 minute meetings, which you’ll be able to book in advance. During these sessions, we can discuss anything UX related that’s on your mind. Maybe you’re a startup founder looking for feedback on a recent design. Maybe you’re a design leader with a tricky internal challenge. Or maybe you’re looking for your next move in the industry and would appreciate some help with your portfolio. As long at it’s UX related, pretty much anything is on the table.

I’ve no idea how this is going to work, so it’s a bit of an experiment. I love meeting new folk and helping people out, so I’m keen to give it a try.

Get in touch to register your interest

Until I get a proper mechanism in place for managing bookings (suggestions are welcome), why don’t you drop me a line if you’d like my help, and we can get something booked in.

Beat the clock with Time Well Spent Fri, 13 Apr 2018 08:37:15 +0000 Every digital project is essentially a battle with time. It is simultaneously our most precious and finite resource, and our nemesis.

This fight against time is ongoing, and one where you need to find ways to not just win the odd battle but also the war.

The problem with time

This is true for in-house design teams as well as agencies. Sadly, time more often than not wins. This results in projects ending with some of the most inventive, interesting and potentially valuable ideas left languishing in the backlog.

The trouble with time is that we have become sophisticated at counting it, but maybe mis-directed in how we measure it.

We use Kanban boards like Trello and PivitolTracker to show when we will do something. We use time reporting tools such as 10,000ft Plans and Harvest to capture what we have done with our time. However, we don’t yet seem to have great tools to help answer the more vital and interesting question: Was our time well spent?

In wanting to make more of time - this most precious and finite of resources, I think we should move away from only asking ‘when’ and ‘what’ and include into the mix ‘why’.

What to do about it

I’ve been pondering ways to ensure the projects I work on stand a better chance of delivering that delightful or novel feature that will make it standout. The type of feature that materialises when time is protected to innovate and go the extra mile.

To explore if my time was being used in a valuable way, I recently created a canvas to do two things: help predict where time should be best spent, and help evaluate if it could had been used more effectively.

The simplicity of the framework belies its strength. I’ve used it on digital projects as well as in organising my weekends, and even planning what to do on a City break.

I now find that I have time to get round to more of the fun, inventive and unusual bits during projects, and on a Sunday evening I’m less likely to wish for another day of the weekend to be able to indulge a passion.

If you want to give it a go you can download a copy of the canvas. Feel free to share it and tag myself and Clearleft when you do – it’s under a Creative Commons licence.

Diagram of Time Well Spent Canvas
‘Time Well Spent’ created by Chris How

Take some time to make some time

Like many an economic model (after all, time is your most valuable resource), the sections are created from two axis–enjoyable and valuable–which forms four quadrants. Let me introduce each one in turn.

Don’t do - low value and low enjoyment

At the bottom left side is the ‘don’t do’ zone. This is inhabited by unnecessary tasks.

Miserable people do miserable work. There’s no time-rebate at the end of a project. Stop wasting your time on things that don’t make a difference. Challenge whether you really need to do a task. Start to make better use of your time.

Ask yourself and your team what they think sits here and see if you can bin it. You might be surprised how many habitual tasks in a project can be assigned to this quadrant.

Don’t overdo - low value but high enjoyment

This is an interesting and dangerous place. It’s where the tasks that you love doing but deliver low value live.

It’s easy to get distracted by shiny new things. It’s easy to slip into comfortable habits and use well trodden techniques that you find fun. It’s easy to fill your time and think you are working hard.

Beware the time-sinks and shiny distractions that lie in this quadrant. Resist the temptation to over polish your work where it adds little overall value to the project.

Ask yourself if you actually need a beautifully presented usability report, or will a list of observations and actions serve the project better? Do you need to create a presentation with a slidedeck, or can you get better results from spending the time facilitating a discussion instead? Do you need a 600dpi print-ready version of your customer journey map, or will a photo of your scribbles and Post-it® notes move the project forward just as well and quicker?

Need to do - high value but low enjoyment

Let’s move over to the side of the graph concerned with adding greater value. On the bottom right-hand side is the need to do activities. For tasks that fall into this quadrant, focus on finding ways to reframe, speed-up or mechanise them.

Some tasks give you less pleasure but are essential. For these find ways to reduce the time needed, break them up, or share them out.

Ever get the feeling of deja-vu from essentially writing the same usability testing facilitation guide or recruit screener? Save time in the long run by creating a library of successful boilerplate questions. Then, this task becomes reframed as revisiting and restocking your library.

Typing up Post-it® notes from workshops is a drag. Reduce the burden by sharing the work out. Make it more fun (and quicker) by making it a competitive race with your colleagues.

Nearly anything that is boring, repetitive and time-consuming to do can be better achieved by a computer. If you are editing text and page numbers in the contents page of a report or trying to mash together analytics data with output from a content audit, then go ask a colleague with programming skills to write a macro to automate the process.  

Ensure you do - high value and high enjoyment

The final quadrant is the place you want to be spending your time in.

This is the area where losses in time result in cuts being made to your MVP, turning it from a delightful experience into a miserable viable product.

This is where the potential for innovation, delight and meaningful design live. The items in here need space and time to think, create and iterate upon. They are often some of the trickiest challenges, but ones that offer most long-term value. Don’t leave them to the end and run out of time.

If you are using the canvas at the start of a project make sure you have at least one item in this quadrant. Then make time to explore, develop and deliver the idea. If you don’t, there’s a real danger your project will result in a cake with no icing.

How to use the canvas

1. As a team, or individually, write your user stories or tasks on blank playing cards.

2. Shuffle the deck.

3. Put each card in one of the quadrants.

4. Take action to review and re-adjust the time on tasks to get more time for the things that add value and you get pleasure from doing.

5. Repeat whenever you plan your next steps in a project.

Let me know how you get on

Tell me what things the canvas helped you find the time to do that would otherwise remain yet another missed opportunity. I’d love to hear from you. Get in touch via Twitter @chrishow @clearleft.

Announcing Going Offline from A Book Apart Sat, 07 Apr 2018 00:19:10 +0000 I decided that I wanted a new mug.

I already have one very nice mug. It was sent to me by A Book Apart because I wrote the book HTML5 For Web Designers back in 2010. If I wanted another nice mug, it was clear what I had to do. I had to write another book.

So I’ve written a book. It’s called Going Offline and it’s available to pre-order now. It will start shipping a few weeks from now.

I think you will enjoy this book. Here’s why…

You have a website or you make websites for other people. You’re comfortable with HTML and CSS, but maybe you’re a bit apprehensive about JavaScript (like me). You keep hearing lots of talk about service workers and progressive web apps. You’re intrigued. But you’re put off by the resources out there. They all assume a certain level of JavaScript knowledge. What you need is a step-by-step guide to help you make your website work offline …a guide that won’t assume you’re already comfortable with code.

Does that sound like you? Then Going Offline is for you.

Thinking about it, a more accurate title for the book would’ve been Service Workers For Web Designers …although even that would assume too much existing knowledge (like, what the heck a service worker is in the first place).

Pre-order Going Offline today and it will be in your hands in just a few weeks.

Alas, I have no idea when my new mug will be ready.

This was originally published on my own site.

Links from a talk Wed, 21 Mar 2018 16:59:45 +0000 In two weeks time, I’ll be in Seattle for An Event Apart. I’ll be giving a brand new talk. The title is The Way Of The Web (although perhaps a more accurate title would be The Layers Of The Web).

Here’s the description:

Do you ever get overwhelmed by the ever-changing nature of web design and development? Exhausting, isn’t it? How are you supposed to know which technologies and tools you should invest your time in? Will they stick around or will you just have to relearn everything in another few months? Join Jeremy as he takes a tour of the past, present, and future of working on the web. From the building blocks of HTML, CSS, and JavaScript through to frameworks and libraries right up to the latest and greatest Progressive Web Apps, this talk will examine our collective assumptions with a critical eye. By learning from the past, we can make sensible design decisions today to build the web of tomorrow.

There’s a direct evolution line from my previous talks—Resilence and Evaluating Technology—to this new one. (Spoiler: everything I talk about is in some way related to progressive enhancement …even if I never use the words “progressive” or “enhancement” in the talks.)

I’ve been preparing this new talk for months. It started with a mind map—an A3 sheet of paper with disconnected thoughts, like something from the scene in the crime movie where the enter the layer of the serial killer and find a crazy wall.

Then I set it aside and began procrastinating. But it was the good kind of procrastinating, right? I mean, I had made a start and all those thoughts were now bubbling around in my head.

Eventually I forced myself to put things in some sort of order and started creating slides. That’s the beginning of the horrible process bouncing between thinking “this is pretty good!” and “this is absolute crap!” To be honest, I never actually know if a talk is any good until I give it in front of an audience (practice runs at work are great for getting feedback but they’re not the same as doing the talk for real).

Anyway, I think the talk is ready to roll. If you see me giving this talk and you’re interested in diving deeper into the topics raised, I’ve gathered together some of sources I used.

Further Reading

Related posts on

Progressive Web Apps



This was originally posted on my own site.

A workshop on building for resilience Fri, 09 Mar 2018 16:57:36 +0000 In February, I tried out a new workshop two times—once at Webstock in New Zealand, and once in Hong Kong.

The workshop is called The Progressive Web: Building for Resilience. Here’s an excerpt form the blurb:

This workshop will show you to to think in a progressive way that works with the grain of the web. Together we’ll peel back the layers of the web and build upwards, creating experiences that work for everyone while making the best of cutting-edge browser technologies. From URL design to Progressive Web Apps, this journey will cover each stage of technological advancement.

Basically, it’s the workshop version of Resilient Web Design. If that book is the theory, this workshop is the practice.

Tim recently posted his tips for running workshops and there’s a lot in there that resonates with me. Like Tim, I’ve become less and less reliant on slides. In fact, this workshop—like my workshop on evaluating technology—has no slides. Instead it’s all about the exercises and going with the flow.

After starting with a warm-up, I canvas the room to see if there any specific topics, tools or technologies that people are particularly interested in covering. I’ll note those (on post-its slapped on the wall) for reference throughout the day, to try to make sure that those particular things are touched on at some point. Then I start with a thought experiment…

First of all, I get everyone to call out websites, services and apps that they use almost every day: Twitter, Facebook, Gmail, Slack, Google Docs, and so on. Those all get documented on the wall. Then it’s time to ask of each product, “What is the core functionality?” The idea here is to get beneath the surface-level verbs like swiping, tapping and dragging to get to the real purpose of a service: buying, selling, sharing, reading, writing, collaborating, and so on.

At this point I inform the attendees that the year is 1995. And now we’re going to build these services using the technology of this time. This is a playful way of getting answers to the question “What’s the simplest technology to enable the core functionality?” It’s mostly forms, links, and lots of heavy lifting on the server.

Then the real fun begins. “Enhance!” Moving forward in time, we get to add styles, we add interactivity with JavaScript, then Ajax, and then we get to really have fun with technologies like web sockets, geolocation, local storage, right the way up to service workers, notifications, and background sync. And the beauty of it all is that, if any of those technologies aren’t supported in a particular browser or device, the core functionality is still available.

Next, we apply this layered mindset to a new service. I split the attendees into groups, and each of them gets a procedurally-generated startup idea …generated by shuffling some cards. This is an exercise I first tried when I was teaching in Porto:

I made five cards with types of sites on them: news, social network, shopping, travel, and learning. Another five cards had subjects: books, music, food, pets, and cars. And another five cards had audiences: students, parents, the elderly, commuters, and teachers. Everyone was dealt a random card from each deck, resulting in briefs like “a travel site about food for the elderly” or “a social network about music for commuters.”

The first few exercises are good creative fun: come up with a name, then a logo, then a business model. Then it’s time to build. It starts with URL design. Then it’s content prioritisation (for a representative URL). Then it’s layout (sketching!). The enhancements have begun. “How might this URL benefit from Ajax?” “How might this URL benefit from geolocation?” “How might this URL benefit from offline storage?” “How might this URL benefit from a service worker?”

Workshop team 4 Workshop team 3 Workshop team 2 Workshop team 1

At this point, we’ve applied the layered, progressive approach at the scale of an entire service, and at the scale of an individual URL. Finally, we apply the same approach at the level of a component. It might be a navigation, or a carousel, or an interactive widget. In each case, the same process applies: “What’s the core functionality? What’s the simplest technology to enable that functionality? Enhance!”

Along the way, there are plenty of rabbit holes we can go down. Whether it’s accessibility, or progressive web apps, or pattern libraries, I go along with whatever people are curious about. But all of it ties back to the progressive, layered mindset I’m hoping to foster.

By the end of the day, I’m hoping that an attendee has one of two reactions:

  1. “What a waste of time! Everything in that workshop was blindingly obvious!” (in which case, excellent!—they’re already thinking in a progressive way), or
  2. “That workshop has completely changed the way I think about building on the web!” (I’m being hyperbolic here, but at the very least I’m hoping to impart a new perspective).

Having given the workshop a few times, I’m really pleased with how it went (and more important, I’m pleased that people enjoyed it). If this sounds like something that your company or team would enjoy, get in touch and we can take it from there.

This was originally posted on my own site.

Minimal viable service worker Tue, 06 Mar 2018 12:16:54 +0000 I really, really like service workers. They’re one of those technologies that have such clear benefits to users that it seems like a no-brainer to add a service worker to just about any website.

The thing is, every website is different. So the service worker strategy for every website needs to be different too.

Still, I was wondering if it would be possible to create a service worker script that would work for most websites. Here’s the script I came up with.

The logic works like this:

  • If there’s a request for an HTML page, fetch it from the network and store a copy in a cache (but if the network request fails, try looking in the cache instead).
  • For any other files, look for a copy in the cache first but meanwhile fetch a fresh version from the network to update the cache (and if there’s no existing version in the cache, fetch the file from the network and store a copy of it in the cache).

So HTML files are served network-first, while all other files are served cache-first, but in both cases a fresh copy is always put in the cache. The idea is that HTML content will always be fresh (unless there’s a problem with the network), while all other content—images, style sheets, scripts—might be slightly stale, but get refreshed with every request.

My original attempt was riddled with errors. Jake came to my rescue and we revised the script into something that actually worked. In the process, my misunderstanding of how await works led Jake to write a great blog post on await vs return vs return await.

I got there in the end and the script seems solid enough. It’s a fairly simplistic strategy that could work for quite a few sites, but it has some issues…

Service workers don’t perform any automatic cleanup of caches—that’s up to you to do (usually during the activate event). This script doesn’t do any cleanup so the cache might grow and grow and grow. For that reason, I think the script is best suited for fairly small sites.

The strategy also assumes that a file will either be fetched from the network or the cache. There’s no contingency for when both attempts fail. So there’s no fallback offline page, for example.

I decided to test it in the wild, but I expanded it slightly to fix the fallback issue. The version on the Ampersand 2018 website includes a worst-case-scenario option to show a custom offline page that has been pre-cached. (By the way, if you haven’t got a ticket for Ampersand yet, get a ticket now—it’s going to be superb day of web typography nerdery.)

Anyway, this fairly basic script seems to be delivering some good performance improvements. If you’ve got a site that you think would benefit from this network/caching strategy, and it’s served over HTTPS, then:

  1. Feel free to download the script or copy and paste it into a file called serviceworker.js,
  2. Put that file in the root directory of your website,
  3. Add this in a script element at the bottom of your HTML pages:

if (navigator.serviceWorker && !navigator.serviceWorker.controller) { navigator.serviceWorker.register('/serviceworker.js'); }

You can also use the script as a starting point. You might find issues specific to your particular website. That’s okay—you can tweak and adjust the script to suit your needs.

If this minimal service worker script proves in any way useful to you, thank Jake.

This was originally published on my own site.

Offline itineraries with service workers Wed, 28 Feb 2018 17:58:00 +0000 The Trivago website is a progressive web app. That means it

  1. is served over HTTPS,
  2. has a web app manifest JSON file, and it
  3. has a service worker script.

The service worker provides an opportunity for a nice bit of fun branding—if you lose your internet connection, the site provides a neat little maze game you can play. Cute!

That’s a fairly simple example of how service workers can enhance the user experience when the dreaded offline situation arises. But it strikes me that the travel industry is the perfect place to imagine other opportunities for offline enhancements.

Travel sites often provide itineraries—think airlines, trains, or hotels. The itineraries consist of places, times, and contact information. This is exactly the kind of information that you might find yourself trying to retrieve in an emergency situation, like maybe in a cab on the way to the airport or train station. Perhaps you’re stuck in traffic, in a tunnel. Or maybe you don’t have a data plan for the country you’re currently in. Either way, wouldn’t it be great if you could hit the website for your airline or hotel and get your itinerary, even if you’re offline.

Alright, let’s think this through…

Let’s assume that an individual itinerary has its own URL. That URL is a web page of information, mostly text, with perhaps an image or two (like a map). Now when you make your booking, let’s have the service worker cache that URL (and its assets) for offline access.

Hmm …but there’s a good chance that the device you make the booking on is not the same device that you’d have with you out and and about. Because caches are local to the browser, that’s a problem.

Okay, but of these kinds of sites have some kind of log-in mechanism. So we could update the log-in flow a bit: when a user logs in, check to see if they have any itineraries assigned to them, and if they do, fire off an event to the service worker (using postMessage) to cache the URLs of the itineraries.

Now that the itineraries are cached, the final step is to create a custom offline page. As well as the usual “Sorry, the internet’s down” message, we can say “Sorry, the internet’s down …but here are your itineraries”. (This is kind of like the pattern you see on blogs like mine, Ethan’s, or Mike’s—a custom offline page that lists cached URLs of articles you’ve previously visited).

That’s just one pattern off the top of my head. It’s fun to imagine the different ways that service workers could be used to enhance the experience of just about any site, but they seem particularly relevant to travel sites—dodgy internet connections and travelling go hand-in-hand. At Clearleft, we’ve been working with quite a few travel-related clients lately so that’s why these scenarios are on my mind: booking holidays, flights, and so on. But, as I’ve said before and I’ll say again, every website can benefit from becoming a progressive web app.

This was originally posted on my own site.

Scaling design: the case for narrative transformation Tue, 06 Feb 2018 08:28:00 +0000 Digital transformation is something that we all wish we could boast to our friends and colleagues as something we have accomplished.

The covert challenge in this pursuit is hidden in the word ‘digital’, which implies we can achieve this fabled ‘transformation’ when we have the right technology. It is true that effectively employing the right technology is crucial. But there’s something else that’s important to address. In order to achieve digital transformation beyond just wearing the badge, design needs to play an equivalent strategic role.

For this to happen, our design practice must reach a tenable level of maturity.

When we think about maturing our design discipline within our company or organisation, the language that often dominates the digital transformation conversation tends to be about changing the processes, systems and behaviours. Design systems and design ops are part of the natural progression towards scaling design—and don’t get me wrong, these are necessary, fundamental steps. However, from my angle as a researcher and strategist, it’s as if we expect to be able to introduce change by redesigning the system alone, just like an engineer would upgrade a machine.

As someone who looks to inform strategy through evidence-based design, particularly from the human perspective—I’ve been thinking that in our current conversations we might have unconsciously overlooked the human element: the core narrative that each of us needs to embody in order to make change happen. These narratives make up the internal script that all of us run on: stories we tell ourselves about how we work, what we do, what we want to achieve—and why. These also include stories that we tell our peers and our colleagues.

To advance the design discipline, we must make adjustments to our collective version of truth, so that the scalable design systems we create reflect the story of transformation within. As a result, companies and users will benefit from the valuable outcomes design-led work brings. True change happens only when everyone involved accepts what “normal” is.  

The power of narratives

Do you know that exhilaration after you’ve read an amazing book or seen a brilliant film—the feeling of becoming a different person afterwards? There’s power in that feeling—when you are conscious that something has caused you to change the way you see yourself and the world around you. Something has changed the story you might tell. Borrowing from psychotherapy or social mediation, we can refer to this idea as a ‘narrative transformation’. In other words, the conscious act of changing our story.

While it would seem inappropriate to equate digital transformation to a form of therapy, if we look outside our own world, for example, to where professionals in mental health try to enact change in individuals, there’s a lot we can learn to help us establish a more mature design practice. Narrative transformation is also common where agents for social change – from political leaders to key workers on the ground – are tasked with healing rifts in communities.

And yet, when it comes to our industry, the concept of changing the narrative is not usually where the digital transformation conversation begins.

Frame the conversation.

Explore the context before the conversation

In the hubbub of the day-to-day and the business as usual, it’s often difficult to take the time to reflect on how we could most effectively incorporate new habits.

I’ve designed and run strategic training workshops for various clients at Clearleft. And when I’m working with design leaders who want to drive the influence and impact of design within their organisations, I’ve noticed that the initial conversation is often around upskilling a team on something specific, such as fundamental design research skills or Jobs-to-be-Done (JTBD).

That said, every design leader who wants to lift their team’s game also talks about the need for some degree of ‘change’, something that’s usually less tangible in practice. ‘Culture change’ is the nirvana on everyone’s lips.

Have you ever thought:

“We’ve done a workshop on X, but we struggle to know how to use it in practice?”


“Some of our team doesn’t buy into this process?”

The reality is, murmurs of hesitance are often found elsewhere in the company, where priorities are competing and colleagues need convincing that alternatives are better. Trying to make the argument that a different way of working may improve the end product or service is never quite so straightforward.

New skills are only as good as your team’s ability to use and apply them in the context of your team dynamics, the business objectives and organisational culture. As such, there needs to be an adjustment to the status quo, whether it’s mindset, process, or culture.

So how do you change the status quo and empower your team to not only upskill, but truly embody the culture change you’re aiming for?

Create culture change through narrative transformation

In order to seed change to lead to higher quality design, better outcomes for your customers and revenue for the business, it is essential to create a safe space, protect time, and frame the context for key conversations to happen within your team.

Often, these conversations:

  1. Enable your team members to gain individual insights so they grasp the effect they have on the outcome that impacts your customers
  2. Formulate a cohesive, shared narrative of why things currently happen the way they do
  3. Address skills gaps and uncover individual strengths—I think of these as “superpowers”
  4. Revisit the current narrative, and speculate: “with our new superpowers, how do we do things better?”

The Clearleft way to do this often involves workshops and design sprints of various flavours. We use our expertise to craft the workshop experience in collaboration with design leaders client-side, so that we can sow the seeds of longer term culture change whilst upskilling their teams. The focused nature of design sprints means teams can achieve product changes in a short space of time; participants come away with a new sense of empowerment and an awareness that they can truly make something happen. After the workshops and sprints have happened, and your team has gone back to the usual office rhythms, they should have better clarity on how these newly acquired skills can fit within their day-to-day context—towards a more mature design practice.

My way of addressing narrative transformation is through bespoke training on research. As I said earlier on, strategic research is my particular lens, but the focus on using narrative as a change driver can apply to other design disciplines as well.

Before you decide on embarking on this kind of intervention, there are a few things you can do to prepare ahead.

Shared reflections.

Plot the path to your north star

As you are trying to decide on what kind of skills you need in your team, it’s worth having a conversation with them to agree on what may be the best long-term outcome, together:

  • Dream up the ideal narrative. If you were to speak to another design leader and describe how you were successful, what kind of story would you want to tell?
  • Focus on the characters in your story. Look for the change-agents and influencers across your wider team — key players who can create a ripple effect in changing the narrative: who are the people you most need to influence? Who are the best people to spread the message?
  • Think about transforming individual journeys. Keep in mind the people you need to take along with you on your path: what might be the right combination of internal workshops, externally facilitated workshops or training workshops to help you change the culture? What other interventions might be possible?

I’d be interested to hear about the path you and your team may take to change your narrative, and what other kind of interventions you have used in order to accelerate design maturity within your organisation. Join our ongoing conversation about design thinking at @clearleft. Alternatively, you can reach me @sniffles on Twitter or

In support of MakerClub Fri, 02 Feb 2018 11:18:00 +0000 When Declan Cassidy approached Clearleft last year with a view to us supporting MakerClub, I was immediately hooked.

The Maker movement is something we’re very familiar with and aligned to - there’s nothing we like more than feeding our curiosity by tinkering around with technology. MakerClub opens up that world of play and innovation to young people. We jumped at the chance to support their BrightSparks scheme and help kids from underprivileged backgrounds get access to all the great learning and technology resources that MakerClub provides.

Earlier this week, Declan dropped by to share the latest news on MakerClub and to let us know what’s in the pipeline for this wonderful venture. Afterwards, he put pen to paper and answered a couple of interview questions, so we could spread the message beyond the four walls of the Clearleft studio!

Image courtesy of MakerClub. Photography: Chris Quigley.

Tell us about MakerClub and why it’s such an important project

DC: MakerClub was created to help encourage young people to become curious, lifelong learners. Our weekly clubs are based in ‘makerspaces’ across the UK - these are places that have access to advanced manufacturing equipment like laser cutters, 3D printers, craft materials and all kinds of cool electronics!

Children use this equipment to develop their invention and design skills through hands-on workshops and real-life briefs that use hardware and digital learning tools that we have developed in-house, to provide a rich discovery experience that allows them to creatively invent solutions to the challenges they face around them. We currently work with 300+ children a week, but hope to ramp this up as we move to scale in 2018, aiming by 2020 to be accessible throughout primary schools and local libraries.

Whether it’s a pollution detector, Internet of Things alarm systems for keeping bedrooms secure, or a robot just to keep a child company, it all starts with a young person’s imagination. We have worked for 4 years with educators and technologists to create a loose curriculum online learning environment that allows a child to create their own educational pathway attuned to their individual passions, while at the same time ensuring they get to grips with key creative technology skills like coding, 3D design and basic manufacturing.

According to the World Economic Skills Forum and NESTA, by 2030, skills like creativity, critical analysis and collaborative problem solving will be highly desirable by employers, especially given the current trend to automation and robotics in the workplace. This kind of learning ensures that young people develop the skills need to secure future work in a rapidly shifting market.

This kind of learning isn’t really available in schools due to restrictions in the curriculum and a lack of confidence in teaching STEAM (Science, Technology, Engineering, Art, Math). Over the next 12 months we will be rolling out a trial in every Primary school in Brighton, providing them all with the tools and equipment to run MakerClubs for free - we hope to then roll this out across the UK.

Image courtesy of MakerClub. Photography: Chris Quigley.

Why partner with Clearleft?

DC: Clearleft has always been a company that has led the charge for creativity, and we share many of the same values. The company has previously supported the local MakerFaire and run its own maker workshops for young people at its HQ - a partnership between us seemed like a brilliant fit.

So far, Clearleft has supported our BrightSparks programme, which works with schools to get children on free school meals access to MakerClub and provide them with a free laptop. Clearleft staff are also planning on volunteering in our local space, as well as providing some high-level support on the future design of our learning platform.

Image courtesy of MakerClub. Photography: Chris Quigley.

How can people get involved?

DC: To make the change we’re looking to affect, we need parents that care, teachers that want to facilitate this kind of learning and more companies like Clearleft to help support the next generation of makers and creatives.

If you believe that young people should be given the right skills to thrive in the 21st Century, no matter their background, please get in touch to join us on this exciting journey to transform education.

Contact Declan at

How are you supporting grassroots education and innovation projects in tech? We’d love to hear from you - tweet us @clearleft.

GDPR and Google Analytics Mon, 29 Jan 2018 12:58:46 +0000 Enforcement of the European Union’s General Data Protection Regulation is coming very, very soon. Look busy. This regulation is not limited to companies based in the EU—it applies to any service anywhere in the world that can be used by citizens of the EU.

It’s less about data protection and more like a user’s bill of rights. That’s good. Cennydd has written a techie’s rough guide to GDPR.

The Open Data Institute’s Jeni Tennison wrote down her thoughts on how it could change data portability in particular. While she welcomes GDPR, she has some misgivings.

Blaine—who really needs to get a blog—shared his concerns in the form of the online equivalent of interpretive dance …a twitter thread (it’s called a thread because it inevitably gets all tangled, and it’s easy to break.)

The interesting thing about the so-called “cookie law” is that it makes no mention of cookies whatsoever. It doesn’t list any specific technology. Instead it states that any means of tracking or identifying users across websites requires disclosure. So if you’re setting a cookie just to manage state—so that users can log in, or keep items in a shopping basket—the legislation doesn’t apply. But as soon as your site allows a third-party to set a cookie, it’s banner time.

Google Analytics is a classic example of a third-party service that uses cookies to track people across domains. That’s pretty much why it exists. We, as site owners, get to use this incredibly powerful tool, and all we have to do in return is add one little snippet of JavaScript to our pages. In doing so, we’re allowing a third party to read or write a cookie from their domain.

Before Google Analytics, Google—the search engine business—was able to identify and track what users were searching for, and which search results they clicked on. But as soon as the user left, the trail went cold. By creating an enormously useful analytics product that only required site owners to add a single line of JavaScript, Google—the online advertising business—gained the ability to keep track of users across most of the web, whether they were on a site owned by Google or not.

Under the old “cookie law”, using a third-party cookie-setting service like that meant you had to inform any of your users who were citizens of the EU. With GDPR, that changes. Now you have to get consent. A dismissible little overlay isn’t going to cut it any more. Implied consent isn’t enough.

Now this situation raises an interesting question. Who’s responsible for getting consent? Is it the site owner or the third party whose script is the conduit for the tracking?

In the first scenario, you’d need to wait for an explicit agreement from a visitor to your site before triggering the Google Analytics functionality. Suddenly it’s not as simple as adding a single line of JavaScript to your site.

In the second scenario, you don’t do anything differently than before—you just add that single line of JavaScript. But now that script would need to launch the interface for getting consent before doing any tracking. Google Analytics would go from being something invisible to something that directly impacts the user experience of your site.

I’m just using Google Analytics as an example here because it’s so widespread. This also applies to third-party sharing buttons—Twitter, Facebook, etc.—and of course, advertising.

In the case of advertising, it gets even thornier because quite often, the site owner has no idea which third party is about to do the tracking. Many, many sites use intermediary services (y’know, ‘cause bloated ad scripts aren’t slowing down sites enough so let’s throw some just-in-time bidding into the mix too). You could get consent for the intermediary service, but not for the final advert—neither you nor your site’s user would have any idea what they were consenting to.

Interesting times. One way or another, a massive amount of the web—every website using Google Analytics, embedded YouTube videos, Facebook comments, embedded tweets, or third-party advertisements—will be liable under GDPR.

It’s almost as if the ubiquitous surveillance of people’s every move on the web wasn’t a very good idea in the first place.

This was originally posted on my own site.

How to use variable fonts in the real world Fri, 26 Jan 2018 11:28:00 +0000 Using variable fonts in the real world turns out to be tricky. This post explains how we achieved it for the new Ampersand website and what we learned along the way.

This article has been updated to reflect pending clarifications and modifications to the CSS Fonts Module Level 4 as resolved in the April 2018 CSS WG meeting.

A variable font is a single font file which behaves like multiple styles. (I wrote more about them here in an extract from my Web Typography book). There are plenty of sites out there demoing the possibilities of variable fonts and the font variation technology within, but for the new Ampersand conference website I wanted to show variable fonts being using in a real, production context. It might well be the first commercial site ever to do so.

Variable fonts in action on the Ampersand website

Two months ago browser support for variable fonts was only 7%, but as of this morning support is at over 60%. Safari 11, Chrome 62+, Firefox 57+ and Edge 17+ all support variable fonts (Firefox only on a Mac and if you set the correct flags). This means font variations is a usable technology right now. But not all support is equal, as you’ll see.

Variable font capable software is already more pervasive than you might think. For example, the latest versions of Photoshop and Illustrator support them, and if you’re using macOS 10.13+ or iOS 11+ the system font San Francisco uses font variations extensively. That said, the availability of variable fonts for use on the web is extremely limited. At the time of writing there are very few commercial variable webfonts available (Dunbar​ and Fit​ are notable exceptions), but there is a growing number of free and experimental variable webfonts, as showcased in the Axis Praxis playground and more recently listed on Variable Fonts.

From this limited palette of fonts, we (by which I mean Clearleft designer James Gilyead) chose Mutator Sans for the display text, and Source Sans for the body text in a Saul Bass-inspired design. Both fonts enabled us to make use of their variable weight axis. Fonts chosen now came the tricky, multi-step business of implementing variable fonts into the website. I’ll take you through how we (by which I mean Clearleft developer Mark Perkins) did it, using simplified code snippets.

1. Link to the fonts

Getting your variable fonts working in a basic fashion is fairly straight forward. At the time of writing Safari and Chrome have the most complete support. If you’re following along with these steps, you’ll need one of those browsers to start off with.

We downloaded the Source Sans variable font from its home on Github and used @font-face with a format of truetype-variations to link it up to the stylesheet:

@font-face {
  font-family: 'SourceSans';
  src: url('source-sans-variable.ttf') format('truetype');

We could then set the variable Source Sans font as the main typeface for the page in the usual way:

html {
  font-family: 'SourceSans', sans-serif;

2. Set the weights

The variable font implementation in CSS is designed to use existing properties for certain pre-defined variation axes. We’re using three weights within the body text: regular, semibold and black. We set the bold fonts using font-weight in the usual way:

.hero { font-weight: 900; }
.blurb { font-weight: 600; }

However this doesn’t work as expected without modifying the @font-face rule. When you include a font-weight descriptor in an @font-face rule, you are telling the browser that the font corresponds to that weight, and that weight only. When you omit the font-weight descriptor, the browser treats the rule as if you set font-weight:400. This is the case whether or not your font is variable with a weight axis - the font will be ‘clamped’ to a weight of 400.

To make use of the weight axis, and for the font-weight properties to work as you might expect, we needed to add a font-weight range to the @font-face rule:

@font-face {
  font-family: 'SourceSans';
  src: url('source-sans-variable.ttf') format('truetype');
  font-weight: 1 999;

The font weight range allows the variable font to be displayed at any weight from 1 to 999 (you could specify a more constrained range if you wanted). In the near future the CSS Fonts Level 4 spec will allow you to omit the range descriptor because the default value will become a new value of auto, thus enabling the full range of weights available in the variable font, and defaulting to normal for static fonts. (The same applies to other descriptors such as font-stretch.)

With variable fonts, your weight doesn’t have to be limited to intervals of 100. It can be any integer in the range 1-999. For the main heading, set in Mutator Sans, we used subtle differences in weight for each letter to give a more hand-drawn feel to the design:

b:nth-child(1) { font-weight: 300; }
b:nth-child(2) { font-weight: 250; }
b:nth-child(3) { font-weight: 275; }

3. Subset and create a WOFF2

The Source Sans variable font is pretty big: the TrueType file is 491Kb. This is mostly because it has a huge character set: nearly 2000 glyphs including Greek, Cyrillic, alternate characters and symbols. Your first step in reducing file size is to create a subset of the font so that it no longer contains characters you won’t ever need.

We decided to be fairly conservative in what we kept in, so we subsetted to include Basic Latin, Latin-1 Supplement and Latin Extended-A character ranges; a total of around 400 characters covering most European languages. In Unicode terms these are U+0020-007F, U+00A0-00FF and U+0100-017F.

There are plenty of online tools for subsetting fonts, such as Fontsquirrel. However all tools that I have seen strip out the variation data. This means you’ll need to turn to a command line approach. We subsetted the font using the open source pyftsubset, a component of fonttools (see Michael Herold’s tutorial for more info). If Node is more your thing, you could instead use Glyphhanger.

Both Glyphhanger and fonttools (if you install Brotli compression) will output the subsetted file as a WOFF2. We don’t need a regular WOFF as well because all browsers which support variable fonts also support WOFF2.

Running the subsetting routine and conversion to WOFF2 gave us a pleasingly tiny 29Kb file. We updated the @font-face rule accordingly:

@font-face {
  font-family: 'SourceSans';
  src: url('source-sans-variable.woff2') format('woff2');

So that’s the job done for browsers which support variable fonts. But that’s barely half the story.

4. Provide fonts for incapable browsers

Variable fonts do render on browsers which don’t support font variations, but you obviously have no control over which weight (or other axis instance) will be used.

To get around this, you need to serve non-variable (single-style) fonts to these browsers. At the time of writing, the CSS Fonts Module Level 4 specifies that variable fonts can be indicated with a specific format() value:

@font-face {
   font-family: 'SourceSans';
   src: url('source-sans-variable.woff2') format('woff2-variations');

This enables you to create @font-face rules like this:

@font-face {
  font-family: 'SourceSans';
  src: url('source-sans-variable.woff2') format('woff2-variations'),
       url('source-sans-regular.woff2') format('woff2');
  font-weight: 400; 

@font-face {
  font-family: 'SourceSans';
  src: url('source-sans-variable.woff2') format('woff2-variations'),
       url('source-sans-black.woff2') format('woff2');
  font-weight: 900; 

The preceding code points to the single-style font files with an @font-face rule including the font’s weight, as you would normally. You can then repeat a reference to the variable font file in each rule. Browsers which support variable fonts will download the file marked as format('woff2-variations') (once only), and browsers which don’t will download the single-style font marked as format('woff2').

But. Only Safari supports format('woff2-variations') (and that syntax is changing) which rather messes things up if we want the other capable browsers to get their variable font. So we resorted to a different, rather more verbose tactic. Firstly we gave the variable font a different name to the single-style typeface, thus separating links to variable fonts from single-style fonts:

@font-face {
  font-family: 'SourceSansVariable';
  src: url('source-sans-variable.woff2') format('woff2');
  font-weight: 1 999;

@font-face {
  font-family: 'SourceSans';
  src: url('source-sans-black.woff2') format('woff2'),
         url('source-sans-black.woff') format('woff');
  font-weight: 900; 

@font-face {
  font-family: 'SourceSans';
  src: url('source-sans-semibold.woff2') format('woff2'),
         url('source-sans-semibold.woff') format('woff');
  font-weight: 600; 

We then needed to write an @supports rule to ensure the right fonts went to the right browsers:

html {
  font-family: 'SourceSans' sans-serif;

@supports (font-variation-settings: normal) {
  html {
    font-family: 'SourceSansVariable', sans-serif;

In the above code, the single-style fonts are specified as standard, however if a browser supports variable fonts (it’s a reasonable assumption that can be judged by support for font-variation-settings) then it gets the variable font instead.

One final thing. For a belt and braces approach, every time you use variable fonts you should explicitly set the font weight even when the weight you want is 400 or normal. With a variable font, one browser’s idea of the default weight may differ slightly from another. In our testing Firefox rendered default text significantly lighter than Safari and Chrome, until we did this:

html {
  font-family: 'SourceSans' sans-serif;
   font-weight: 400;

@supports (font-variation-settings: normal) {
  html {
    font-family: 'SourceSansVariable', sans-serif;
    font-variation-settings: "wght" 400;

And that’s it. Do check out how it came together on the Ampersand website, and don’t forget Ampersand is a conference dedicated to typography on the web - if that’s your thing you might want to check it out. There will be plenty of discussion of variable fonts, and much more besides.

This was first posted on my own site.

Putting the agency back in (your) business Thu, 25 Jan 2018 17:07:00 +0000 Agency: An organisation that offers a particular kind of assistance on behalf of another business, person, or group.

Whilst there are many different definitions of agency, in the context of the design industry this is one of the simplest and most appropriate to describe what it is that agencies actually do. Historically, they offer specialisms and skills that help their clients in some way - these can take years to master and by employing groups of people with these skills agencies are able to offer services that can take their clients a long time to develop internally.

But over the last few years there has been a paradigm shift in how these agency clients (let’s call them organisations) work and are structured. We’re all aware of the productisation that has become so prevalent in today’s organisations - in-house design and development teams are now the norm, with those previously out-sourced specialisms and skills being brought under the one roof to help build much more rounded and cross-functional departments, capable of delivering continually improving product visions and services.

This all makes great business sense and many organisations - indeed the design industry itself - have flourished from the successes of this shift - longterm investment in people and skills focussed solely on specific organisational needs seems ideal. But if this move to in-house is so successful, where does this leave the agency, and why is it that we as an agency are still working with so many of these organisations even after they have spent time and resources building up their own specialised departments?

We all need a little help from time to time

Many of the organisations we talk to and work with have a broad range of well-developed skills across their teams - their employees have spent years in agencies, product teams and organisations with similar challenges, and in short, they know their stuff. Capability certainly isn’t an issue - in fact many of these organisations have strong teams working with well-formed backlogs, continually improving their products and services. But this is often where we find that we as an agency can help - when work load and business as usual is strong and steady, finding the time, thought-space and drive to tackle problems, innovate or even take a step back to assess more often than not gets pushed to the bottom of that backlog.

Because we often operate outside the constraints of business as usual, it enables us to work in a space that can offer a fresh perspective on business as usual, or dedicate effort in a given area. Being afforded the time and remit to tackle a particular problem is usually something of a luxury when there are so many other ongoing operational challenges, but paradoxically tackling these problems often yields extremely beneficial results for those ongoing challenges. Increased efficiency, refocussing effort, assessing processes, adding, streamlining or redesigning features and functionality, even the not-so-small task of digital transformation - these are just a few examples of benefits resulting from work that we do with clients. The truth is that many experienced, cross-functional internal teams may well come to similar conclusions, but quite simply don’t have the capacity or space in which to do so.

We like to think of ourselves as an extension of an organisations’ own team(s) - we share similar skills, talk the same language, and love tackling those tricky problems, big or small. We have a wealth of experience between us, and over the years we’ve all rolled up our sleeves and got stuck in when needed, but where we really come into our own is in helping define and isolate a challenge. Often the diverse experience, skills and fresh perspectives that our tailored teams offer can be exactly the catalyst that helps an organisation shape and deliver solutions.

Well, this should be easy...

All said and done, it really all comes down to the fact that our particular kind of assistance is actually tailored to each organisation we work with - we help identify the shape of that assistance, create a space for it, bring processes, people and skills to embed it, then work closely with everyone involved to deliver it. Simple. 

So, the next time you are wondering how you’ll get through that backlog, have a great idea (even the inkling of a great idea) but don’t know how you’ll ever get some space, capacity or skills to tackle it, maybe it’s time to consider an agency - we for one would certainly welcome a chat about how we can help you.

Design ops for design systems Thu, 25 Jan 2018 13:04:20 +0000 Leading Design was one of the best events I attended last year. To be honest, that surprised me—I wasn’t sure how relevant it would be to me, but it turned out to be the most on-the-nose conference I could’ve wished for.

Seeing as the event was all about design leadership, there was inevitably some talk of design ops. But I noticed that the term was being used in two different ways.

Sometimes a speaker would talk about design ops and mean “operations, specifically for designers.” That means all the usual office practicalities—equipment, furniture, software—that designers might need to do their jobs. For example, one of the speakers recommended having a dedicated design ops person rather than trying to juggle that yourself. That’s good advice, as long as you understand what’s meant by design ops in that context.

There’s another context of use for the phrase “design ops”, and it’s one that we use far more often at Clearleft. It’s related to design systems.

Now, “design system” is itself a term that can be ambiguous. See also “pattern library” and “style guide”. Quite a few people have had a stab at disambiguating those terms, and I think there’s general agreement—a design system is the overall big-picture “thing” that can contain a pattern library, and/or a style guide, and/or much more besides:

None of those great posts attempt to define design ops, and that’s totally fair, because they’re all attempting to define things—style guides, pattern libraries, and design systems—whereas design ops isn’t a thing, it’s a practice. But I do think that design ops follows on nicely from design systems. I think that design ops is the practice of adopting and using a design system.

There are plenty of posts out there about the challenges of getting people to use a design system, and while very few of them use the term design ops, I think that’s what all of them are about:

Clearly design systems and design ops are very closely related: you really can’t have one without the other. What I find interesting is that a lot of the challenges relating to design systems (and pattern libraries, and style guides) might be technical, whereas the challenges of design ops are almost entirely cultural.

I realise that tying design ops directly to design systems is somewhat limiting, and the truth is that design ops can encompass much more. I like Andy’s description:

Design Ops is essentially the practice of reducing operational inefficiencies in the design workflow through process and technological advancements.

Now, in theory, that can encompass any operational stuff—equipment, furniture, software—but in practice, when we’re dealing with design ops, 90% of the time it’s related to a design system. I guess I could use a whole new term (design systems ops?) but I think the term design ops works well …as long as everyone involved is clear on the kind of design ops we’re all talking about.

This was originally posted on my own site.

Ampersand is back! Tue, 23 Jan 2018 16:14:00 +0000 It’s been a while – nearly three years, in fact – since we last brought our typography-fuelled Ampersand conference to the web designers and type enthusiasts of the world. I’m thrilled to announce that we’re bringing it back in 2018!

What is Ampersand all about?

For those that don’t know, Ampersand is an inspiring and affordable one-day web typography conference, bringing together leading thinkers and designers from the worlds of type and web design.

My love of typography led me to create the first Ampersand conference in 2011, held near Clearleft’s studio in Brighton. With webfonts having just been unleashed on the world, I wanted to put type designers and web designers on the same stage - something that had never been done before. It was clear other people shared my passion, because that first conference sold out, after which we ran the event every few years, including a stand-out year on the road, where we bought Ampersand to the Times Center in New York City!

AMPERSAND WILL RETURN IN JUNE 2018! (photo: Marc Thiele)

The conference always features a unique mix of voices and experts representing all aspects of typography on the web. In the past we’ve had type designers, browser makers, book designers, web developers, illustrators, visual designers, branding experts, font engineers and no fewer than three professors. Speakers have included Erik Spiekermann, Jonathan Hoefler, Jen Simmons, Mark Bolton and Jenn Lukas to name but a few.

Like the audience, all our speakers share a love of type and enjoy nothing more than getting into the nitty gritty, so get ready to geek out, folks!

Why bring it back?

We’ve taken a little break since 2015, mostly so I could write my book Web Typography. Lots has happened in the world of web typography since then, not least the arrival of variable fonts, which I’m sure will make an appearance in some of the talks this year. Funnily enough, the new Ampersand website showcases some variable fonts in action, so go take a look…

Need to knows


Friday 29th June 2018, 10am - 5pm


Ampersand will be taking place at the beautiful and historic Duke of York’s Picturehouse in Brighton - it’s one of the UK’s oldest cinemas, and we’ll be rolling out the red carpet to celebrate all things Ampersand…

The Duke of York’s Picturehouse


“When will tickets go on sale?!” I hear you cry. Well, today we’ve released 10 Super Early Bird tickets, saving you £85 off the full ticket price, so the keen amongst you can snap up a bargain before we announce the full schedule.

Get the latest Ampersand news

If you don’t want to miss the latest conference announcements, sign up to our mailing list (at the bottom of the Ampersand homepage) to receive ticket and schedule updates direct to your inbox. For real-time updates and web typography news, follow @ampersandconf too.

Stay tuned and we hope to see you there!

Ampersand is a Clearleft event.

Analysing analytics Thu, 18 Jan 2018 19:35:00 +0000 Hell is other people’s JavaScript.

There’s nothing quite so crushing as building a beautifully performant website only to have it infested with a plague of third-party scripts that add to the weight of each page and reduce the responsiveness, making a mockery of your well-considered performance budget.

Trent has been writing about this:

My latest realization is that delivering a performant, accessible, responsive, scalable website isn’t enough: I also need to consider the impact of third-party scripts.

He’s started the process by itemising third-party scripts. Frustratingly though, there’s rarely one single culprit that you can point to—it’s the cumulative effect of “just one more beacon” and “just one more analytics script” and “just one more A/B testing tool” that adds up to a crappy experience that warms your user’s hands by ensuring your site is constantly draining their battery.

Actually, having just said that there’s rarely one single culprit, Adobe Tag Manager is often at the root of third-party problems. That and adverts. It’s like opening the door of your beautifully curated dream home, and inviting a pack of diarrhetic elephants in: “Please, crap wherever you like.”

But even the more well-behaved third-party scripts can get out of hand. Google Analytics is so ubiquitous that it’s hardly even considered in the list of potentially harmful third-party scripts. On the whole, it’s a fairly well-behaved citizen of your site’s population of third-party scripts (y’know, leaving aside the whole surveillance capitalism business model that allows you to use such a useful tool for free in exchange for Google tracking your site’s visitors across the web and selling the insights from that data to advertisers).

The initial analytics script that you—asynchronously—load into your page isn’t very big. But depending on how you’ve configured your Google Analytics account, that might just be the start of a longer chain of downloads and event handlers.

Ed recently gave a lunchtime presentation at Clearleft on using Google Analytics—he professes modesty but he really knows his stuff. He was making sure that everyone knew how to set up goals’n’stuff.

As I understand it, there are two main categories of goals: events and destinations (there are also durations and pages, but they feel similar to destinations). You use events to answer questions like “Did the user click on this button?” or “Did the user click on that search field?”. You use destinations to answer questions like “Did the user arrive at this page?” or “Did the user come from that page?”

You can add as many goals to your site’s analytics as you want. That’s an intoxicating offer. The problem is that there is potentially a cost for each goal you create. It’s an invisible cost. It’s paid by the user in the currency of JavaScript sent down the wire (I wish that the Google Analytics admin interface were more like the old interface for Google Fonts, where each extra file you added literally pushed a needle higher on a dial).

It strikes me that the event-based goals would necessarily require more JavaScript in order to listen out for those clicks and fire off that information. The destination-based goals should be able to get all the information needed from regular page navigations.

So I have a hypothesis. I think that destination-based goals are less harmful to performance than event-based goals. I might well be wrong about that, and if I am, please let me know.

With that hypothesis in mind, and until I learn otherwise, I’ve got two rules of thumb to offer when it comes to using Google Analytics:

  1. Try to keep the number of goals to a minimum.
  2. If you must create a goal, favour destinations over events.

This was originally posted on my own site.

There are two follow-up posts:

  1. Heisenberg, and
  2. Needs must.
Business as unusual: a resolution for reinvention Wed, 10 Jan 2018 12:47:00 +0000 Do any one of these warning signs currently describe your business?

  1. Sales are steady.
  2. There’s plenty of tickets in the backlog.
  3. Continuity is favoured over change.

Why spend time and money on innovation when you are established in your market? Surely, it’s up to the competition to raise their game to compete with you.

In many well-known and established organisations I’ve worked with I’ve been left with the sense from senior management that innovation is for start-ups, business as usual generates the revenue, and nobody ever got fired for sailing a steady course.

These thoughts, expressed in similar terms, were likely to have once echoed around the now empty boardrooms of large and established companies such as Woolworth’s, Kodak, Pan Am, Blockbuster, Borders, General Motors, Friends reunited, Polaroid, Comet, Sony Ericsson phones, Game, Zavvi etc.

The fact is, no business is too big to fail. However, all businesses can be too small-minded to think big.

The times they have, are and will be a changin’

Changes caused by digital technology have been more rapid and radical than anything else in the history of business. If you work in retail, banking, travel, the cultural sector, education, publishing, the third sector… in fact I can’t think of a single industry that hasn’t faced and isn’t facing fundamental changes brought about from digital technology or the ‘tech revolution’, if you prefer.

Successful organisations view these changes as opportunities. The next bankrupt business sees them as threats.

Where we once saw digital start-ups culpable in the demise of their traditional bricks and mortar competition, we are now seeing digital native companies being disrupted by newer, digital ones.

The only constant is change. It’s just the speed of change and the impact from it that have become more profound. Every business needs a managed programme of innovation to embrace and exploit change.

65% of children entering primary school today will ultimately end up working in completely new job types that aren’t on our radar yet

World Economic Forum

The stability and life-span of every major businesses is in rapid decline. Richard Foster highlights in his study for Yale School of Management and book ‘Creative Destruction’ that at the current churn rate, 75% of the companies on the S&P 500 index will be replaced by 2027. Many of them will be overtaken by their competitors. Many of them will not even exist.

Along the same lines, research from the Business School at Imperial College in London reports of the 100 companies in the FTSE 100 in 1984 only 24 were still in business in 2012.

Change is nothing new. It is just happening at an accelerated rate. If you think back a decade they are many of today’s well known, successful companies and products that didn’t exist. Uber, Instragram, Airbnb, Alexa, WhatsApp, Google Drive, Google Chrome, Tinder, Slack, Siri, Kickstarter, Pinterest are all less than 10 years old.

The pace of change, and therefore the need to adapt, adjust and innovate to compete, looks like it is just starting to get going.

The World Economic Forum predicts ‘65% of children entering primary school today will ultimately end up working in completely new job types that aren’t on our radar yet’ and the Bank of England’s chief economist said last year that 80m US and 15m UK jobs might be taken over by robots.

The seismic shift caused by digital

Much of the change is being brought about, and certainly hastened by digital technology.

The result of which are three fundamental and concurrent shifts in how businesses operate:

  • The customer is in control. They have more choice and less loyalty than ever before, and are armed with the ability through social media to have their complaints or compliments influence other customers.
  • The power is now in the product. Once the organisation controlling the channels for distribution (the printing press, the radio masts, the gas pipe, the travel agent etc.) held the best cards. The internet provides (nearly) free distribution to all. So the game shifts to give advantage to those who have content, services and products that best solve customers needs.
  • The cost and time to scale has plummeted. At the press of a button you can spin up a new server to meet demand or upgrade software with the new killer feature. This allows you to rapidly go from a trial for an idea to take-off on a global scale. It leads to new business ideas springing up like moles from both your existing competitors as well as entirely new players.

With these changes to the business landscape, standing still, even for a moment, is not a viable option. The question facing senior leaders and managers in every organisation is this: Does your organisation have in place an effective plan, as well as the people and resources to carry out continuous reinvention?

You need to generate ideas before you can iterate upon them

There are some standout examples of large established organisations, many recently seen as behemoths, using design thinking and innovation to reinvent themselves in the age of the digital consumer. These include:

The 125-year old GE which has changed itself into a company for industrial digital transformation.

British Gas with its growing range of Hive products is using product and service design to reimagine the home.

IBM has adopted design thinking to change its fortunes by helping its business users to better solve their customers needs at speed and scale. has revolutionised (and continues to do so) the way we interact and transact with government saving both the user and the state time and money.

There’s no better time than now to make change

Innovation doesn’t need to be time consuming to get going. At Clearleft we regularly help clients with a variety of rapid interventions to identify, accelerate, execute and evaluate digital change.

Here are some ideas to kickstart a resolution for change and to introduce an ongoing habit of digital reinvention.

Identify through research

Our research and UX teams frequently carry out structured research interviews with a client’s existing and potential customers to uncover new products and services to develop.

With the use of techniques such as Jobs to be Done interview questions and ‘day in the life’ mapping, we help identify unmet customer needs, pain points to fix, and opportunities to explore further.

Accelerate with design sprints

Last year we had the privilege of hosting Jake Knapp, author of ‘Sprint: How to Solve Big Problems and Test New Ideas’, in London at a Clearleft Presents event. It allowed our teams to build upon and hone their experience of facilitating short, intense and focussed design activities with clients and their teams.

We really enjoy the way design sprints, when run properly, take a team from a problem space, through ideas and iteration, and onto a tested solution in just five days. A design sprint is a proven way to unblock long-term issues and enables rapid headway to be made on business critical challenges.

A powerful by-product of working closely with a client and their team is the way it energises and trains all those involved in the use of design thinking skills.

Design thinking uncovers inventive ideas

Execute through prototyping

Being successful at innovation is about applied perseverance. The more bets you place, the more likely you are to find a winner.

When team resources are tapped into, there is often no shortage of ideas in an organisation. There is more often a lack of capacity to design, build, and evaluate solutions.

Don’t let a lack of people and resources stifle the ability to increase the number of design experiments you run. The use of an external agency is a cost-effective way to provide an injection of additional designers to create multiple solution for A/B and MVT testing, and developers to create prototypes to pilot new products and services.

Make 2018 a year for innovation

I’m not suggesting you abandon business as usual. However, without a complementary and supplementary stream of innovation and looking into the future there will soon come a time when your business as usual has been overtaken by a competitor.

Innovative companies see the process as ongoing. They focus on the needs of the customer and systematically identify opportunities, pilot ideas, iterate upon them and then take them to their customers before their competition.

Innovation isn’t hard. Innovation is a habit. So let’s make a resolution to turn 2018 into the year of business as unusual.

I’d relish the chance to hear your stories and advice on building a design-led practice of innovation, or to discuss further how design can be used to create greater value for your customers and your organisation. Drop me a line at

Join the conversation about design thinking and innovation on Twitter, by tweeting us @chrishow and @clearleft.

Why (and how) to get senior stakeholders involved in project framing Wed, 03 Jan 2018 10:09:00 +0000 In my last post I looked at the importance of lists and used an example of a project initiation checklist. Naturally, I wanted my next post to follow in logical and chronological order.

After project initiation comes  project setup, so I thought I’d get writing again and share a method of ‘project framing’ which we ran recently with a major UK travel provider. The method proved to be an extremely useful part of the project set up, time efficient, and massively helpful in reducing any ambiguity in those crucial early stages. 

Picture the scene

The contract has been signed, the initiation checklist checked, and you’re all gathered in a conference room with coffee and pastries, ready to kick things off. And the senior stakeholders promptly leave the room (if they had even entered it in the first place). In my experience that’s pretty standard. It makes sense, right? The decision making around embarking on the partnership has been made, so everyone can just crack on. Sound familiar? So far so good.

Ordinarily, when the original brief came in, there will have been a load of back and forth around “deliverables”. The same old questions come up time and time again: “What exactly am I going to get for my money?”; “When will I start seeing value?”. Rightly so, and justifiable from a client’s perspective.

A good agency won’t be in a position to answer these questions in detail immediately, so will begin with responses around time and materials and immersion weeks. (It’s worth noting that partners who suggest they have all the answers and a pocket full of silver bullets from the off are the least likely to deliver both fast and long lasting business value.)

In some cases, this (sometimes) perceived lack of clarity can often bamboozle the senior stakeholders until they get to the point where they greenlight the project and handover to an internal team to deliver, who might understand the approach better.

Ambiguity = Disaster

Then, stealthy as you like, disaster strikes! You’re a few weeks or months into the project and rumblings of confusion and ambiguity are felt in the room. And it turns out that those rumblings set in when they snuck their way through the door left open by the departing senior stakeholders straight after that initial green light. ‘Disaster’ might sound a bit dramatic, but make no mistake, when ambiguity sets in, it becomes a big threat to the value the project will deliver to the client, regardless of the skills and experience in the room.

Fast forward to when the senior stakeholders reappear at first playback, or perhaps even at the end of the project. By this point, a whole host of decisions have been made by the project team and the original goalposts have shifted so much that the senior stakeholders are left puzzled at the output.

For me, this is a failure and should be avoided at all costs. If those who hold the purse strings are not confident on the deliverables, what chance do you have on securing future work?

Clear the path to a successful project

There are a ton of blog posts out there telling you that ambiguity is one of the leading reasons for project failure. There are also a load more offering tips on how to avoid it, as well as a whole bunch of posts devoted to suggesting that using an Agile methodology can actually cause ambiguity. This last point is of little surprise, especially if you’re a small agency working with a large corporation with too many stakeholders, most of whom are used to working in a traditional Waterfall method.

Never fear, there is a solution. Address these ambiguities early,with the right people, and you will ensure that everyone is on the same page from the off.

In the introduction above I mentioned that we used a particular approach to project framing with a recent client, and to great effect. During our Kickoff we sought to try and nip the ambiguity possibility in the bud and involve the key stakeholders and project sponsors in discussions around the approach and logistics. Interweaving these discussions with the big picture questions allowed us to address the often overlooked minutiae that lead to senior decision makers being kept in the dark.

We sandwiched these discussions in between two parts of the project setup: setting the project goal and looking at the KPIs. The approach that worked for us involved splitting the conversation in to four key areas; I’ve listed them below with a brief summary of the questions to ask and what the outcome should be.

1. Approach

This is the most important one and it should be handled with care - we are not trying to force ways of working, rather coax an approach that works for everyone. This may at first be unfamiliar to the client, but with the right guidance, a shared understanding can be easily achieved. In this instance we were hoping to run the project using a scrum framework. As a team, start by answering the following questions:

  • What methodology will we adopt?
  • What regular meetings or ceremonies will there be?
  • What are the key milestones?
  • Where will we be working?

2. Team

The key here is to identify who’s going to actually do the work and who will be needed from the client on a more regular basis. This is the time to establish a product owner and ensure they understand their role in the project. Answer these questions:

  • Who will form the core project team?
  • What are their roles?
  • Who’s responsible for delivery?

3. Stakeholders

You need to all be clear on who you need to keep updated on progress outside of the meeting room. There are a bunch of RACI (Responsible, Accountable, Consulted, Informed) exercises that can help with this. This will help back up the conversations around the team and highlight the roles of the stakeholders and what you expect from them as the project progresses. Ask yourselves:

  • Who do we need to keep consulted and informed throughout the project?
  • Who’s doing the work and who’s accountable?

4. Communication channels and tools

What tools does the client currently use? Are there any IT restrictions we should be aware of? Having a senior mind in the room really helps with this, as they are typically au fait with the restrictions in place. Answer these questions:

  • How do we contact each other throughout the project?
  • Who’s on the circulation lists?
  • What file storage system will we use?

When we did this with said recent client, each area was either a discussion or a small exercise with the aim of everyone agreeing on and answering the questions. By the end of the session, not only had we agreed on the vision and goal of the project but we’d also framed the logistics and roles within the wider team.

Get creative (and practical)

Involving the wider stakeholders allowed us to get a little creative about our ways of working. For example, it was suggested that we keep a private blog to document the work in progress which can be shared across the business, giving everyone of all departments a flavour of what we’re up to. This is exactly the sort of thing that can normally be overlooked by a core project team who are mainly focused on achieving sprint goals or working through a backlog.

We were also able to fast-track some of the, often time consuming tasks, such as finding desk space and ensuring we had building passes. These little (annoying) things often need senior stakeholder sign off which, once a project is underway, can take a while.

Yes, there is an argument that the small details should be kept between the core project team, because senior stakeholders don’t have the time to go in to the nitty gritty, but I say “NO!”

The nitty gritty is what helps clear the path for the big picture and nip any ambiguity in the bud before it takes hold.

Too often we shy away from inviting senior stakeholders to these kinds of meetings out of fear that they are too busy or it’ll be a waste of their time. Yes, they are often too busy, but no, it’s never a waste of time.

The key to getting this right is to keep it collaborative. Remember, from an agency perspective, you’re not forcing your ways of working on the client, you’re guiding them and easing them in to an agile way of thinking. By suggesting approaches and tools that help enforce these ideals, and compromising on areas that they are rigid about, you’re strengthening that partnership, which will help achieve better outcomes.

Senior stakeholders are the people that commission the project, so why keep them in the dark?

We’re keen to hear your thoughts, ideas and tips around project management - tweet us @clearleft- we’d love to hear from you!

Hot topics for Design Leaders in 2018 Fri, 15 Dec 2017 17:26:00 +0000 It’s that time of year (again). The festive season is upon us. The call of mince pies, rubbish TV, and awkward family gatherings grows louder.

But right now, the call of the holiday season isn’t as loud as the voice in my head that’s leapfrogging into 2018, curious about the world, and curious about the role design will play in all of our lives this coming year.

There are tonnes of important issues in design right now, covering the detailed nuances of hands-on delivery through to the sometimes abstract heights of strategy and leadership. If you’re a design or digital leader, these three focus areas (by the reckoning of the Clearleft team) will be amongst your chief concerns in 2018.

The rising importance of Artificial Intelligence and Machine Learning

Artificial Intelligence (A.I.) isn’t exactly the new kid on the block as far as hot topics go. There’s been an increasing amount of noise about it in 2017, and that noise will surely infiltrate our collective consciousness even more next year.

A.I. will be of particular importance to design and digital leaders who want to explore the bleeding edge of innovation and the effect that automation can have on productivity, cost and customer experience.

But this is about more than the seduction of new technology.

It might be history's greatest opportunity or its worst existential threat — or maybe it will only optimise what we’ve already got.

Andy Budd

Of course there are risks involved, because the technology is still so relatively early in its development. We’ve seen design leaders get sold on clever off-the-shelf machine learning tools that fail to deliver the improvements they promise, so it’s important not to see A.I. as simply a technology purchase, but as service innovation that helps empower your business.

Either way, the emergence of A.I. in the mainstream will move apace.

We explored the heady possibilities of a world of A.I. at our A.I. Retreat back in Norway earlier this year - take a look at the Juvet Agenda to discover a set of design principles you might like to use to inform your A.I. decision-making.

The rise of Design Ops

Design Ops, the infrastructure of teams, tools, governance and processes behind the design, still a relatively lesser-heard term in the field these days. But rest assured it will gain prominence and gather momentum in 2018 as more design leaders discover the business potential it has, and the value it adds to design projects.

Put simply, Design Ops empowers design leaders and teams to deliver better quality design, faster. Pretty pertinent in a world where the work is becoming more complex and more specialised, whilst companies are wanting to deliver faster and faster.

If you want to ensure that product improvements continue to be delivered, especially in the context of increasing demands on speed and quality, the only way to do it is to have good tools, processes and governance practices in place.

Rich Rutter

design system is the most visible representation of Design Ops—a toolkit that allows designers to work quickly and efficiently without compromising quality or consistency. But creating and maintaining a good design system takes up-front investment, and it can’t be delivered from the top down—the designers need to be invested in building the system.

The spotlight on user rights

2018 will be the year that GDPR comes into force.

I look at GDPR as like a ‘bill of rights’ for users, where the power balance between businesses and real people will see a tangible shift.

Jeremy Keith

That shift will be in the interests of the user, protecting all EU citizens from privacy and data breaches in an increasingly data-driven world.

People will have greater actionable control over their personal data. So of course this is an important issue for design leaders to tackle in the pursuit of human-centred design solutions.

For companies, the opportunity lies in nurturing trust with their customers, and enhancing company reputation in turn. I would argue that this is incredibly valuable. But beyond that there are no other great measures of success. Measures of failure, however, are tangible and of a reputational and financial nature.

The through thread

It struck me that there’s a central theme that runs through the heart of the focus areas above. Something bigger (and less tangible) is drawing these things together.

A.I. empowers business.

Design Ops empowers those who are using design thinking practices in their work.

GDPR empowers users.

These three hot topics, or ‘trends’ if you prefer, empower three different groups (albeit there’s plenty of crossover amongst them). In my opinion, true empowerment in these contexts requires a foundation of transparency and trust – ethical practice – surely the prominent  thread in these trends in the year to come.

So what can we all do, as individuals, teams, business and sectors, to engender that transparency and trust as we seek to tackle these issues and design challenges in our work and lives?

Acknowledge it and open up the conversation. That’s a positive step in the right direction, and a positive action in its own right.

One of our Leading Design 2017 speakers, Alberta Soranzo, tweeted about taking action on engendering trust recently, which seems pertinent to reference here too. If nothing else, it’s an action-based reminder for a basis on which to act and work with our peers on design challenges in the future. I was intrigued, too, to read about GDS’s recent data science ethical framework developments.

It will be interesting to see how these often elusive, intangible, and vital issues play a part and affect how we do things in design next year.

Let us know what design challenges you’ll be focusing on in 2018 - tweet us @clearleft - we’d love to hear from you!

Coming back to work Wed, 13 Dec 2017 11:24:00 +0000 Here on the Clearleft blog we share a lot about our experiences related to our client work, events, and different areas of expertise as practitioners. I want to take a moment to shift the focus and talk about culture, which affects everything.

My first couple of months back at work have come to an end and I’ve been reflecting on the transition from being a full-time mum of three to heading back into the world of work. (Well, paid work, three kids ain’t easy!)

Seeing as this is my first post, here’s a little back knowledge for you: I have a 6-year-old son, Oliver, and 11-month twins Albyn and Oren (as well as a 13-year-old step-son Sebastian, but he’s mostly self-sufficient these days).

This was my second time away from work on maternity leave, and so different to my experience first time round! Returning to work is so often a negative experience for both new mums and the employer. In my opinion, with very simple changes, it really needn’t be.

I recently read Jess Jebari’s post ‘Working Forward’ - all about removing barriers from the workplace and how Clearleft is proud to support working mums. I could not agree with this more - they have been with me every step of the way in making my return as smooth as possible.

Us mums, on the most part, go back to work because we want to, and would like to be able to come back confident that we still have career prospects. So often there is the feeling of becoming a burden, now that our time and attention is split between our two roles. The first few weeks leaving your baby are so scary, so it needs to be a comfortable transition or it won’t work.

Last time round

Looking back at my last time off on maternity leave six years ago, I was in a different career as a secondary school teacher. I returned to work when Oliver was only 5 months old. I felt pressured to go back as soon as possible for a combination of reasons: the feeling that I had increased the pressure and workload for my colleagues; my perceived disruption to the students; as well feeling the financial pressures of being a young mum of 25. I remember the feeling of complete and utter dread, right in the pit of my stomach, at the thought of going back and leaving my baby in a nursery so young.

Time off in term time was frowned upon, I relied on my mum and husband a lot, which wracked me with ‘mummy guilt’. I felt like I was letting my family down and letting my employer down, I couldn’t give enough of myself to either one.

Being in a job that is about educating children, you would expect there to be support for families. Yet I felt like I wasn’t allowed to be a mum. This was my experience of teaching. But teaching is not in the minority. I know many people in other industries that have felt the same on their return.

Eventually, the pressure to share myself between the two fairly, without one of them suffering, led to me leaving the profession altogether.

This time round

Let’s skip forward five years. I went into labour six weeks early and I hadn’t even started my maternity leave, but no one flinched. The team here wished me well and gave me oodles of support and some very nice choccies! I had been working for Clearleft for almost three years when I went on maternity leave and they gave me a great maternity package which allowed me to enjoy my time off with the twins.

I loved my time off, but felt excited to come back this time round - a completely different feeling from last time. I wasn’t worrying about teething issues with settling back in, and I knew that the team would understand. At Clearleft you get treated like an adult and the setup is flexible: no strict, set working hours, and when I am sick I’m not going to be penalised (you are actually encouraged to stay off and get well so you can work to your full potential, and not spread your germs to the rest of the office!). If I have childcare issues I know I can work around it, as long as you work hard and get the job done, the rest can be flexible. So in returning to work, I felt completely supported both in my job AND as a mum; what an amazing feeling!

Before my return, I had a few meetings, all positive and focusing on what Clearleft could do for me, what hours worked for me and how we could go about progressing my career.

I am on a fair few ‘mummy blogs’ and so many posts come up about how people go back to work to roles completely different to what they were doing before, with no prospects. Many mums have experience of being bullied in the workplace and made to think that they cannot have children and a career.

I am now into my second month back and there have been a few bumps along the way, but Clearleft has been nothing but supportive. As an employee this makes me feel valued and confident, which in turn gives me huge motivation and drive.

Three things that make a difference

Earlier in this post I spoke about the power of small changes in a situation like mine, and what a difference they can make.

In my experience, there are common feelings that crop up when you become a working parent and journey back to work - and these challenges, if left unchecked, can become seriously corrosive to the individual and to the company. Feelings like resentment if you’re returning before you’re fully ready, confusion (in communication and managing expectations and isolation), and feeling like you are failing, alone and not able to talk about it.

These are my top three changes to try and tackle these feelings:

  1. Manage expectations. Make sure that expectations from both sides are communicated, with the team and with clients. This way no one will be ‘let down’. This conversation should be ongoing. I always felt that I could get in touch and ask questions and update on my return to work situation.
  1. Support. I was supported in my right to take as much time off as I needed with my babies, no one made me feel that this was a burden and when I came back I was welcomed back into good position at work that suited me and the company. I feel valued so will work hard. Showing support and understanding in the transition back to work and allowing some ‘wiggle room’ in those early days is so important.
  1. A slightly bigger one - maternity package. I know for many companies this may be not possible, but in giving me a good maternity package Clearleft enabled me to enjoy my time off and be truly ready to come back, rather than be forced back before I was ready.

So in summary, not making me feel guilty about taking time out whilst having children and welcoming me back as an equal has empowered me to work harder. Surely that’s a win-win?

One last thing, if you’re interested in looking further into the life of a busy working mother this book by Tiffany Dufu is on my (ever increasing) reading list.

What design teams are missing by doing everything in-house Fri, 01 Dec 2017 08:56:00 +0000 Over the past few years, we’ve seen more and more companies building internal design capabilities. This finally feels like the recognition our sector deserves; moving from an outsourceable commodity, to a core business competency.

But in the rush to prove their value, some companies are starting to suffer as a result…

In-house design presents a new set of problems.

I think it’s safe to say that the majority of companies still have more design work than they have designers. There’s a global shortage of designers at the moment, which makes it difficult to hire and retain the best talent. I regularly have conversations with design leaders who bemoan the challenges of growing, nurturing and retaining a team. It often takes six months to recruit a new designer and get them up to speed. With the average designer moving roles every 18 months, that leaves a very short window of productivity.

As a result, there will always be a market for pre-built design teams, made up of experienced designers who are able to deliver high quality work quickly. These sorts of teams are perfect when a company is facing a resource or time crunch, and needs to throw a project over the fence quickly.

I think this is how most organisations view design agencies, and it’s a sensible way of engaging. But I think internal design teams may be missing a trick here.

An agency can supercharge your in-house team.

In our experience, internal teams fall into a natural cadence of internal meetings, workshops, 1-on-1s and status updates. They also find themselves settling on tools, processes and procedures that maximise consistency and interoperability.

This all makes perfect sense. However, what starts as a logical and practical process of rationalisation, quickly becomes “the way we do things here”, and if you’re not careful, your team starts to atrophy.

Over the past six years, the bulk of our work has shifted from delivering standalone projects to augmenting internal teams. Sometimes this is just a capacity issue, but more often than not we’re being asked by design leaders to help them stretch the teams we’re embedded with and create an engine for internal innovation.

An agency can bring new tools, new processes and new ways of thinking.

In-house teams often get stuck in a particular cadence, and can feel trapped on the treadmill of Business As Usual. Injecting some external energy can do wonders for team moral, and their ability to deliver. So we usually leave teams with a renewed vigour and pace.

This is especially true for senior team members, who can quickly hit your internal glass ceiling. It’s hard to grow if you’re the most experienced professional in the room, so having an experienced external practitioner to bounce ideas off can be great for individual growth. By bringing somebody onto the team as a player-coach, it’s possible to provide new skills, speed up delivery and develop your key players all at the same time.

An agency can bring new perspectives and extensive operational experience.

Another benefit of partnering with an external agency is the sheer number of design teams they’ve worked over the years. So while a typical internal team member may have only worked with two or three other companies before, an external agency will have worked with dozens. That’s why external partners are in a great position to help recommend operational improvements.

Sometimes this is as simple as suggesting the creation of a new design language or pattern library. At other times it may be helping to improve internal workflow or governance strategy. Either way, having an external perspective–from somebody who has done the thing you’re struggling with a dozen times before– can be a boon to both newly minted and experienced design leaders alike.

An agency can help promote the value and impact of design around the organisation.

If design leaders are lucky, they’ll have a couple of senior practitioners they can work alongside on strategic initiatives. But more often than not their team are so focussed on product delivery that there is little time to strategise. We regularly find ourselves supporting design leaders with more strategic initiatives; everything from developing business cases and prototyping new product ideas, to creating a digital service manual and organisational vision.

These are the sort of things that internal teams often have going on the the background, but rarely find the time to execute. With a good agency partner delivering a whole program of improvements, these tasks become significantly easier.

This external support is especially helpful for design leaders looking to demonstrate the value of design to their board. In fact more of our coaching work is focussed on helping leaders manage up and out, than down. One of the reasons agencies like Clearleft are so effective at this is the fact that they’ve been selling the value of design to boards their entire life. So they’re well placed to work alongside internal design leaders to grow their influence and the impact design can have.

You don’t have to go it alone.

There are dozens of other ways a strategic design consultancy can help support internal teams, beyond simply outsourcing delivery. So when you’re considering partnering with an agency, don’t just think of them as a means of delivering a specific project, but as a team of individuals who have spent the past 12 years understanding, optimising and operationalising design-led teams.

I’d love to hear about your challenges and experiences of establishing design at the heart of your company–get in touch via Twitter or email to continue the conversation.

Travelling light Mon, 20 Nov 2017 11:50:00 +0000 Whenever I head off into the Great Outdoors I do like to be prepared, which is really just the Scouts way of saying ‘planning for the worst’.

Fortunately, ‘the worst’ for a few days away (certainly here in the UK) usually just means inclement weather with a fair certainty of rain, so with this in mind all of my ‘valuable’ (read not-exactly-waterproof items such as smartphone, car keys and wallet) go into a small dry bag which is duly stuffed into my rucksack.

The Light Phone

Unfortunately, the expensive brushed aluminium member of this group just doesn’t play well with being tossed around in the bottom of a pack and is certainly something I wouldn’t want to accidentally leave up a fell or behind a handy lunch-stop boulder. And one does have to question exactly what purpose my iWonder serves in the hills with guaranteed zero wifi, patchy mobile reception (at best) and no power source. Fancy camera and last-ditch emergency line?

One of main reasons I get away is to do exactly that – get away. Strip away all the trappings of modern life and escape to hills (or even just for a walk in the woods with our children) – perfect. Having an ‘emergency’ phone is often a good idea, but an expensive yet redundant-under-the-circumstances-computer-in-my-pocket, maybe not so. Do we really need all this functionality available all of the time? Will I be checking my email in the woods? Perhaps the question is really ‘should I be checking my email in the woods?’. Stepping back from our connected lives and providing ourselves the opportunity to disconnect is certainly a topic de jour, but maybe we need a little help in only being able to access the ‘right’ services at the ‘right’ time, guiding us to place our time and attention on the things that matter, when they matter?

As I sit and write this nursing a drink in the pub, glancing around the numerous groups of friends deep in conversations with their smartphones, it makes me wonder just how many situations could benefit from a reduction in tech availability – as much as I love technology, the changes in our social behaviours, skills and interactions have definitely suffered as a result of its prevalence.

It seems sadly ironic that we might ‘need’ technological solutions to encourage us to use technology less, but if we do need help getting offline, then a great place to start could be The Light Phone – a replacement phone that uses your existing phone number and allows you to leave your smartphone at home. The Light Phone only makes and receives calls and is ‘designed to be used as little as possible’, something which helps to reinforce the idea of switching off and getting away from it all. The entire design is produced to this end – light in physical form, but also a sleek piece of minimal engineering, ideally suited to the phone’s limited functionality. The result is not only aesthetically pleasing, but one that appears to seamlessly combine form, function and great intention all in one palm-sized package. Beautiful.

I was recently reminded of The Light Phone (and similar ‘less-tech’ projects such as the re-release of the iconic Nokia 3310) when packing my dry bag for a few days away, and it turns out that the original Kickstarter project from 2015 has been fully funded and orders are currently being fulfilled. So, if you’re in need of a connection break, more focussed pub conversation or a low(er)-cost-out-in-the-hills emergency option (although $150 does seems a touch steep) maybe The Light Phone is the thing for you.

However, this all said, you could always throw caution to the wind, leave your smartphone at home and follow in the words of the late, great J.J. Cale – “…travelling light – it’s the only way to be.”

This was originally posted on my own site.

A dive into serving brotli compressed assets Thu, 16 Nov 2017 17:02:00 +0000 Addy Osmani’s talk about performance at the last FFConf had a small segment on serving brotli compressed assets, as opposed to gzip.

The claims are that brotli produces smaller filesizes than gzip, so if you want to squeeze some extra performance out of your site, then just switch over and reap those rewards! The talk, however, was light on the implementation details. Well, I decided to take a look to see how easy the switch would be.

First, the TLDR. Skip ahead for the full details.

The compressed version

There is currently no simple switch for brotli compression. Brotli is only useful for text-based files and it requires HTTPS. WOFF2 fonts are already compressed using brotli as part of the file format. You need to use high compression settings to get any real benefit, which is slow, so you need to pre-compress assets as part of your build step.

Ultimately use a CDN like Cloudflare because, firstly, you get all the benefits of a CDN and, secondly, they automatically use brotli where applicable. I’m currently only aware of Cloudflare supporting brotli. YMMV.

The uncompressed version

Still here? You must be serious about compression (or you can’t use a CDN). Well then, let’s dig in!

Brotli is a relatively new compression algorithm developed by Google and released into open source back in September 2015.

Whisperings around the internet had lead various people to believe that while Brotli could result in compression improvements of 20-25% or more, it was also a lot slower. As usual, this doesn’t tell the whole story. Both gzip and brotli can compress at various levels, much like jpeg quality settings. gzip goes from 1-9 and brotli goes from 1-11 (yes it goes up to eleven). When you compress a file with gzip, it defaults to around 4, providing a good balance of compression and speed. Brotli, however, defaults to 11; the highest compression but much slower.

If you were to compare resulting filesizes you would only need brotli level 4 to achieve the same compression as gzip level 6, and the speed should be comparable (I’ll run some benchmarks in the near future to get a better idea). The main difference is that gzip’s higher compression levels take longer to compress but only produce minor improvements, whereas brotli scales better as you increase its level. So, going above gzip level 6 is simply inefficient, but pushing brotli to level 11 is more worthwhile.

A default server setup will compress assets on-the-fly. At gzip level 4, you will a good speed/compression balance and the performance hit to the server is negligable (unless you run a high-traffic site). Switching to brotli level 6 or 7 would net you minor gains at no real detriment. To get the real gains, though, you need to go up to eleven. And that means pre-compressing. More on that below.

As mentioned earlier, brotli is used to compress fonts in the WOFF2 file format. Browser support for other types of file compressed with brotli is actually pretty good these days. All the latest browsers on the latest OSes have support.

Server support is, however, weak. Depending on your server setup, you may not be able to use brotli at all yet. Some web hosts might be experimenting with brotli and may have it on by default. If you use a managed server then contacting their support is your next step. Otherwise, you’ll be needing a self-managed hosting provider like Digital Ocean, Linode, etc…

Adding Brotli support

It appears that Apache does have an official brotli module now (, but only if you’re using one of the more recent releases (2.4.26+) which may not be available for your OS yet. Nginx still does not have brotli support built in. So that’s hurdle number one. Here, at Clearleft Towers, we use nginx with PHP being proxied to Apache. As nginx does all our heavy lifting I’ll be focusing there.

So, how do we get nginx to support brotli? If you compile your nginx from source then you can add the module during build. Full details here:

We try not to compile packages if possible. It just adds extra headaches and we’re not sysadmins. Luckily, there is a way to get a pre-built module which can be dynamically loaded into nginx on our Ubuntu server (and most other linux OSes), which is to use a ppa; archives of unofficial pre-built packages which provide newer or custom builds beyond what the OS would recommend for the majority of users.

We can add this ppa with

sudo apt-add-repository -y ppa:hda-me/nginx-stable
sudo apt-get update

then install all brotli related packages with

sudo apt-get install brotli nginx nginx-module-brotli

the ppa will also take over your normal nginx package, so if you don’t install nginx here, then the next time you update your packages it will update nginx anyway.

Then, to activate brotli, load up your nginx.conf file and set the brotli modules to load in dynamically near the top of the file:

### ngx_brotli filter module - used to compress responses on-the-fly.
load_module modules/;
### ngx_brotli static module - used to serve pre-compressed files.
load_module modules/;

Then underneath your gzip configuration in the http context, add the configuration:

# Brotli
brotli              on;
brotli_comp_level   6;
brotli_min_length   256;
# text/html is always compressed

then restart nginx.

In the settings above, we set the compression level to 6, make sure we don’t compress files smaller than 256b (where the resulting file would be bigger) and limit the file types to those we can actually compress. Some guides on the internet tell you to use brotli_types *. Don’t do this.

Provided you’re serving your content over HTTPS, you’ll now be serving brotli compressed files! …mostly.

Actually, if you’re like us and proxy to Apache then the resulting HTML from PHP will be compressed by Apache first which means that nginx won’t attempt to recompress it. It will be served as gzip as usual. The easiest fix for this is to disable Apache’s compression module, deflate:

a2dismod deflate

Now nginx will compress the HTML too.


To get the real benefit of brotli, we need to compress the assets ahead of time so that we can use the highest level of compression and then configure the server to look for these files.

The easiest way to generate the precompressed files is by rolling it into your front-end build. Using gulp as an example, first install the gulp-brotli package

npm install gulp-brotli

then load it in and configure a gulp task

const brotli = require('gulp-brotli');

gulp.task('brotli', () => {

    let src  = "public/assets/**/*.{html,js,css,svg}";
    let dest = "public/assets";

    return gulp.src(src)
            extension: "br",
            quality: 11

Run it with gulp brotli or add it to your task set (after all other tasks since you want to compress the post-processed css and js). The above code will check for all file of those types and then save the compressed versions back into the folder where it finds a file to compress.

Now you can turn on brotli static in your nginx.conf file by placing

brotli_static on;

underneath the other brotli configuration. By default it will look for files with a .br extension e.g. I don’t think you can change that behaviour.

I haven’t researched a way to pre-compress the html coming from Apache yet, so for now that will remain compressed on the fly.

I hope this has been informative and happy brotling… brotli-ing… brottling… compressing!

Originally published on my own site

12 Weeks at Clearleft Wed, 15 Nov 2017 13:34:00 +0000 I have to admit, I was a little nervous as I rang the doorbell of Clearleft on day one of my 12 week placement.

Such a smart and successful bunch of UX and digital design veterans had agreed to share their wisdom with l’il ole me, a mature student in the final phase of an MSc in UX design. My main priority was to get through the day without embarrassing myself or giving them cause to regret inviting me to join their ranks. 

The plan for my next three months was to complete my major degree project, which involved creating and testing a design prototype, on a topic that would provide value to the Clearleft team. James Bates and I had batted a few ideas around but nothing was concrete yet.


I spent some time in my first few weeks having one-to-ones with any member of the team that could spare 20 minutes, which was a great way to break the ice and understand how all the elements of the agency machine work together. I was impressed by how multi-skilled every team member is, with expertise reaching well beyond the scope their job titles might suggest. This ‘T-shaped’ approach is something that is at the heart of how Clearleft operates and has no doubt played a part in developing the high level of mutual respect and camaraderie that exists within the team.

One piece of sage advice I got in the first week - I forget whether from Jeremy or Richard (or both) - was “You might not be invited but you’ll always be welcome”. It became clear early on that there wouldn’t be any hand-holding at Clearleft, so if I wanted to get the most value out of this experience, I needed to find my own ways to get included. I started scanning through the meeting room calendars to see what projects or workshops were coming up that I could observe or participate in. This was a great way to get involved in projects that I wouldn’t have otherwise had the opportunity to work on - a useful learning hack for any juniors in a similar position.


I was fortunate to get the chance to participate in several design sprints, one with the BBC and two with Virgin Holidays (although one of the Virgin projects was actually three weeks long, so it’s arguable whether the term ‘design sprint’ strictly applies there). This gave me the opportunity to get fully immersed in these projects and observe how the team approach collaborative client sprints. I found it interesting to see which UX methods they chose to help us reach our project goals and I learnt a few useful new techniques along the way.


After discussion with James Box and the UX team, I decided to focus my project on devising a toolkit to enable the sharing of materials on UX techniques. Initially my focus would be to develop an internal system for the team to use but with a longer term goal of opening it up to the wider UX community. This was a great opportunity to delve deeper into a wide range of techniques and learn how expert practitioners choose which ones to apply. Getting input from the Clearleft team was hugely valuable throughout the project and the advice I received really helped me to grow as a UX designer. I’m planning to build the toolkit over the next few months so hopefully it will be coming to a screen near you in 2018.

I learnt a huge amount in my time at Clearleft, observing practitioners at the top of their game, working with some fantastic clients and developing my own skillset as a result.

Here are a few more of my takeaways:

“It depends” can and will be used to answer almost any UX question.

I had realised that there are many shades of grey in the world of UX, but I gained a deeper appreciation of just how comfortable with uncertainty UXers need to be. “It depends” is actually the only responsible answer to many questions, as nobody can ever truly predict how users will behave.

Grey highlighters can improve literally any sketch.

My drawing skills are yet to be successfully fine tuned (I flunked my art GCSE), but in the meantime I have grey highlighters on my side. I don’t leave home without them.

Design sprints are exhausting.

Especially when they’re three-week long (sort-of) sprints. Focusing all your efforts on collaborating with your teammates is a tiring business, so if you’re not feeling drained by the end of the day you’re probably not doing it right.

Everybody works totally differently and that’s ok.

Each practitioner uses different tools, techniques, thought processes and styles, but they often achieve the same goals. I realised that as I develop as a UXer, I need to find my own path that resonates best for me, rather than trying to copy anyone else’s.

My time at Clearleft made a huge impression on me and I’m so grateful to have had that opportunity. I now have a clearer sense of how I want to develop my skills as a UX practitioner and I’m excited about the journey ahead.

Find Kate on Twitter @katerickard_x

Leading Design 2017: A Volunteer’s View Thu, 09 Nov 2017 11:56:00 +0000 This is an edited version of a post written by Kate Rickard, who recently did a three-month work placement at Clearleft whilst completing her MSc in UX Design. Kate also helped out as a volunteer at Leading Design 2017…

Leading Design 2017 was my first experience of a Clearleft conference and I had high expectations. As a team with such a sharp focus on quality, I knew the Clearlefties would hold the bar high for themselves to deliver a world-class event, but I didn’t realise just how high.

The speaker line-up for the two days of talks was stellar - even pulling in the legendary Tim O’Reilly - but what I found really encouraging was how many inspirational women were on the bill.

Janice Fraser gave a fascinating talk on women in leadership, which was the stand-out session for me. I spent much of it with my mouth gaping open in horror at how much harder it still is for women to succeed in senior roles.

Janice Fraser Leading Design 2017
Janice Fraser. Image by Luca Sage.

Another favourite speaker for me was Dan Willis, whose high energy and sharp wit made for an entertaining and enlightening talk. I particularly like this photo of one of his opening slides, giving his observations about the audience. 

Dan Willis. Image by Luca Sage.

Kim Lenox of LinkedIn also gave a ‘ruthlessly optimistic’ presentation, which clearly came straight from the heart. This was a surprisingly common theme, with many presenters baring their souls when sharing their experiences. The message that a balance of logic and empathy is the recipe for successful leadership came through strongly as a theme. This feels like sound advice, which can be applied by people at any level of seniority within any field.

Another valuable part of the Leading Design event was the networking opportunities. Both drinks parties were rammed with attendees for several hours (a rarity in this type of event in my experience) with many high-profile speakers choosing to mingle with the audience at length. Some of the advice I received and conversations I had were truly insightful and will no doubt prove invaluable in my career development. It was a privilege to spend time with such a smart, genuine and open bunch of people.

Busy times at the day one drinks party. Image by Luca Sage.

The final day of the conference was split into morning and afternoon workshops, with two to choose from in each slot. Julia Whitney talked about the science of influencing, providing evidence that inspiration is the number one method to encourage commitment from others*. The carrot, rather than the stick, clearly works much better in this regard. The afternoon workshop was run by Alberta Soranza and Martina Schell, who talked about how to measure the skill set of the team, structure roles effectively and recruit the right people. They showed this cheeky graphic to demonstrate how there may be less obvious aspects of work relationships that can impact on the team dynamic.


The experience of volunteering at a conference like Leading Design is many things: surprising, fun, educational, motivating, exhausting, rewarding, stressful, waistline-expanding, humbling and inspiring. I got the opportunity to spend time with some fascinating attendees, inspiring speakers and fabulous volunteers. I learnt game-changing leadership techniques that will no doubt serve me well in the future, and I was able to reflect and understand situations from my past much more clearly. I know I wasn’t the only one, as more than one attendee described the event as ‘transformative’ to their working life. If that isn’t high praise then I don’t know what is.

Roll on Leading Design 2018!

Read the full edit of this post, which was originally posted here. Follow Kate on Twitter @katerickard_x


The Life Saving Effects of List Making Tue, 07 Nov 2017 10:03:00 +0000 I’m just over a month in as a Clearleftie and it’s high time I got my first blog post out. Having pondered a few potential subjects for my first post, listing the merits of talking about different ways to run agile ceremonies, or exploring some role mapping exercises, I landed on (ahem) list making.

Welcome to Clearleft and the importance of a bloody good list.

There are several stages to writing a list. First there is the gentle thrill of anticipation as I contemplate the pristine paper in front of me. I may not yet have a subject for my list, but just the thought of one gives me a sense of purpose.

Extract from Jane O'Brien's BBC article: The art of list-making

As a project manager, setting up projects are my bread and butter, although everyone (and every place of work) does things differently. Having worked at a few agencies, I’ve noticed a pattern of the same boxes needing to be ticked before you can kick off a project. But what about those subtle nuances, the ones embedded in an agency’s specific process and culture? The little things that long serving veterans of the company have, over time, come to expect and take for granted. Missing one of these important preliminary actions from your setup can have a detrimental effect on the project team’s shared understanding and the overall success of the project.

List making is a dying art, but when you are starting out at a new agency, learning and adapting to it’s existing processes (and maybe adding a few of your own), it’s not only a box ticker, it’s a life saver!

Use a list to traverse the subtle nuances of agency process

Let’s start with the items we all know need to be complete before a project can be confirmed for kick off in almost any agency:

  • A Signed SOW from the client
  • A PO
  • Client’s account details
  • Booking the resource needed
  • KO date
  • Project tracking tool setup

Now, let’s look at the items we all know we need to complete before a project can be confirmed for kick off but the process behind them vary from agency to agency:

  • A Signed SOW from the client
  • A PO
  • Client’s account details
  • Booking the resource needed
  • KO date
  • Project tracking tool setup

No difference, right? Most agencies follow the same project setup checkpoints but the systems in place to perform those actions can vary wildly. Some agency’s require a 50% deposit on signature of the SOW, some agencies don’t, some request the full project amount be paid up front. What about tracking time and scheduling resource? Generally speaking, an agency and its finance, leadership and practitioner teams will have a preferred tool of choice along with a license to use it. And you can be sure that it’ll be deeply embedded in their reporting and finance set up, so any misuse can be disastrous. Then there’s the project management tools, Jira, Trello, Asana, Basecamp… The possibilities here are endless and worth a blog post in and of itself around the pros and cons. So, what better way to ensure these subtleties are captured then a project initiation checklist?

Use a list to avoid the pitfalls of a handover and fill in the gaps

Luckily for me, Clare and the the team at Clearleft were prepped and ready for a new starter and had created and honed a project initiation checklist that captured all of the subtleties in an easily digestible format. What’s the task, what’s it’s purpose and who’s responsible for it.

As any agency scales up, documenting these processes becomes necessary and as new people join, new lists form. We’ve mentioned the steps to initiate a project but what about closing a project or something more abstract, such as listing ideas for running agile ceremonies? As these lists are formed, a shared understanding of agency processes is developed and small but essential actions in a process, such as Has a team slack channel been setup, are given equal weighting and not left sidelined.

Use a list to keep bother to a minimum

It’s an age old line for new starters - “There is no such thing as a stupid question”. Yes this is true, but let’s try and provide an answer for it before it needs to be asked. Using the project initiation checklist as a to-do allowed me to confidently set up my project, without the need to hassle anyone on the minor details and safe in the knowledge that I was ticking all the right boxes along the way.

Final thoughts and a few handy tips...

It’s important to note at this point that lists such as these are not bibles. Lists in their essence can be added to, amended and further refined as processes become obsolete or more efficient methods become apparent. Allow for collaboration. Having these lists in a tool like google docs can help instil this idea or running a workshop and getting these ideas on post-it’s first can be a great starting point for mapping actions.

Keep your lists clear and to the point. The nature of a list is to address the key actions in a given process. Try not to over embellish the small stuff.

For the ultimate guide to list making, check out the Checklist Manifesto by Atul Gawande. Samuel Thomas Davis, in his blog summarises it nicely in three sentences:

  1. Checklists protect us against failure.
  2. Checklists establish a higher standard of baseline performance.
  3. In the end, a checklist is only an aid. If it doesn’t aid, it’s not right.

Fortunately for me, Clearleft have a culture of collaboration, autonomy and knowledge sharing, perfect conditions for an agile PM to flex his list making muscles and start putting some of his own experiences down on paper!

In case you’re interested… Jane O’Brien’s BBC Article: The Art of List Making

Components, Assemble! Mon, 06 Nov 2017 15:41:00 +0000 When we write HTML, we try to ensure that each fragment serves a specific purpose. Despite this, sometimes those fragments can end up being quite complex. They can have many levels of nested children. They might have a variety of content and states that interact in ways that are hard to predict.

Imagine, if you will, a typical navigation menu on a typical website, with submenus when we hover over a link. We might at first try to build it as a single isolated component. If we use a pattern library, this is easy to do. But how we choose to structure our component within the pattern library has a big impact on how easy it will be to test and update it.

A navigation menu in Enabled, Current Item, Selected Item, and Js-Disabled states. We can simplify testing by assembling it from smaller components, and creating separate variants for each state.

Building it as single component has the advantage of being quick - as long as you know the exact content. But if you’re using a CMS, your menu can contain an arbitrary number of links. The length of a given line of text can vary across a huge range. And of course, the component relies on Javascript for some of its states. Your component might work well for the initial set of content you’ve defined but in many other instances it will most likely misbehave. Testing each combination of state and content is a manual process, prone to error. We must add and remove links; hover over each item in turn; disable and re-enable javascript on the page. Finally we run accessibility checks after each change.

This state of affairs doesn’t seem ideal. What happens if we break down our components into their smallest constituent parts? If we structure them all with modularity in mind? If we set up our component preview files to account for missing resources? Our components will gain a super power: Ultra Testability!

Some of the parts that make up the navigation menu. I created and tested individual links, headers, sections, and list items.

We build from the smallest units up. We can now check each part with its own inherent states in isolation. We can immediately see where regressions, combinatory errors, or edge cases crop up. We make no assumptions about where these units fit within the larger structure. As a result, we can use these smaller pieces elsewhere without modification. Once we’ve created all the parts, assembling the whole is as simple as putting them together. Then we need test only the states of the larger assembly. The result is robust, flexible, and easy to change. Congratulations, you have created a Super Component!

Thunder Megazord, fully assembled

Tiny Lessons

I’ve found it useful to create content generators for creating specific text when you want it, or random text if not. You can set ranges of likely text or item lengths to keep things reasonable. The node library faker.js is helpful for this.

The dConstruct Audio Archive works offline Thu, 02 Nov 2017 15:47:00 +0000 The dConstruct conference is as old as Clearleft itself. We put on the first event back in 2005, the year of our founding. The last dConstruct was in 2015. It had a good run.

I’m really proud of the three years I ran the show—2012, 2013, and 2014—and I have great memories from each event. I’m inordinately pleased that the individual websites are still online after all these years. I’m equally pleased with the dConstruct audio archive that we put online in 2012. Now that the event itself is no longer running, it truly is an archive—a treasury of voices from the past.

I think that these kinds of online archives are eminently suitable for some offline design. So I’ve added a service worker script to the dConstruct archive.

The dConstruct Audio Archive is now a Progressive Web App: Now you can enjoy those great talks offline!


To start with, there’s the no-brainer: as soon as someone hits the website, pre-cache static assets like CSS, JavaScript, the logo, and icon images. Now subsequent page loads will be quicker—those assets are taken straight from the cache.

But what about the individual pages? For something like Resilient Web Design—another site that won’t be updated—I pre-cache everything. I could do that with the dConstruct archive. All of the pages with all of the images add up to less than two megabytes; the entire site weighs less than a single page on or The Verge.

In the end, I decided to go with a cache-as-you-go strategy. Every time a page or an image is fetched from the network, it is immediately put in a cache. The next time that page or image is requested, the file is served from that cache instead of the network.

Here’s the logic for fetch requests:

  1. First, look to see if the file is in a cache. If it is, great! Serve that.
  2. If the file isn’t in a cache, make a network request and serve the response …but put a copy of a file in the cache.
  3. The next time that file is requested, go to step one.

Save for offline

That caching strategy works great for pages, images, and other assets. But there’s one kind of file on the dConstruct archive that’s a bit different: the audio files. They can be fairly big, so I don’t want to cache those unless the user specifically requests it.

If you end up on the page for a particular talk, and your browser supports service workers, you’ll get an additional UI element in the list of options: a toggle to “save offline” (under the hood, it’s a checkbox). If you activate that option, then the audio file gets put into a cache.

Now if you lose your network connection while browsing the site, you’ll get a custom offline page with the option to listen to any audio files you saved for offline listening. You’ll also see this collection of talks on the homepage, regardless of whether you’ve got an internet connection or not.

So if you’ve got a long plane journey ahead of you, have a browse around the dConstruct archive and select some talks for your offline listening pleasure.

Or just enjoy the speediness of browsing the site.

Turning another website into a Progressive Web App.

This was originally posted on my own site.

The Relationship Between Service Design and UX Design - Part 2 Tue, 24 Oct 2017 08:00:00 +0000 This post was written by former Clearleftie and intern extraordinaire, Sebastien Chung. Seb spent part of his internship exploring the relationship between Service Design and UX Design - an intersection with increasingly blurred boundaries…

Part 2 - Written by Sebastien Chung.

Exploring the Shared Spaces of Service Design and UX Design

In my last post I discussed how to the rise of digital services has lead to an increasing overlap in the areas of Service Design and UX design (if you haven’t read the previous post you can take a look at it here). One way of exploring this overlap is to begin to look at the shared tools, processes and methodologies that we designers use when approaching our projects.

An internal workshop was conducted with Clearleft’s design team to understand the tools and methods that UX designers use throughout their digital design process.

A Digital Service Design Toolkit


A blank board was created with a high-level outline of stages of the design process. Stages included Strategy, Research, Analysis, Design, Prototype & Launch. Clearlefties’ UX designers were asked to write methods individually on sticky notes before attaching to the board. Methodologies were then discussed, compared, and contrasted as a group.

Processes and methods commonly used in Service Design were then mapped onto a separate board of the same high-level project stages. These tools were gathered from a number of Service Design resources and conversations with Service Design practitioners as well as from my own experience and those of the Clearlefties’ design team.


The processes of Service Design and UX were combined on a single board and grouped according to their purposes and outcomes. The groupings revealed insights into common approaches, aims and practices throughout the design process.

The relationship between these elements can be seen on the infographic below. This visualisation shows the shared methodologies and processes used in Service Design and UX Design. Looking at the processes from Service Design and UX Design mapped in this way it does seem apparent that there are more similarities than differences between the disciplines.


In order to design meaningful Digital Services it’s becoming increasingly necessary to draw from the toolkits of both the Service Designer and the UX Designer.  

Combining the processes and methodologies used in Service Design and UX Design, I have collated a toolkit of helpful techniques that can be used throughout a Digital Service Design project. (Note: The tools in the Digital Service Design Toolkit are taken from a wide range of resources some of which have been listed below.)

This Digital Service Design Toolkit groups the tools under the familiar titles of strategy, research, analysis, prototype and launch/handover, suggesting the stages that tools might be useful for the designer. Enabling approaches to problems at various levels of zoom and focus, it covers techniques that can help to delve into the details of digital touch point or create a holistic end-to -end view of a customer journey.


Highlighting the shared space between disciplines can, hopefully, increase understanding and aid collaboration between the various design communities, whilst making available a variety of techniques aimed at creating services with meaningful, digital-focused customer experiences.

It could be the start of a collaborative piece of work to be be iterated, developed, and improved according to the emerging needs of Digital Service Design projects.

Perhaps it can help guide a Service Designer to better understand the customer’s experience of an important digital touch point or help a UX practitioner to find a usable process to see where a project fits within the wider context of a customer journey.  

It might just be viewed as trying to make sense of the huge mass of design tools and processes floating around in the ether but, however this toolkit is received, hopefully it will be used to aid the design of Digital Services and in some ways promote discussion and communication between design communities.

Read The Relationship Between Service Design and UX Design - Part 1, here. 

Resources used in the creation of this post include:

This is Service Design Thinking, Stickdorn & Schneider    Service Design, Polaine and Reason…

Introducing 'Voice Guidelines': for all your voice UI design needs Mon, 23 Oct 2017 08:00:00 +0000 Introducing a collated set of guidelines for designers to quickly learn about creating voice interfaces.

One of the biggest turning points in my career as a designer was the introduction of design principles into our projects. Having concise, clear, highly-visible guidance up on the wall made our projects much easier to navigate. 

When I started thinking about designing for voice, and just as the Amazon Echo was taking off, I realised it wasn’t so easy to find guiding principles (let alone books) on the subject.

In my journey into learning voice design, I decided to hunt around for principles, and the one pager I created is the result of this hunting around. It’s partly inspired by my colleague Jeremy Keith’s - an excellent resource for any team to start thinking about how to sum up what drives them. 

I hope is useful to beginners and experts alike. There’s something satisfying about seeing it all in one place; to compare, contrast, and learn quickly. 

As it’s the hard work and insight of so many talented people, I’d like to thank them here for helping me to learn.

Please get in touch with any feedback, additions, or comments: tweet us @clearleft and @bensauer, or email me

Want to do some practical learning to design for voice?
Check out my workshop, find out more below!

Pattern Libraries, Performance, and Progressive Web Apps Sun, 22 Oct 2017 22:37:00 +0000 Ever since its founding in 2005, Clearleft has been laser-focused on user experience design.

But we’ve always maintained a strong front-end development arm. The front-end development work at Clearleft is always in service of design. Over the years we’ve built up a wealth of expertise on using HTML, CSS, and JavaScript to make better user experiences.

Recently we’ve been doing a lot of strategic design work—the really in-depth long-term engagements that begin with research and continue through to design consultancy and collaboration. That means we’ve got availability for front-end development work. Whether it’s consultancy or production work you’re looking for, this could be a good opportunity for us to work together.

There are three particular areas of front-end expertise we’re obsessed with…

Pattern Libraries

We caught the design systems bug years ago, way back when Natalie started pioneering pattern libraries as our primary deliverable (or pattern portfolios, as we called them then). This approach has proven effective time and time again. We’ve spent years now refining our workflow and thinking around modular design. Fractal is the natural expression of this obsession. Danielle and Mark have been working flat-out on version 2. They’re very eager to share everything they’ve learned along the way …and help others put together solid pattern libraries.

Danielle Huntrods Mark Perkins


Thinking about it, it’s no surprise that we’re crazy about performance at Clearleft. Like I said, our focus on user experience, and when it comes to user experience on the web, nothing but nothing is more important than performance. The good news is that the majority of performance fixes can be done on the front end—images, scripts, fonts …it’s remarkable how much a good front-end overhaul can make to the bottom line. That’s what Graham has been obsessing over.

Graham Smith

Progressive Web Apps

Over the years I’ve found myself getting swept up in exciting new technologies on the web. When Clearleft first formed, my head was deep into DOM Scripting and Ajax. Half a decade later it was HTML5. Now it’s service workers. I honestly think it’s a technology that could be as revolutionary as Ajax or HTML5 (maybe I should write a book to that effect).

I’ve been talking about service workers at conferences this year, and I can’t hide my excitement:

There’s endless possibilities of what you can do with this technology. It’s very powerful.

Combine a service worker with a web app manifest and you’ve got yourself a Progressive Web App. It’s not just a great marketing term—it’s an opportunity for the web to truly excel at delivering the kind of user experiences previously only associated with native apps.

Jeremy Keith

I’m very very keen to work with companies and organisations that want to harness the power of service workers and Progressive Web Apps. If that’s you, get in touch.

Whether it’s pattern libraries, performance, or Progressive Web Apps, we’ve got the skills and expertise to share with you.

This was originally posted on my own site.

The Relationship Between Service Design and UX Design - Part 1 Fri, 20 Oct 2017 07:41:00 +0000 This post was written by former Clearleftie and intern extraordinaire, Sebastien Chung. Seb spent part of his internship exploring the relationship between Service Design and UX Design - an intersection with increasingly blurred boundaries…

Part 1 - Written by by Sebastien Chung.

Over the past decade, Digital Services have become an increasingly common part of our daily lives, often augmenting or even replacing, traditional channels with digital ones. Think about the last time you visited a bank branch, paid an electricity bill over the phone, or booked your plane ticket at a high street travel agency. How many of those experiences are now predominantly digital?

Today with over two billion people using smart devices, Digital Services provide customers increased levels of convenience and businesses with opportunities to deliver better customer experiences at a significantly reduced cost.

These days, pure digital companies effectively deliver meaningful digital service experiences. Companies like Apple have used those learnings to improve their physical service experience through initiatives like the Apple Store. 


By comparison, many traditional businesses have struggled to modernise their in-store or phone services, and are using digital only as a self-service cost cutting exercise, rather than a means to craft a deeper and more intimate service experience.

Brands like Monzo and Starling are examples of companies offering purely digital banking experiences, replacing traditional touchpoints such as branches and phone support. Companies such as Uber, Airbnb and Zipcar deliver physical services (taxis, hotel rooms and car hire) in a digital first way, eschewing customer service centres, check-in desks and car rental depots in favour of digital equivalents.


The exact definition of Service Design has been widely debated due to its fluffy edges that border on multiple disciplines. Common themes within definitions include adopting a holistic approach to the design of interactions that occur throughout the customer journey, taking into consideration business departments, actors, platforms and touchpoints.  

With technology being pivotal to the digital service’s value proposition, digital touchpoints become a much more important part of the overall service experience and in some situations, replacing the entire service experience. So much so that it is increasing helpful for Service Designers to have a deep understanding of UX principles, methods, and practices when approaching Digital Service projects.

Don Norman defined UX Design as “encompassing all aspects of the end -user’s interaction with the company, its services, and its products” whereas recent definitions point to UX Design as the design of an “experience between a person and a single touch point”.


When designing digital products and services, UX designers are increasingly required to adopt a holistic approach to their work. Often this approach requires digging deeper into the wider context of the problem and how the solution may relate to the wider organisation, its business goals and the end-to-end customer experience. 

As stated by Eliel Saarinen…
“Always design a thing by considering it in its next larger context - a chair in a room, a room in a house, a house in an environment, an environment in a city plan.”


Good UX designers are always looking at the context. That inevitably means stepping outside the screen to understand how their products are being used in the real world. Often with digital products and services, the wider context of the project has been neglected, requiring UX designers to take on this service component out of necessity. Similarly, Service Designers often need to delve into the details of a digital touch-point to create meaningful specifications that can be handed over to a UX designer.  With the rise of Digital Services, the boundaries between the disciplines and the role of the designer are becoming increasingly blurred. As Service Design becomes more digitally focused and UX projects become more and more service oriented, a shared space between the disciplines emerges.

In a follow up post I will dig deeper to explore this shared space by looking at the processes and methodologies that UX and Service designers use in their day to day work.

Resources used in the creation of this post include:

This is Service Design Thinking, Stickdorn & Schneider   Service Design, Polaine and Reason…

Super simple estimation Wed, 18 Oct 2017 15:09:00 +0000 Personally, I’ve always felt that the guidelines for Sprint planning sessions are a tad on the excessive side:

“Each sprint begins with a sprint planning meeting. For a one month or four-week sprint this meeting should last eight hours. For a two-week sprint, plan for about four hours.”

Most of our projects run on a two-week sprint cycle, so in theory we should be enjoying many four hour sprint planning sessions. Four hours of planning! How could anyone stay awake for that long? How could we justify that from a budget perspective? 

Even with detailed discussion of the story needs, using poker for story pointing and detailed planning per item, two hours would push the boundaries of a useful planning session - the team will have had enough and the quality of the discussion will degrade. 

Likewise, not estimating at all is very risky and most likely to run the project into difficulty sooner or later. So you definitely need an estimation technique, but finding something which suits your project can take a little effort.

Recently, we’ve chosen to use t-shirt sizing and points for estimation on a project, which is a super easy lightweight technique for getting teams to estimate their work.

When to use it:

  • Fast projects with 1-2 week sprints - you simply don’t have the time for long estimation sessions so something the team members can do ‘offline’ is great.
  • For teams getting started - teams can often relate much more easily to t-shirt sizes than the Fibonacci sequence used in poker cards. 
  • For teams who prefer to estimate in days - if you’re trying to convince your team to use an abstract method for estimation rather than days, then this is a low barrier to entry.

How it works 

  • The team use T-shirt sizes (e.g. XS, S, M, L, XL) to estimate and agree work on the project.
  • The team should pick from the backlog something which they agree is the smallest task. 
  • Each story or task in the backlog is then estimated using the T-shirt scale. Team members may just be able to estimate their own work if it just applies to them, or agree with other team members on those tasks which they will collaborate on.
  • At the start of a sprint, the team should estimate or amend the estimate in t-shirt sizes for a specific task or story. This can be done either in a very short planning session (i.e. 15-30 mins maximum), or do it when they have time.
  • During, or at the end of the sprint, the team should update the estimate for the task. A small task may have mushroomed, likewise something which was large may have required little effort to complete.

Tracking progress

In the case of this project, we converted the t-shirt sizes to points i.e. XS - 0.5 point, S - 1 point, M - 3 points, L - 5 points, XL - 8 points). As PM, I could then use the points to review progress using relative estimation, and estimate with greater confidence (and happiness) where we would get to by the end of the project. 

It’s by no means foolproof. It’s a very simple technique, and that means the level of accuracy can be off at times. But it’s way better than trying to estimate using days.

How do you and your teams estimate your work at the start of a project? Join the conversation on twitter @clearleft.

Become an undercover innovator - how to generate and develop ideas Wed, 11 Oct 2017 08:38:00 +0000 ‘Design’ is a much misunderstood word. The best design does two things: it solves real problems that people actually have; and in doing so, elegantly blends form with function.

I’ve seen many designers in organisations get stuck in a delivery role merely adding polish to fully formed and rigidly set ideas. Whilst designers have a role in creating beautiful looking artefacts and interfaces they also have a huge amount to offer in framing and exploring opportunities through design thinking.

If you’re in such a situation, and you’re feeling frustrated that your craft and creativity could be better used to make more of an impact, then don’t wait for permission to make things happen. Take the lead, become an undercover innovator.

Start to innovate from the bottom-up

This article will give you some tried and tested tips on facilitating the team around you to generate and extend innovative ideas to solve identified challenges. It is a follow up article to Become an undercover innovator - how to spot your opportunities which covers ways to identify areas ripe for innovation.

Undercover innovation is a mindset that’s all about being proactive in order to demonstrate the value of design thinking. It’s about starting small but thinking big. It’s about introducing others to the power that design offers. It’s about going under the radar to kickstart a move in your organisation to use design to identify, investigate and incubate new revenue streams and processes for cost-savings.

For the purposes of this article, and for want of a simple single sentence on the matter, I’m going to define innovation as ‘you or your organisation doing something new or different’. It is a way to move from where you currently are to somewhere better.

Three considerations for the undercover innovator

For the undercover innovator there are three key things to remember when looking to turn insights into innovative solutions:

  1. Innovation is a team game. If you want to change the perception of design, then invite people (especially non-designers) into your world, involve them and de-mystify your processeses. You are looking to create design advocates, so play nicely. You’ll also get more diverse ideas by asking a range of people with different skills sets and perspectives to take part.
  2. Innovation is a muscle that needs regular exercise. Doing something new is the path of most resistance. As you’ll initially be doing this on top of your day job, think about small but frequent activities. First, develop some momentum and traction; then push harder to accelerate the habit of innovation in your organisation.
  3. Innovation is a process that can be coached. Debunk the idea of the eureka moment being the exclusive preserve of the genius thinker. Beyond the specific challenges you might investigate, remember that the bigger aim is for you to introduce and embed design thinking as a structured and methodical way to reach desired business outcomes.

These three principles will help change the perception of design from merely the aesthetic layer to a vital method used by businesses who successfully develop new products and services.

Get the best results from your ideation sessions

Before we look at the techniques, let’s take a whistlestop tour of advice on successfully running your workshop sessions.

Invite the right people. Have an open invitation to see who is interested as well as targeting certain people you want to influence. Make the effort to identify and personally invite the stakeholders and influencers who can give you the time to further develop ideas. Look to encourage managers who are cynical about the value of design to get involved in the process. Bring in people who’ve recently started in the organisation who might be open to new ways of thinking and working. Finally, ensure you have some allies who know what to expect and are willing to enthusiastically jump into your design games.

Make it easy (and fun) for people to attend. As you’re looking for people to volunteer their time, incentivise their participation. Provide lunch or refreshments, make the sessions less than an hour long, tell them what new skills they will learn and how much fun they will have!

Prepare your participants. Let them know what to expect, give them a preview of the activity you’ll be taking them through and provide any insight to the challenge. Recording and sending out a very short video is a way to introduce yourself and to show the activity in action.

Prepare yourself. It’s your party and you are the host so it’s your responsibility to ensure everyone has a good time. Prepare how you’ll frame the challenge and explain the design activity. Get to the room early to set it up. Have any materials out and ready to use. Have an activity for people to do whilst waiting for the latecomers to arrive.

Structure your session. Be strict in timeboxing the phases to ensure in the time you have you can articulate the challenge, generate a quantity of ideas, then share and build upon these ideas without people feeling rushed.

Follow up. Make sure you capture the outputs of the session and share this with both the participants and the decision makers you want to influence. A quick ways to do this is to create a slide deck framing the challenge with annotated photographs of the ideas generated in the session. Remember you don’t have to have fully completed solutions just enough thoughts to gain interest in doing more. Include your contact details with the offer for you to come and talk people briefly through the activity or the outcomes. Distribute the outputs widely. This might include posting it on your intranet or printing it out and putting it up in communal workspaces.

Six proven innovation activities to try out

The intention here is not to create an extensive playbook, but to give you a handful of my favourite ways to introduce non-designers to ideas generation. Each of the following techniques can be used in under an hour to go from insight, to idea generation, to iteration.

The main commonality is that they all have structure and constraints to help focus design thinking. This helps you move from obvious solutions to more radical and potentially interesting ones.

Technique 1: Run a super lightning design studio

Pose a challenge and get your participants to sketch out as many ideas as they can come up with to solve it. One way to phrase the challenge is to start it with ‘How might we …’ and focus the statement on the outcome you want to achieve rather than hinting at a solution.

Then get people individually to sketch as many solutions as they can in two minutes. The focus is on quantity of ideas over quality of drawing. Let people know they will be talking through their sketches so they can keep the drawing very lo-fi.

At the end of two-minute briefly share each idea and get the group to decide on the aspects of the sketch to develop and exaggerate further. Don’t get caught up in the practicalities of building the ideas at this stage encourage the big, the bold, the crazy. You’re after sparks to innovate around not fully formed solutions.

Once everyone has shared their sketches do another round of sketching and share again. This time the group is encouraged to suggest aspects of others people’s ideas to combine into the sketch. Continue to sketch, share and repeat.

Avoid the temptation to extend the time to be able to work in more fidelity. More iterative rounds is better than more visually detailed sketches. Do at least three rounds of sketching but it works best with more as this helps you move away from initial (and often obvious) ideas to a new space.

It is a great exercise to get non-designers to surprise themselves in being able to create imaginative answers to the challenge and to show them the power of iteration to step beyond initial solutions.

The 'how might we...' challenge. Illustration by James Gilyead.

Technique 2: Re-imagine solutions with S.C.A.M.P.E.R

The acronym stands for (S) substitute, (C) combine, (A) adapt, (M) modify, (P) put to another purpose, (E) eliminate and (R) reverse. It’s a great framework to reimagine experiences and arrive at untypical solutions by being forced to think about and change elements of it.

I’ve seen this technique mostly used when you have an existing product or process and you want to find ways to enhance it. However, it also provides an interesting framework to get people to create a new product or service based around known user tasks.

To use it in a workshop pose the group a design challenge such as ‘How could we reimagine how people decide where to go on holiday’ or ‘How could we reimagine the experience of going to a restaurant’. To run the activity write out the challenge statement and surround it with seven circles containing each of the words from s.c.a.m.p.e.r. Then set a time limit to explore and generate ideas for each word in the acronym. The words can be used in any order.

Get the participants to write one idea per Post-it® note and stick them up next to the word they are exploring. Then get the participants to vote on the most interesting three ideas for future exploration. Once all seven words have been explored have a vote of votes to select the favourite five ideas from the shortlist of candidates created from each word.

Technique 3: Step along the delight curve

I’ve long used the Kano model as a means to think about product features. I find it an invaluable model to ensure I spend time in a project finding and creating the ‘delighters’ that will distinguish and differentiate the end result. A super useful extension to the Kano model comes from Dana Chisnell where she breaks down the delight curve into three progressive parts: pleasure, flow and meaning. It’s best explained by Dana herself in this video

The structure proves a useful framework to step through a number of identified frustrations your audience have to generate ideas for how you could turn these around.

In a ideation session spend a little time to introduce what you mean by pleasure, flow and meaning. A deck with some digital and non-digital examples is a quick way to explain the concept. Ask the participants to also contribute examples they think fit the descriptions.

For the ideas generation exercise get people into teams. Introduce a customer frustration and brainstorm in turn what we could introduce to increase pleasure, then flow and finally meaning for the user. Get the teams to write each individual idea on a Post-it® note and to share their most interesting ideas with the group.

Once you get into the swing of it you can get through three to five user frustrations in a 45-minute session.

Introducing and explaining models for innovation in your sessions allows the audience to think of design as a form of structured thinking and it teaches them a new technique to bring to their work.

Technique 4: Pitch the idea

Another technique where no drawing skill is required is to create a product pitch. These crafted statements sum up the essence of a product or service and the value it provides for end user. If you get them right they act as a strong hook to design features off.

There are plenty of suggested outlines available if you search for value proposition templates. In essence they all work like an ad-lib with a sentence with blanks to fill in. Here are three different ones I like to use. In a session provide printed templates and get participants to explore an idea using more than one statement format to see if it sparks new possibilities and ideas.

The elevator pitch popularised by Geoff Moore in his book Crossing the Chasm.

For _____________(target customer) who has  _____________(customer need), our  _____________(name of product/service) is a  _____________(market category) that  _____________(one key benefit). Unlike  _____________(competition), the product  _____________(unique differentiator).

The Minto pyramid principle which uses four short sentences to identify areas for innovation.

Situation - describe the current situation (even better with figures). Complication - describe the issue in the situation. Question - describe the question in response to the issue. Answer  - suggest a way to solve or mitigate the issue.

In a short session you might want to give the same situation and complication as a start point to all participants. 

To give you an example:

99% of all the music ever recorded is available to stream online. This has led to less consumption of music by new artists. How can we help the listener to discover their next favourite artist? Our weekly ‘chosen for you’ feature will give a recommendation to the user from an artist they already know and like.

The third template is the high concept movie pitch. Think ‘Jaws on a spaceship’ as a pitch for Alien.

The format is [Successful industry example] for [new domain or audience]

When you run your session you might want to introduce red cards for certain examples. After all, who needs another pitch for ‘tinder for homebuyers’. 

Technique 5: Write the press release

A technique credited to Amazon is ‘working backwards’. In it you write the press release to test if an idea is exciting and compelling to take into development. Obviously writing a press release is quicker and cheaper to create and iterate upon that unleashing a whole development team.

The press release is no more than two sides of paper and follows the format:

  • The product name in a way the target customer will understand.

  • A sentence to describe who the audience is and what benefit they get.

  • A summary of the product and the benefit.

  • A description of the problem your product solves.

  • A description of how your product elegantly solves the problem.

  • A fictional quote from a company spokesperson.

  • A quote from a hypothetical customer that describes the benefits they experienced.

Although the process is easy to understand, to get right takes effort. In a short session I’d recommend to get people working in teams to help provide momentum and starting with bullet points rather than crafting sentences.

Technique 6: Design the advert

This one requires a little more drawing skill but not much. It’s another technique where you start at the product launch to help identify the killer features and benefits for the audience.

Decide on an advertising medium to design for and the context someone will encounter it. This could be a billboard passed whilst driving, an advert seen whilst travelling up an escalator in a tube station, or the advert placed in-front of a video on YouTube. Setting the medium helps provide different constraints and situations to focus on.

Get the group to shout out some considerations, both positives and negatives, to think about when designing for the chosen medium. Then give a challenge statement to design for and give the participants 15 minutes to create an initial advert. It’s often easier to get people to start with Post-it® notes or index cards to write down and re-arrange snippets of text and visual thoughts before designing the whole poster or screen.

After 15 minutes get everyone to do a show and tell of their advert. Get the audience to feedback framing all responses with ‘Even better if …’. This forces positive critique on the building upon ideas. Repeat the exercise either using the same medium or if you want to really challenge your participants swop to a different medium to see if new ideas emerge.

Closing thoughts

As a designer the best way to move from a delivery role to one that includes innovation is to show non-designers how design thinking can be used to identify, investigate and incubate valuable ideas.

What activities in your design toolkit do you favour to help get non-designers exploring and creating innovative solutions? I’d relish the chance to hear your stories and advice on building a design-led practice of innovation, or to discuss further how design can be used to create greater value for your customers and your organisation. Drop me a line at

Read Part 1: ‘Become an undercover innovator - how to spot your opportunities’ here.

Join the conversation about design thinking and undercover innovation on Twitter, by tweeting us @chrishow and @clearleft.

Design Sprint Download: Jake Knapp for Clearleft Presents Thu, 05 Oct 2017 12:14:00 +0000 Last month we welcomed the brilliant Jake Knapp to London to lead his Design Sprint Workshop. It’s amazing to see how far sprints have come since Jake, John and Braden popularised them in 2010.

I met folks running dedicated design sprint departments. I met a manager whose team have facilitated over fifty sprints in the last year alone. I even met people who are using sprints to prototype organisational change. This is inspiring stuff, and a valuable reminder of how versatile this format this can be.

The big takeaways for me were around facilitation. Jake reminded us that the barrier to a great product is not always the design or technology. Often it’s the organisation’s habits and culture which stand in the way of cross–functional collaboration. To tackle this, Jake focuses on designing the group’s time, as opposed to the product itself. Do this right and we give the permission and structure from which great things emerge.

My colleague Jon shared his reflections with me.

I found the day super insightful. Mainly because Jake is a modest and humble guy who, though he wrote the book on design sprints, is still aware they're not perfect nor infallible. He's always listening to feedback on the process and adapting accordingly, hence the workshop's main focuses on what he's been told are the most difficult bits: Mapping (Day 1/Monday) and Deciding (Day 3/Wednesday). Jake's focus on these was really helpful and facilitated, and the day rounded out with his summarising of his 150+ sprint experiences to help with Days 4 & 5 (prototyping and testing). High fives all around.

Jon Aizlewood
High fives all round!

Attendee Charles Reynolds-Talbot published his own take on the day’s events.

Jake keeps your attention in the palm of his hand throughout and as a result delivers an incredibly refreshing learning experience. Even the icebreaker was genius. I won’t spoil it, you’ll just have to attend one the workshops!

Charles Reynolds-Talbot

And, I’m pleased to say, Jake enjoyed himself too.

From the moment I walked into the room at the corner of the Tate, I knew it was going to be a pretty special day—and it was. Thank you all for joining me and giving so much energy to the workshop. I had an awesome time!

Jake Knapp

We’re so pleased that the event was a success and are planning on repeating the workshop in 2018. To register your interest, please email our Events Manager Alis.

Jake’s workshop is part of the Clearleft Presents series, a new programme of workshops led by some of the biggest and brightest names in tech industry.

Next up, the indomitable Mike Monteiro will lead ‘Design is a Job’, a practical and inspiring one day workshop on how to thrive making a living as a designer. The event takes place on Monday 13 November 2017 in London. Find out more and book your ticket here.

Towards a vocabulary of Artificial Intelligence. Fri, 29 Sep 2017 15:28:00 +0000 On the Norwegian AI retreat our group’s disciplines ranged from digital designers, to comic book authors, and from radio show presenters to professors. So how might such a multi-disciplinary group begin to chart the domain of Artificial Intelligence?

Even before we had arrived, it was clear that we were working with a diverse set of agendas, sizzling enthusiasm and vast and wild focal points. I could see it was going to require a soft-touch method to extract and visualise the domain from the perspective of those who were present.

Artificial intelligence has no distinct definition, no distinct edges, no particular size, and no particular shape. AI, in all its guises, is pervasive in real life today, and an ever growing topic for speculative futurists. 

We wanted to avoid painting the conversation into a corner. Opening out the vocabulary allowed us to visualise emergent themes and take a step towards disambiguation. 

“Gaining consensus means aligning on a common mental model and a shared vocabulary that stems from the language of your audience. Vocabulary is hard; it forces you to define things, which forces the team to agree on that definition.

Mike Atherton, author of forthcoming book Designing Connected Content.

The vocabulary dump

We asked all the participants to create a 20 minute brain dump of Artificial Intelligence vocabulary on stickies of no particular colour.

These were separated into nouns, verbs and adjectives (thing words, doing words and describing words) but not in any kind of strict way. 

Our version of an Artificial Intelligence Vocabulary. Photo by James Gilyead

It became clear that there are emerging vocabularies, including model labels, retro-nouns (nouns collocated with other nouns to define them, like digital pencil vs. lead pencil) and even a necessity to invent new words to accommodate new concepts; “patadata” - the language created by robots for robots that becomes nonsensical (attr.@poietic). 

With what was effectively a regurgitation of vocabulary from all the experts, the conversation turned to how we might begin to organise the vocabulary - processing them through a series of models? Concept diagrams? Random association? There were endless opportunities. It would be interesting to see how different groups, with different backgrounds would create different vocabularies and themes.

The Clearleft Re-decoration service. Photo by James Gilyead

How do you organise the vocabulary of AI?

Modelling a concept, organising the sticky notes, finding a way to make sense of such a vast subject requires discussion, a lot of it. But the model or method you use to get to the discussion is only the vehicle. 

We used the phrase “When you ask people to look at the moon, don’t look at the finger pointing at the moon, look at the moon” to prevent us from getting hung up on the design of models, and keep looking more closely at the “moon”. Which became strangely relevant again when the northern lights appeared to us that night.

How do you group the themes?

If you’ve ever seen the Northern lights for real, or in film, they shift and change, like a lit up dancing gel, or the way light catches smoke in the sky. There was a connection between the way you might group the vocabularies under certain themes, and yet they didn’t seem to want to stay in the categories and blend with others. 

One of the themes: "Human-machine Symbiosis".

When we’d created the vocabulary, we moved into an open space / unconference format, which allowed a smaller group to begin to cluster and categorise the words. Using index cards, they created sub-sets and themes. Clouds and clusters of vocabulary that played off one another. 

Clustering and categorisation

The greatest benefit of this exercise was that unexpected themes emerged. From there, a whole new strata of conversation topics emerged too. 

The wall served as a resource, a departure point, and an anchor, something to come back to, to point at and ask for clarification. It formed a base line that allowed us to continue and create a number of outputs, which you will gradually begin to see emerge if you follow #AIretreat.

Karen, Cennyd and Dan discuss ethics and art. Photo by James Gilyead.
The Artificial Intelligence retreat team. Thu, 28 Sep 2017 12:44:00 +0000 The first day was a day of divergence, brain dumping and download. The floor is now covered with index cards, and the workshop space walls have been blossoming with prophecies, gradients, book lists and clusters of new vocabularies.

Working with such a divergent group of experts and enthusiasts has meant that throughout the day people are holding up a variety of lenses to the subject of AI, from creative futurism, to philosophy, to absurdism, to ethics. The vocabularies are wide ranging, and the invented vocabularies even more so (…cottage accelerationism, metempsychosis, polyoculars, patalanguage…). Facilitating these enthused, energetic and deeply important discussions has without a doubt required a peaceful, hidden away landscape to contain them. 

Workshop space at Juvet in Western Norway

The team

Warren Ellis

Warren is an comic book writer, a novelist, a screenwriter and fascinating font of knowledge.

Matt Webb

Matt is a start up accelerator for IoT, a speaker and a book writer - a man with eclectic ideas on bots.

Amber Case

Cyborg anthropologist, and speaker on the topic. Purveyor of facts and proposals with great energy.

Kate Devlin

Kate Devlin is a Senior Lecturer in the Department of Computing at Goldsmiths, and a computer scientist specialising in Artificial intelligence and Human–computer interaction (HCI).

Josh Clark

Mobile/IoT/AI/bot designer, founder of Big Medium, speaker and writer. General spreader of positivity. Also a silo demolisher.

Chris Noessel

Head of Design for IBM’s travel & transportation industry.He teaches, speaks about, and evangelizes on design internationally.

Ben Remington

Insatiably curious UX designer with mad-scientist ingenuity.

Dirk Knemeyer

Serves humanity by making better social systems & evocative shared experiences. Chairman of the fascinating Goinvo

Bill Thompson

As known from BBC Click on the World Service. Good egg and an eye for Norwegian trolls, waiting for a drone to get caught in his hair.

Cennydd Bowles

Designs digital products, and the teams that make them. Teaches contemporary skills for digital designers. Also a speaker and writer. Listen to him on ethics.

Daniel Harvey

Passionate about building a better tomorrow in the creative industries. Speaker, mentor, writer, advisor. 

Lysandre Follet

Director of generative design in Nike’s Innovation Department. 
Also builds modular synthesizers. Killed by a replicant earlier today.

Dan Hon

Technology, systems and people. Silo demolisher. AI absurdist. Neural-netting. Newsletterist.

Karen Kaushansky

Experience designer and product designer. VUI and bots. Retro-nouns.

Ishan Shapiro

Patadata. Wooden flute.

Adrian Zumbrunnen

Has a lovely website that talks to you, but is also working on Google Lens.

Andy Budd

One of the founders of Clearleft. AI curious. Retreat Visionary. Speaker on design matters.

Ellen de Vries

Collaboration. Facilitation. Documentation. Puppeteer and robot enthusiast.

Ben Sauer

Voice UI. UX. Product Strategy. 

James Gilyead

Photographer, documentation. Visualiser. 

Team Juvet.

Of course, we recognise that any particular group, being such a small group, will come at the subject with a particular angle. Bias is something we need to tackle in AI. But this is a small, small way of contributing to the great task of progressing the way we think about such an amorphous subject. The work we do does result in an output that reflects our positions, but the aim is to ‘get doing’ and promote thinking while making in any way we can. The principles of open space discussions apply: “What happens is the only thing that could have happened”, “Whoever comes are the right people”.

Become an undercover innovator - how to spot your opportunities Wed, 27 Sep 2017 14:01:00 +0000 As a designer, you have an opportunity to introduce design thinking by doing it, rather than just talking about it. Taking a strategic design thinking approach in order to deliver greater business value doesn’t have to come from the top down.

Increasingly, innovation is a vital skill to be developed and demonstrated by people throughout all organisations. Anyone can, and everyone should, be innovating - and design thinking is a valuable way to do this.

For the purposes of this article, and for want of a simple single sentence on the matter, I’m going to define innovation as ‘you or your organisation doing something new or different’.

This is the first of two articles giving tips on how to kick-start design-led innovation in your organisation. In this one, we’ll look at four ways to systematically spot issues to innovate around, and explore how to introduce your non-design colleagues to the value of design thinking.

Why make the effort and why go ‘undercover’?

Innovation is the lifeblood of an organisation, if it is to thrive. This is the case regardless of the sector in which the organisation operates, it’s size or revenue, how long it has been around, or any particular commercial model within which it fits. Whether it provides products or services, focuses on B2C or B2B offerings, is a startup or an established enterprise, innovation is vital.

Designers typically embody a heady mix of attributes that are ripe for fostering innovation. The blend of curiosity, questioning, empathy, prototyping and collaboration are key to being able to create imaginative scaleable solutions to existing challenges and anticipated opportunities.

However, in many organisations, it is easy for designers to get boxed into a pure delivery role merely adding polish at the end of the process. This is where ‘undercover innovation’ comes in. It is a bottom-up way for designers to move across into discovery and definition by proactively taking a lead to find and develop opportunities for innovation. With a little effort you’ll soon be invited to use your skills on more interesting challenges.

So stop waiting to be struck by that eureka moment.

Stop waiting to be asked to head up an innovation project.

Instead, take the initiative and introduce design led innovation techniques to your workplace.

Three golden rules to help you succeed

Let’s start with three important principles to bear in mind.

  1. Minimise time and amplify output. As you’ll initially be doing this between other tasks and in your downtime, you need to do small activities that maximise the value and exposure for your efforts.

  2. Make friends and allies. If you want to elevate the understanding of what design and design thinking can achieve, you need to invite people in and show them your way of doing things.

  3. Don’t tread on toes. Look to tackle challenges the business isn’t yet addressing. You want to carve a new space rather than set yourself up in competition with colleagues who may already be tasked to look into certain issues.

Four techniques to start you off

With the guiding principles in mind, you can get started and employ some practical tactics to get things moving and spot opportunities to innovate. All of the following techniques are based on needing no more than half a day in total to prepare, run and report on. Often this time is in short focussed bursts of activity designed for you to fit in and around your existing work schedule.

1. ​Do a digital trends review

Many organisations are great at looking at what their direct competition is introducing to the marketplace. However, they are typically less good at spotting wider digital trends and figuring out which ones to investigate and exploit.

This is where a trends review helps. Become the curator and presenter of new topics and themes and keep people in your organisation up to date.

Simply in a slide deck collate three to five emerging or interesting digital trends with a selection of screenshots from related projects. Remember these examples should not be restricted to your industry sector. Spread your gaze wide. Recent trends could include the rise of the chatbot, the gig economy, the move from product ownership to subscription models, wearable technology, voice user interfaces etc.

Then find a time and place to present your deck and invite people to come to listen to your review. To make it easy for the most people to attend run the session at the start of the day or at lunchtime. Consider providing some food or snacks as an added incentive. Have an open invitation but also directly invite colleagues you want to influence and express the benefits for them in attending. This should include people in the organisation who green light future innovation projects.

Remember you are asking colleagues to give up their time to attend so make sure you finish on or before time and that they have gained more value from you than the time taken.

To focus the session on innovation through design, after your presentation, include a participatory design exercise. One way to do this is to divide the attendees into small groups and get each group to take a different trend and look at how the organisation could apply it.

Once they have had a chance to generate some ideas get each group to present back to the the attendees. Then rank or vote the ideas the group feels are of most interest to pursue further.

At the end of the session, collate the output of the design exercise into your deck. Then send out the slides to the people who attended and also make them available to others in the organisation.

To position yourself as a thought leader and trend spotter you should run a review session periodically. Quarterly seems to provide a suitable timeframe to capture emerging trends with the effort required in putting together the session.

2. Map customer feedback

With this innovation technique you are looking to plot what customers say across the end-to-end touchpoints with your products or services. This will help to spot where design efforts for improvements can be made.

In many organisations a lot of customer feedback is gathered but is often used by departments for their specific needs. This technique takes the data out of department siloes to give a holistic, timely and visibly account of the customers experience.

It’s a take on customer journey mapping. The difference is it captures and maps what people have said at various interactions rather than what they are looking to achieve.

There are two parts to customer feedback mapping. First capture customer feedback and then in a facilitated workshop spot the areas for design innovation.

To capture and show the feedback you need a long wall, some brown paper and plenty of Post-it notes®. Stick up the paper and add horizontally along the top the key sequential moments in the customer journey from initial awareness through to fulfilment. On the vertical axis add rows for positive and negative feedback. In addition, add some information on what you are doing, the time period the feedback covers, and how people can get involved.

The next step is to collect the data. Some sources might be internal such as online feedback forms, call centre logs, comments to customer facing staff etc. Some will be external sources such as comments on product review sites, social media and community noticeboards etc. Once you have a list of sources work out which ones you need to monitor (or get help to monitor) and which you can ask colleagues to provide you the information.

To kick start the process ask departments who collect data to either share it with you or even better to have someone from their team collate and add the feedback to the map on a daily basis. You may want to play on inter-departmental competition to encourage more people to help.

Each day get into the habit of adding feedback to the wall. This will help maintain and grow interest from passers-by and the map grows.

On each Post-it note capture the issue in the words of the customer. If issues occur more than once add a tallied score to the Post-it® note.

The output will highlight three key things:

  1. The positive aspects of your product or service to promote.

  2. The negative aspects to put re-design effort into addressing.

  3. Areas where you don’t yet get customer intelligence.

Once you have captured the customer feedback host a workshop to turn the insight into opportunities. You role is to act as the facilitator and to invite anyone who is interested to come along and participate. In the workshop identify the key issues from the ones that frequently occur, the ones that cause the most vociferous complaints, and those that directly lead to missed sales opportunities.

I cover tips on how to run an ideas generation workshop in the follow on article ‘Become an undercover innovator - how to generate and develop ideas’.

3. Host a breakfast briefing

Inspire your colleagues, increase their knowledge and save them time from having to do their own research by giving in-depth briefings around a single topic or technique.

Concentrate on finding topics that have relevance to your organisation and those where you think they is an appetite to use design to explore and innovate in. Topics could include personalisation, big data, digital storytelling, the pros and cons of innovation labs, virtual reality etc.

Breakfast is a great time to do this as people are more likely to be able to set some time aside and not get caught up in meetings or arising issues to address. To provide more of an incentive consider organising tea, coffee and pastries for attendees.

Breakfast briefing bribery. Illustration by James Gilyead.

The briefing breakfast has two parts. A presentation to frame the subject and to give examples of the impact it has made to other organisations, followed by a facilitated discussion to explore the subject.

Remember you don’t have to be an expert in the subject under discussion. You are merely surfacing information and examples you have researched. To spread the effort consider inviting colleagues, suppliers or external contacts to give the briefing with you acting just as the host and facilitator.

For the discussion have a series of questions to act both as prompts and also as a way to structure and help collate feedback. Keep the questions broad, for example ‘How could this help our customers?’, ‘What issues could we solve by using this?’ and ‘What challenges might we face in using this?’.

Depending on the number of attendees consider getting people to sit in groups with a volunteer table host whose role is to facilitate the conversation and collate summary notes. At the end of the session get each table host to briefly feedback their headlines to the group.

After the session send out to those who attending your slides and a summary of the discussion. To get potential buy-in to explore subjects further ask them to send it on to who they think in the organisation might be interested in the subject.

Keep the briefings short. Ideally, no more than 45 minutes. These briefings work best if they are frequent and regular. Maybe book in an initial series of six sessions on a set day every month. Once they are up and running ask attendees for suggestions of topics they would like to have included.

4. Create an internal frustrations matrix

As a designer, diagnosing and suggesting remedies for internal pain points is a sure fire way to make you friends and allies.

Innovation isn’t and shouldn’t be solely about creating new service and products for customers. Often overlooked in many organisations is the efficiency, cost-saving and higher productivity that can be achieved through innovating on internal processes and tools. Yet very few companies do it.

Plotting internal issues of a matrix in order to quickly identify the post pressing and frequent points of frustration will provide a clear picture of areas for design exploration.

The two activities you need to undertake is data collection followed by prioritisation of the issues to explore further. Time-boxing the data collection to a week or two will keep momentum in the project and in most cases be enough to get a snapshot of the severe pain points.

In collecting data you ideally want colleagues to report issues as and when they occur. It’s often the small and frequent time-sinks that when viewed across a whole organisation add up to big opportunities for innovation. In the moment reporting also helps remove biases associated with the accurate recall and reporting of past events.

Depending on size of your organisation and the time you have available you may want to limit the data collection to a smaller and more focused group of people. This could be an individual department or a sample across many departments.

To help you to collect information consider what tools you already use or can easily roll out. Ideally you want a tool that is easy for people to access and visible in their work environment.

You might want to consider using a Google form that people could leave open in a tab in their browser, or if you use Slack think about setting up a dedicated account so people can send you direct messages of their issues as they occur. A lower tech way is to give each of your participants a pack of postcards and ask them to write individual issues on them as they occur. You can then ask them to return them periodically or go and collect them in person.

It is important to stress to people you are interesting to know what is frustrating or time-consuming, what impact or delay it causes, and what they currently do to tackle the issue. Also, reiterate that finding solutions will come later and invite them to participate in this activity when it happens.

Once you have a list of issues create a prioritised shortlist by plotting the frequency of the issue (do a napkin calculation to extrapolate the number of times the activity is done daily and by how many people) against the severity (this might be a gauge of levels of frustration and/or time wasted). You might need to ask those who provided data to show you in context the issue they have so you can understand it in more detail.

The prioritisation can be done alone but will benefit with involving interested colleagues to help plot the issues with you. Once you have a matrix you are in the position to set up and run a design ideation workshop to explore remedies.

Now what?

All of these things are designed to be achievable in less than half a day’s effort, so give it a go and let me know how you get on.

Opportunity spotting is step one. Step two is developing potential solutions. In the next article ‘Become an undercover innovator - how to generate and develop ideas’, I’ll look at techniques to rapidly do just that. Keep a look out for it very soon!

I’m fascinated by the how design thinking can be used to identify, explore and create innovative solutions to business challenges and user needs. If you have techniques to share or questions on how to become an undercover innovator drop me a line at

Read Part 2: ‘Become an undercover innovator - how to generate and develop ideas’ here.

Join the conversation about design thinking and undercover innovation on Twitter, by tweeting us @chrishow and @clearleft.

An interview with Mike Monteiro Wed, 27 Sep 2017 09:35:00 +0000 Our next Clearleft Presents event is packed with knowledge and insights that you can’t afford to not to know. Intrigued?

We caught up with award-winning speaker, author, and co-founder (with Erika Hall) of Mule Design, Mike Monteiro to discuss his background, thoughts on life and work as a designer, and why the business of design is just as important as the craft of it.

Let’s start at the beginning. What made you want to work in the world of design and how did you get started?

Oof. The beginning. Well the beginning is rather boring, and probably not unlike how a lot of designers my age got started: by accident. I was going to art school. I was making posters with text. And the only way I knew how to “make text” was to buy rub-off letters, make the text I wanted, and then go to Kinkos to keep enlarging them until they were poster-sized. One day, another student told me I was an idiot and walked me down to a basement room with 4 Mac SEs. You had to take design classes to get access to the Macs. So I did. Then at some point, what I was learning about design was more interesting to me than art.

When I graduated, I got a job at a copy shop designing brochures and logos and business cards. Here’s the biggest lesson from that first job: we calculated our time in fifteen minute increments. You had 15 minutes to lay out a business card. If a brochure was two-sided you might be able to argue for thirty minutes. Logo? Fifteen minutes. I made a lot of shitty logos. On the upside: I made a lot of shitty logos. And I learned how to get things done quickly. I don’t touch the pixel making tools much these days, but I still gauge work in 15 minute increments. And I feel sorry for a designer who tells me it’s going to take them three weeks to do anything.

What inspires you?

My mom inspires me. She raised three kids on an immigrant seamstress’ salary. I find people’s stories inspiring. Their work? That’s just something to steal.

The great Chuck Close has the best quote on inspiration ever: “Inspiration is for amateurs—the rest of us just show up and get to work.” I mean, can you think of any other profession where you could tell someone “I didn’t do my job today. I wasn’t inspired.” The idea of inspiration is a fetish for people who like to wear knit panda caps and refer to themselves as “creatives.” The rest of us get to work.

What makes a great designer?

Design is the intentional solution to a problem within a set of constraints. A designer is someone who can do that. A problem solver. Someone who knows how to listen to the people who have that problem, work with them to solve it, and make sure the solution has the intended outcome. And like Karnak from the Inhumans (who should really be the patron saint of designers) we need to be good at detecting the weakness in all things.

But mostly, the secret to being good at anything is to approach it like a curious idiot, rather than a know-it-all genius.

People often think of design as a craft, which it is. But your book and the workshop you’ll be leading with Clearleft explores design from a business angle, too. Tell us more…

You can’t separate the two. We do this for money. You come to me with a problem, supposedly because I am good at solving problems like the one you have. And we come to an agreement on the value of solving it, and we exchange money for that solution. If I can do that once, I have money. If I can figure out a way to replicate that scenario with some regularity, I have a business. Which means I can make a living practicing my craft, which is solving problems for people. If I’m solving problems for people, but not doing a good job of earning a living, then I’ve created a problem for myself. That seems pretty counter-intuitive.

Those of us who went to design school got a pretty raw deal. Most design schools do a shit job of teaching you how to handle the business end, which is like teaching someone how to fly but not how to land. And if you never learned how to land, you’re not getting a second flight.

Thinking about the role of design in a wider context, what responsibilities do designers have and how can they offer a meaningful contribution to society?

Designers have the exact same responsibility to contribute to society as every other human being on the planet: we need to leave it in a better way than we found it. We need to be good citizens. We need to become good ancestors. We don’t get to opt out of that.

Like I mentioned a few hundred words ago, I became a designer by making logos and brochures. And for a while that’s the kind of shit we designed on the web too. The stuff we make these days is so much more complex than that! We’re designing social networks and applications that are so intimate to people’s lives. Stuff that has a real impact on people’s lives and relationships. You’ve got a company like Facebook that fiddles with privacy concerns on a semi-daily basis. They’ve got billions of users, and their motto is move fast and break things. That motto is affecting  people’s lives. And designers are the ones making this stuff. So we need to be the ones kicking the tires on those decisions and working out how they’re going to affect those people. We also need to be able to say no.

Last month, an engineer at VW was sentenced to 40 months in jail because he knowingly designed software that deceived the public. This is going to start happening more often. We’re going to be held accountable for just following orders. And I think this is a very good thing.

What’s the biggest challenge you’ve faced in your career?

Making payroll. And anyone who runs a design shop and gives you a different answer is lying.

What one piece of advice would you give your younger self?

Lay off the ice cream.

Finally, you’ve said that in the workshop “we’ll have fun, we’ll laugh, we’ll cry, and we’ll tell stories”. What else can we expect?!

The workshop is gonna be great. It’s basically an open book test. We’re gonna cover what’s in the book. So if you’ve read it, this is a fantastic opportunity to talk about the stuff you had questions about in more depth. If you haven’t read it (I’ll still love you) it’ll be a fantastic introduction to how to have a design career. We’re going to talk about how to get clients, how to tell if they’re the right clients. (If you’re in-house, feel free to replace clients with boss.) We’re gonna talk about how to charge for work, get paid, get paid on time. How to walk into a relationship with confidence. I’ll also teach you why “I don’t know” is the most confident phrase in the English language. But it’s basically a full-day conversation. No weird stuff with post-its.

And I think you get lunch. No ice cream.

Artificial Intelligence: The Norwegian Retreat Tue, 26 Sep 2017 14:59:00 +0000 What happens when a group of 15 Artificial Intelligence experts head to a remote hotel in the western Norwegian mountains?

Firstly, what is Artificial Intelligence?

Indeed, what is it? We, The Humans, find ourselves at a crossroads in time where scifi fantasy is becoming all too real, quicker than we expected it to; self-driving cars, robot companions, quantum computers taking over the stock exchange. What ever could be next? 

If you look at the headlines, the dark-cloud dystopia of ‘artificial intelligence’ is moving in thick and fast; the robots are taking over, robots are replacing us in the workforce - we’re gathering a list and it’s looong. 

Yet when all the headlines are so sensationally dystopian, we so often forget to note that artificial intelligence is already here in so many beneficial guises; particularly in medical equipment. 

Artificial intelligence, it seems, is both an unquantifiable ingredient of technology and a fact of life. The multi-directional evolution of AI makes the subject area difficult to quantify, track or describe succinctly. We need a bit of time and space for that.

Juvet Landscape Hotel

So how do we talk about Artificial Intelligence?

Artificial Intelligence in all its guises, real and imagined has become a fascinating dinner table discussion topic. So we figured it’s important to get people round the dinner table to discuss it.

This meeting of minds at the AI retreat in Norway is an opportunity to re-group, take stock, and chart the domain. In the four days we’re here, we’ll be doing what we can to discover more about the amorphous anatomy of Artificial Intelligence, or discover how it functions as part of the anatomy of… well everything else. 

It’s an opportunity to look soberly at where we’re heading, and a reality-check on where we’ve got to so far. 

If we asked one another ”What does Artificial Intelligence mean to you?” - it feels like the answer would be wildly different every time.

Our next question, if we get to that, might then be:

What are the questions we ought to be asking about AI?”

Location of the Juvet Hotel, backdrop for the film for Ex Machina, Norway


Where better than immersed in nature? Wedged between two mountains in the middle of no-where, Andy Budd has aptly chosen the Juvet Landscape Hotel in Western Norway as the venue for this discussion. Apart from the clear awesomeness of it having been the backdrop for the film Ex Machina, it’s been built with some clear design principles that might serve as inspiration for some of our activities.

I wanted to create a hotel that would not intrude upon nature, but rather exist in harmony with the landscape of which it is a part”. Jensen & Skodvin 

Wish us luck! 


PowerPoint Culture vs. Post-it Culture Fri, 22 Sep 2017 09:48:00 +0000 For the past 30 years, PowerPoint has been the primary unit of strategy within large organisations.

It’s free on most Windows machines, easy to pick up, and easy to share with others. This ubiquity and ease of use has made it invaluable to business leaders everywhere. But all tools leave their own distinctive marks in the material, and PowerPoint is no exception.

PowerPoint decks, for instance, are linear. This encourages a more logical and deductive mode of thinking, resulting in strategies that stay close to the dominant path. There is a beginning, a middle and an end. There are inputs, actions, outputs and success states.  While it’s possible to outline alternate endings, PowerPoint decks almost always fall into a safe and predictable tempo. Left to right, connection to success.

Another feature of PowerPoint is its solitary nature. It encourages strategy to be created and delivered by an individual rather than a group. Strategy therefore becomes one person’s responsibility, before being shared with a wider team for discussion, agreement and implementation. Occasionally decks get passed back and forth, like a game of strategy tennis. As with legal contracts, the last one sent wins out.

As with most digital file formats, PowerPoint decks get lost in email clients and folder systems. Even the most brilliant strategy is pointless if it never gets implemented. So as powerful as PowerPoint is, it’s often where corporate dreams go to die.

An army of Post-it notes

By contrast, Post-it notes are the primary unit of strategy inside design agencies and tech companies. Their flexibility allows you to move things around a 2-dimensional probability space, rather than along a single axis. So rather than following a linear time based narrative, it’s much easier to compare and contrast different concepts, and explore the fuzzy edges of a problem. Post-it culture therefore tends towards abductive thinking and pattern matching, the mode of thinking favoured by designers.

Post-it notes favour collaboration over individual intellect, and “designing in the open” over than planning in private. Post-it strategy therefore has a natural affinity with the Agile software movement, while PowerPoint tends towards waterfall.

Post-it notes have their own challenges. They tend to be low fidelity, temporary and imprecise. They are meaningful for the people involved in the initial activity, but the resulting strategy doesn’t travel well. They’re a great creation tool, but a poor communication tool, at least over distance and time.

Sometimes it feels like these two tools represent two different cultures, at war with each other. PowerPoint represents the dominant, business as usual culture; while Post-its have an anti-establishment, art-school punk kind of vibe. One demonstrates a top down hierarchy, while the other in much more bottom up. One is a traditional land force, the other a guerrilla army.

While I obviously have my preference—I love the smell of sharpies in the morning—both approaches have their benefits and disadvantages. PowerPoint has been ridiculed in a design world for many years, not least because it defaults to ugly. This is why so many designers prefer Keynote, in spite of its lack of corporate uptake. But I’m now starting to see the pendulum swing back in the other direction, with many boards getting sticky note fatigue.

In the war between PowerPoint and Post-it notes, there may be no winners. And yet I can’t help shake the feeling that the design industry would be much better off adopting the language of PowerPoint in the battleground of the corporate conference rooms, even if they secretly Post-it note at home. After all, it’s much easier to infiltrate a dominant culture, than it is to try and topple it from the outside. So if designers really do want to influence corporate strategy, it may be time to lay down our beloved Post-it notes and pick up PowerPoint instead.  

What’s your preference? Are you a Post-it junkie or do you favour a good old-fashioned PowerPoint? We’d love to hear from you - tweet us @andybudd and @clearleft

Leading Design: The Story So Far Sat, 16 Sep 2017 23:00:00 +0000 It was my fourth coffee meeting of the day, and the conversations had fallen into a surprisingly predictable routine. I’d ask my friends how their new job as design leader at XYZ Corp was going, and the answers were the same.

They really enjoyed the job, but were struggling to recruit in such a competitive labour market. When they did find the perfect person, they wouldn’t stay for more than 18 months before moving on.

My friends were also struggling to promote the value of design around the organisation. There was definitely interest. After all, that’s why they had been hired. But with all the interviews, status meetings and 1-to-1s, they barely had time to get a look-in. Especially as the size of their team (and budget) was a fraction of that of IT or marketing, and the weight of executive attention always seemed to go where the money was.

Lastly, they were having a hard time executing at pace. Despite doubling the team’s size, it felt like half as much was getting done. Deadlines were getting missed and the organisation was starting to get antsy. If that wasn’t enough, the team was feeling stressed, so my friends were getting it from both sides.

The reason my friends had got into management was to have a bigger effect than they could do being an individual contributor. However they were starting to understand why their previous manager hadn’t been more effective, and were beginning to second guess their decisions.

As an accidental leader myself (I didn’t set out to run a 30 person design agency), I felt their pain, and have experienced many of the same things. I tried to give the best advice I could, but realised what my friends needed was something more structured. After all, none of us had been trained to be design managers, so we were all making it up as we went along. That’s when I hit upon an idea.

So many of my friends were struggling with the same challenges, what if I bought them all together for a conference? I could invite a range of design leaders from different companies to share their experiences, war stories, tips and failures in the hope of making folks’ lives easier. And that’s how Leading Design was born.

The first conference back in the autumn of 2016 was a huge success, with many attendees coming up to tell me it was exactly what they needed at that point in their careers. This was true whether the person was an experienced VP or taking their first leadership role, so I knew we’d hit a good format.

What can you expect this year?

This year I’m hoping to build on the last, breaking the days down into separate themes.

The first day is all about the individual as leader. What makes a good leader? What skills should a great leader have, and how do you grow this skills into a long and fulfilling career? I also wanted to touch on the topic of self care, as you can’t look after other people if you’re not happy and healthy yourself.

The second day is all about the team. How do you find the right people and nurture their talent? How do you grow the team, and maintain its cohesion, and how do you execute at pace? I also wanted to explore the issue of team culture and organisation structure. What makes a healthy culture, and what makes an unhealthy one?

The first two days are all talks, mixing inspiration with education.

On the final day we switch to practical, hands-on workshops. I want to allow folks to dig into the key topics in more detail. We have sessions from Peter Merholz on organisational design, Julia Whitney on stakeholder management, Alberta Soranzo looking at management principles, and Samantha Soma on the essential elements of great design teams.

I’m really pleased how the schedule has turned out. We have some amazing speakers, keen to share what they’ve learned through leading design at a range of well-known companies like Google, Facebook, IBM, Spotify and the BBC. So this is a great opportunity to learn what works (and what doesn’t) and apply those learnings to your own organisation and team.

You can find all the details on our speakers and schedule at There are still some tickets left, but they’re selling fast, so snap them up before they go. We hope to see you there!

Design Ops — A New Discipline Wed, 06 Sep 2017 08:00:00 +0000 Design Ops is a relatively new term, and one I only discovered six months ago. As soon as I heard it, I knew it would be of growing significance to us, our clients, and the wider design community.

Like all new terms, it’s a way of describing an emerging set of activities and behaviours. These activities aren’t necessarily new; we’ve been practicing elements of Design Ops since we created our first design system and modular code library way back in 2008. So it would be easy to balk at the term, seeing it as little more than an unnecessary buzzword. That’s not my reaction.

While many in our industry dislike the use of terms like UX Designer, Interaction Designer and Product Designer, preferring to drop the qualifier in favour of the more generic Designer, I find the specificity useful. I personally believe in the power of language to encapsulate complex concepts into a small and sharable package, making them accessible to a much wider group of people. The creation of new terms like Design Ops allows for the democratisation of these emerging ideas.

So what exactly is 'Design Ops' then?

Well, as the name suggests, Design Ops is somewhat related to the field of DevOps, which started gaining traction in our industry towards the end of the last decade. Back in 2008, there was often a separation between the people who wrote the code and the people who looked after the infrastructure it was deployed on. As agile started to take hold, and continuous delivery became the norm, this gap started to narrow. In order to increase the speed of delivery, teams required multi-disciplined individuals who could bridge the gap between the production environment and the server, allowing their code to be deployed faster and more efficiently. DevOps was born, and over the last decade, the field has gone from a few talented hackers to a profession with its own tools, techniques and culture.

The field of Design Ops is the result of a similar set of pressures. The rise of agile development has necessitated much tighter integration between design and technology, while recent investment in design—most notably by the big five tech companies—has highlighted the need to figure out how to deliver design at scale. Design Ops is essentially the practice of reducing operational inefficiencies in the design workflow through process and technological advancements. In short it’s about getting design improvements in the hands of your users as quickly and with as little friction as possible.

At first, the effort was focussed on low-hanging fruit. The creation, maintenance, and socialisation of modular design systems and component libraries. These libraries helped encourage consistency, reduce waste, and allowed teams to produce work at a faster rate. The next big challenge was to fit these tools into the design and development workflow, which is why we’ve seen the creation of tools like React Sketch app by the talented Design Ops team at AirBnB. The other big challenge is how to reduce—or even remove—the distance between design and deployment. This is something we’ve been trying to solve with our own Fractal application, which aims to create a bridge between your design language and your technology stack.

It’s worth noting that while Design Ops and DevOps are the result of similar drivers, the practices are considerably different. DevOps obviously has a much stronger bias towards tools and server-based solutions, while Design Ops tends to focus more on the process and operations side of the equation. Some argue that the similarity in names is therefore confusing. I believe this similarity is actually part of its power.

Where does it work best?

While design is starting to get a seat at the table, it’s arguably still a highchair. It’s vital for designers to use every political tool at their disposal. In most organisations, IT has a much bigger voice, and holds more influence than design. This is partly due to the maturity of the field, partly due to the larger head counts in IT, and partly due to the budgets they command. Pitching your language and values to a sympathetic technology department makes a lot of sense. After all, if your CTO understands the value of DevOps, how could they possibly not see the value in Design Ops? Especially when Design Ops will make the lives of their tech teams infinitely less messy and more productive.

It’s worth noting that Design Ops isn’t for everybody. It’s definitely not required at most agencies or single-product companies that do a redesign every 3-4 years. But if you work in a relatively large design team, inside a company that practices agile development and continuous integration, there may be an opportunity for you here. In these environments, the practice of Design Ops often emerges from a single individual—somebody who has noticed inefficiencies in the current system, and has hacked something together in their own time to reduce repetition. Either that or it’ll emerge from the design language team, as they remove the friction and pain points slowing down adoption.

Ultimately, if you’re trying to deliver design at scale, investing in a small Design Ops team will help you deliver better work. Who wouldn’t want that?

How do you see the role of Design Ops influencing the delivery of design at scale? We’d love to hear from you - tweet us @andybudd and @clearleft

Crafting a Vision that Sticks Mon, 04 Sep 2017 08:00:00 +0000 One thing we see time and again with corporate clients is the huge gulf between the leadership’s vision for the company, and what they are actually able to deliver.

In my experience, executive teams almost always have a strong understanding of what they want the company to achieve, and where they want it to be in 12 to 18 months’ time. They’ve arrived at this shared vision tacitly, through dozens of meetings, research projects, consultancy reports, and powerpoint decks; the main unit of delivery in the corporate world.

This vision is then divided into a series of projects and initiatives, which are handed to individual managers to deliver, usually in the form of fixed requirements, hard deadlines, and quarterly targets. By the time these projects reach the delivery teams, they have almost always become disassociated with the vision that’s driving them.

The good, the bad, and the frustrated

Good teams will try and unpick this vision, to reassemble it in a way they understand. This can take a huge amount of time, which the organisation almost always believes is unnecessary. Bad teams will simply deliver these projects, without understanding how they fit into the broader picture. Thousands of decisions will be made along the way, and without a clear framework for making those decisions, the project will be driven in a dozen different directions.

When the project is finished, the executive team will often be left feeling frustrated as the projects took much longer than intended, and failed to meet their potential. In response, the exec team will often implement even stricter management and even more specific requirements to ensure this doesn’t happen again. But of course it always does.

The problem here is twofold. First, the executive team’s vision is almost always tacit. It’s something they understand and think is obvious because they live it every day. They assume that everybody else gets it as well. When the vision is captured and shared, it’s often done through uninspiring powerpoint presentations filled with numbers and management speak. This vision is then broken down further, so by the time it reaches the teams, they only see their part of the puzzle, and lack the bigger picture.

The other part of the challenge is that the vision is often too myopic, focussing on the next quarter or financial year. To craft a really engaging vision, you need to cast 3-6 years out, and demonstrate how the work of each individual team contributes to the overall goal.

Design a solution

Solving both of these problems is relatively simple, although not always easy. It requires a shift from a command and control style approach, to one of situational awareness and command intent. This shifts decision-making to the people on the front line who are better equipped to assess the situation and deliver on the desired outcome that has been set by management. It also requires a certain amount of internal propaganda to help capture hearts and minds.

Fortunately this is something design, and especially design thinking, can help with. Designers are great at understanding complicated problems, mapping them out in a way that makes sense, and then communicating them to different stakeholder groups in an engaging and actionable way. So rather than producing dry powerpoint decks or PDF reports that will be read once and then left at the bottom of your inbox gathering dust, a rich vision can be crafted using all the tools at the designer’s disposal; books, posters, magazines, comics, videos, and more.

We’ve had a lot of success using vision videos at Clearleft; rich visualisations of the products and services you expect to offer in five years time, and what the experience of using those products and services will be like. These vision videos can be backed up with more tangible assets like brand experience books, concept maps, and posters outlining the steps you need to take to reach your vision, along with the values and guidelines you’ll use to help you along the way. Even the humble and much-maligned persona can help organisations gain a better understanding of who they are serving and how they can serve them better.

As businesses move away from the traditional command and control approach to management, and towards a process of command intent, leadership teams will increasingly focus on communicating a rich vision and set of values the entire organisation can get behind. When this happens, delivery teams will be in a much better position to make decisions that align with the vision, rather than wasting energy trying to guess what managers want, and spending all their time pleasing managers, rather than delivering true business outcomes.

How do you craft your vision, from inception through to delivery? We’d love to hear from you - tweet us @andybudd and @clearleft

Short term vs. Long term revenue Wed, 30 Aug 2017 08:00:00 +0000 The rational economist would like to think that most of us would choose £100 next month over £90 today. Yet study after study has shown that humans crave instant gratification.

We’re literally hardwired–in a behaviour sense—to favour short term, immediate gain over longer term benefits.

This is why we prefer sugary snacks to eating our greens, why we prefer buying that stereo over investing in our pension, and why we’ll put off going to the gym in favour of completing the latest boxset. It’s also why many companies prioritise quarterly revenue over longer term investments.

There are lots of reasons why this happens; the need to maintain cash flow, the desire to please shareholders, and the need to hit our yearly bonus. It seems like everything is encouraging us to prioritise short term gain.

These days, few people stay with their company for longer than a couple of years, with CEO tenures falling to an all time low. In light of this, it’s unsurprising that people want to get as much out of a situation while they can, rather than investing their time and effort into things that will pay off only once they’ve left. After all, you get the behaviour you incentivise against.

This problem is especially pronounced in publicly traded companies, where shareholders want instant gratification. It’s also one of the reasons why the lifespan of S&P 500 index companies has plummeted from 67 years in the 1920s to just 15 years today.

By comparison, some of the longest running, and most stable companies come from places like Germany and Japan. These companies are owned by private individuals and are often passed down through the generations, so there is a strong drive to invest in the future.

A few novel ideas have been floated to combat this trend, like paying out CEO bonuses over a much longer period, or offering shares that take 10 years to vest. Both these mechanisms are meant to encourage leaders to place long bets as well as short ones. After all, every good portfolio needs to balance a certain amount of risk.

I see this problem in the digital space all the time. Companies put the bulk of their investment in short term improvements, at the cost of longer term value. Shoring up old IT systems rather than investing in new ones; spending huge amounts on customer acquisition, rather than dealing with churn; focussing on incremental improvements rather than looking for that next potential revenue stream.

Companies often get so caught up placing short term bets, they forget to place medium or long term ones as well. When they do place longer term bets, they often go all in, rather than spreading their risk.

Balance here is obviously key, and every company has its own risk profile. I’d like to see more companies apportioning around 60% of digital budgets on business as usual and other short term wins, 30% on slightly longer term experiments that may take 18 months to hit the backlog, and the last 10% on long shots and moon shots, which may take 3+ years to develop into something meaningful, but could eventually be that company’s next big profit centre.

By looking at projects through this lens of Now, Next, and Future, companies can diversify their portfolio, ensuring they don’t keep all their eggs in the same basket, and they spread the risk a little more.

How does your company address the balance of short term vs. long term revenue? We’d love to hear from you - tweet us @andybudd and @clearleft

Who’s in charge here? Leadership in non-hierarchical collaboration. Fri, 25 Aug 2017 12:18:55 +0000 Today I was working with a visual designer, a developer, a charity’s campaigns manager, a UXer and a project manager on a web page for a series of podcasts with celebrities. ​I’m a content strategist, but today I was wearing my Information Architecture hat. An eclectic bunch.

The interesting thing about this piece of design work is that none of us are ‘leading’ it, or all of us are leading it. The leadership is equally distributed (nice). But it is unspoken (risky). 

If you work in a project-based line of work, like in my agency life, you might have experienced how ‘leadership’ sometimes feels like an ambient term that hangs around waiting for a definition - or for someone to claim it. It’s particularly great when it finds it’s own way, organically employing itself evenly across the team: decisions happen and the weight of responsibility is divided. It feels good. Sometimes it can be equally comforting to have a single leader emerge, and then follow their vision.

But I get the feeling that you and I like to be a little more certain than that. Perhaps even more calculated about it. We like to know how a team is going to look from the outset of a project. 

When the stakes are high, when the enthusiasm is filling the room or when you have a group of experts who are feeling competitive, establishing leadership could descend into a monkey-like struggle to establish hierarchy - get in there quick!

There’s a healthy way to do this.

Whether you think you need leadership or not, it’s important to acknowledge the question of “Who is in charge, and how” with your team - which means discussing it in the open and documenting it. 

Many teams make the assumption that looking for leadership means they’re looking for a single person to be in charge. But leadership can be distributed, particularly in teams where innovation and creativity is key to their remit. 

Establishing leadership is effectively the same as asking the question “How are we going to make decisions and resolve any conflicts that may come up?” 

You could try actively distributing leadership across the team. Instead of thinking of one accountable person, think about putting various people ‘in charge’ of aspects of your collaboration. 

Here are some creative and not-so creative ideas for roles that could help you define a distributed leadership in your project team:

  • The key stakeholder - the person who gives the green light at various pre-defined project stages, they have the final say or the vito on decisions that need to be made.
  • The manager of logistics - scheduling, meeting arrangements, and other day to day housekeeping such as being in charge of the use of the budget, and how people use their time.
  • The expert lens - you need to be careful with this one. If your team has many experts on it, allocate certain times when the experts are allowed to lead with their lens on a problem.  
  • The outside eye - this person may stand in the shoes of the end user or the audience you are working with and make sure you craft the work to meet their wants and needs, they might be an ambassador for any principles you need to uphold. 
  • The facilitator - this person helps you make progress in your work by drawing out ideas, and by asking questions. They may also keep an eye on the agenda and make sure you’re not veering off course. 
  • The buddy - This person’s role is to support people in the team either in terms of their well-being, or as a person who offers a second opinion.

I’d be interested in other kinds of leadership that teams might require. Let me know on twitter @eldevri if you have any ideas.

My next Webinar on Collaboration techniques is with Gather Content on the 12th of September 16:00 until 17:30 (BST, London Time). 

And speaking of leadership, tickets are still available for Leading Design our annual conference in London, 25-27 October 2017. 

Now, Next, Future: Multi-Modal Product Management Thu, 24 Aug 2017 09:02:00 +0000 ​Most organisations view themselves as a single immutable object, rather than a complex system of different cultures and pace layers.

When large organizations attempt to transform themselves, they try to do it wholesale. This often leads to significant push-back, with the more risk-averse departments slowing or derailing the process entirely.

Is it any wonder? Those departments have spent their whole lives being evaluated and remunerated on one basis. It’s shaped the people they hire, the processes they have in place, and their judgment of what success looks like. It’s very difficult to change this cultural behaviour overnight, assuming it even needs changing. A good example of this is corporate IT.

For many years, the IT department ran the computers and servers on which you did your work. Later they also ran the infrastructure that your digital products and services ran on. If one of those systems went down, it could cost the company millions in lost income or productivity, not to mention the effect it would have on the CTO’s bonus. Corporate IT infrastructure has always been fairly conservative in nature.

Then along comes Lean Product Development, an approach that tries to deal with market uncertainty through rapid experimentation and learning. Trying to incubate a fail-fast culture inside one of your most risk averse departments was never going to be easy. This is one of the reasons so many large companies have struggled to introduce agile into an environment optimised to avoid failure, and have ended up with something remarkably (fr)agile as a result.

In the past few years we’ve seen the emergence of Bimodal IT, as popularised by Gartner. This model separates IT activities into two different types of work; one typified by predictability and uptime, the other based around unpredictability and experimentation.

There has been an awful lot of backlash to this approach, much of which is justified. But a lot of the criticism comes from high-performing teams in mature tech companies that don’t need to worry about digital transformation because they’re already on the other side. The arguments are often as much philosophical as they are practical. And with real digital transformation projects taking upwards of seven years, it’s a little too early to genuinely gauge the results.

Whatever happens on the technical side of things, I think it makes a lot of sense to divide your digital products and initiatives into conceptual pace layers—multi-modal product management if you will. Mature products that generate the bulk of your income need to be treated differently to fledgling products still looking to gain traction. Similarly, early stage experiments need to be treated differently to products still exploring product market fit.

Mature product teams need to be stacked with people focussed on scalability, operational efficiency, and incremental improvements. In these environments performance and uptime are critical, new product features need to be well considered, and quant will almost certainly overshadow qual. The most successful products will be making good money, and will therefore need product managers with a strong commercial focus. In the pioneers, settlers and town-planners model, mature teams need a good mix of the last two.  

By comparison, early-stage teams will need to be stacked with hackers and experimenters. It doesn’t really matter if code is well formed or the platform scales, as it will probably be thrown away and rebuilt. Qualitative insight will be much more useful than quantitative, and learnings are prioritised over commercial success. In this situation, the product managers are more likely to come from a UX or tech background, and have worked in early stage startups before. Think mostly pioneers with a couple of settlers or town planners steering the ship.

Fledgling products are often the least understood or properly managed. These are the products that have proved there’s a market, but are a few years away from turning a healthy profit. This class of product needs people who can help explore new feature sets, attract new customers, and grow the revenue. The team needs to be a mix of pioneers and settlers, with a few town planners thrown in to preempt their scaling needs, while the product manager needs to be entrepreneurial.

An easy way to divide up these products is the concept of now, next and future. As the name suggests, the now class of products tends to be where the organisation is placing its attention and getting the bulk of its revenue. Now products tend to have a six-week time horizon. The next class of products is where you hope to be getting your future revenue from. Some of these initiatives will succeed, while others will fail. You should get a good read on these products between six and eighteen months. Lastly the future products are the long bets. The majority of these won’t pan out, but the ones that do will eventually be elevated into the next category. These products tend to have a time horizon of three to six years, allowing you to think about your now, next and future product streams in six week, six month or six year investment cycles.

So perhaps you like the now, next and future concept. Or you might prefer to think in terms of six weeks, six months or six years. Or you may well have some other way of breaking down your product portfolio.

Whatever your way of thinking, a multi-modal approach will help you separate the inevitable pace layers that will form between your products, and ensure you have the right teams in place to support where your products are in their natural lifecycle.

What do you think of the ‘now, next and future’ concept? We’d love to hear from you - tweet us @andybudd and @clearleft

The usability of deliverables Tue, 22 Aug 2017 15:51:21 +0000 Ever felt like you were churning out paperwork like one of those monkeys at typewriters in the Simpsons?

On some projects I’ve witnessed, people fall into the unfortunate habit of producing lots of documentation - that which simply overwhelms anyone new who is trying to wrap their head around what’s actually going on. Yes, it’s sometimes necessary to get busy with breadth and detail, especially on a big project. But we must never lose sight of how much context might be necessary to understand our work from the outside.

It’s for this reason that some years ago I started doing simpler walkthroughs, and ones aimed not as design documentation for developers or decision-makers, just as simple explanations of the product and its raison-d’etre.

Think of it as a walkthrough plus context. A bit of persona (the who and the why are they doing it), and the what (what happens, and what benefit they derive from it).

The Clearleft 'crate'

At Clearleft we’ve had a concept for many years of handing over a ‘crate’ — a mini website (password-protected) with the key context for the project, and links to web resources that form the deliverables. By doing so, the client knows there’s one place to look. And there’s the added and very practical bonus that if anyone new joins the team client-side, or simply wants to know what’s going on, they can come in and get up to speed quickly.

(Aside: our methods for making component libraries have been put into a tool we built called Fractal, which is now used by 18F and Eurostar - a deliverable with an even longer lifespan.)

The devil can be the detail

The opposite of all this is when there’s nothing but endlessly detailed documents — spreadsheets, reports, and nothing that comes close to a concise explanation, let alone a value proposition for whatever is being proposed. And they’re only useful when you know where to look to find them, which is a problem in itself when you consider things like staff turnover. All too often we ask people to get lost in a forest without a map. 

This often happens when you know too much. You’ve been working on a thing for weeks on months, you know all of the basics, you’re too close to it. Along come the assumptions, ones that you can’t count on others to understand.

Merging the forest with the trees

Much as I’m advocating ways to prevent people getting lost in the forest, sometimes the trees is what they need. The details are the design, after all. So how can we usefully combine the two? This is a big topic all of it’s own, but I find the following universal design principles have been consistently useful.

Advance organiser and the inverted pyramid

David Ausubel’s learning concept is that the big picture comes before the details, that detailed information should be chunked up later, and that in many cases starting with what people already know (comparative knowledge) is a great starting point.

The inverted pyramid is a concept from journalism that echoes this idea - put the why/when/where/what at the beginning, and order everything else in terms of importance. 

(Both of these concepts are detailed in ‘Universal Principles of Design’.)

It’s our job as designers to find the right levels of detail in the right context. To tell stories, to inspire, to clarify if people are understanding what’s being communicated, and most of all, make it usable. People shouldn’t be left guessing as to where understanding lies — be the invisible force that gets people on the same page, using your powers of design.

This is an edited version of a post originally published on Ben Sauer’s Slapdashery blog, here

Design Sprints Done Right Thu, 17 Aug 2017 15:48:00 +0000 Tips for making the most out of the design sprint process.

We’ve been huge fans of the Google Ventures style design sprint since reading the early posts about them way back in 2012. We were excited to have Daniel and Jake deliver a design sprint workshop and presentation at UX London 2014, and we were thrilled when Jake’s Sprint Book started popping up in airport bookstores around the world.

For the uninitiated, a design sprint is a week-long collaborative design exercise, aimed at solving a small but well defined problem. A good example could be improving your product sign-up page, although Google Ventures have used design sprints for everything from creating a new coffee website through to prototyping a hotel robot butler.

The process uses a range of common design tools like customer interviews, user journey mapping, paper prototyping and dot voting. But rather than being spread over a typical six-week discovery period, the process is compressed into five days.

The week is broken down into distinct phases—understand, sketch, decide, prototype, and validate. If you’re familiar with the double diamond process, you’ll notice the similarities. By the end of day five the goal is to have iterated through a series of possible solutions, picked a likely candidate, tested the concept on real people, and have developed a strong candidate for further exploration.

Working this way is highly efficient, and a lot of fun. It’s a great way for teams to swarm around a particular design problem. Because it requires a high degree of collaboration, it’s also a great way of exposing your stakeholders to the intricacies of the design process. But design sprints can be exhausting, and they aren’t suitable for every occasion, so they do come with a bit of a health warning. Here are five tips to get the most out of your next design sprint.

  1. Pick the right project. You can get a surprising amount done in a week, but you can’t boil the ocean. Prototyping a simple e-commerce store is possible. Redesigning Amazon from the ground up probably isn’t. Knowing what’s achievable and what isn’t comes with practice, so start small and manage expectations. My recent blog post The Design Sprint Hammer takes a closer look at how to decide - to sprint, or not to sprint?  

  2. Pick the right team. Design sprints provide a great framework within which high-performance teams can excel. But it’s not some magic process and you can’t weave gold out of straw. So pick your team carefully, and make sure there’s a good balance between experienced designers and domain experts. 

  3. Embrace uncertainty. Moving this fast inevitably requires compromise. The team needs to be comfortable working with a high degree of uncertainty and needs to understand that not every problem will find a solution. Stack the deck with people who default to action and have a “yes-and” attitude. Nothing saps the energy and momentum of a design sprint more than the quest for perfect knowledge.

  4. Make a post-sprint plan. There is no guarantee that a design sprint will result in the ideal solution, so don’t put all your eggs in one basket. A good design sprint is the start of the design process, not a Hail Mary pass. Make sure you allocate enough time after the sprint to drive the work home.

  5. Look after your team. Design sprints can be hugely exhausting, so make sure you give your team some space to recoup. Chaining one design sprint after another may sound like a good idea, but it isn’t sustainable. In fact it’s the fastest way to break your team.

In short, design sprints are a great way to break the back of a tricky design problem, as part of a healthy and well-balanced design diet. Understanding what happens after a successful design sprint turns a fun exercise into a valuable tool in your problem-solving toolkit.

Jake Knapp is running a now sold out Design Sprint Workshop in partnership with Clearleft in London on the 7th September - add your name to the waiting list here. If you’d like to run a design sprint of your own, talk to us about design sprint facilitation.