Clearleft | Blog https://clearleft.com/posts/ The latest news from Clearleft en-gb Mon, 23 Oct 2017 14:43:02 +0000 Mon, 23 Oct 2017 14:43:02 +0000 Introducing 'Voice Guidelines': for all your voice UI design needs https://clearleft.com/posts/501 Mon, 23 Oct 2017 08:00:00 +0000 https://clearleft.com/posts/501 Introducing voiceguidelines.clearleft.com: a collated set of guidelines for designers to quickly learn about creating voice interfaces.

https://voiceguidelines.clearleft.com

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 principles.adactio.com - an excellent resource for any team to start thinking about how to sum up what drives them. 

I hope https://voiceguidelines.clearleft.com 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 ben@clearleft.com

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 https://clearleft.com/posts/507 Sun, 22 Oct 2017 22:37:00 +0000 https://clearleft.com/posts/507 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

Performance

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 https://clearleft.com/posts/505 Fri, 20 Oct 2017 07:41:00 +0000 https://clearleft.com/posts/505 This post was written 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. 

THE RISE OF DIGITAL SERVICES.

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.

EXPLORING THE SHARED SPACE.

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

UX DESIGN & SERVICE DESIGN COMPARISON.

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

A WIDER COMPARISON.

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

http://servicedesigntools.org/ http://liveworkstudio.com/tool… http://nform.com/cards

]]>
Super simple estimation https://clearleft.com/posts/503 Wed, 18 Oct 2017 15:09:00 +0000 https://clearleft.com/posts/503 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 https://clearleft.com/posts/502 Wed, 11 Oct 2017 08:38:00 +0000 https://clearleft.com/posts/502 ‘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 chris@clearleft.com

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 https://clearleft.com/posts/500 Thu, 05 Oct 2017 12:14:00 +0000 https://clearleft.com/posts/500 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. https://clearleft.com/posts/499 Fri, 29 Sep 2017 15:28:00 +0000 https://clearleft.com/posts/499 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. https://clearleft.com/posts/498 Thu, 28 Sep 2017 12:44:00 +0000 https://clearleft.com/posts/498 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. Futurescouts.co.

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 https://clearleft.com/posts/497 Wed, 27 Sep 2017 14:01:00 +0000 https://clearleft.com/posts/497 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 chris@clearleft.com

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 https://clearleft.com/posts/496 Wed, 27 Sep 2017 09:35:00 +0000 https://clearleft.com/posts/496 Our next Clearleft Presents event is packed with knowledge and insights that you can’t afford to not to know. Intrigued?

The workshop, Design is a Job, will be run by award-winning speaker, author, and co-founder (with Erika Hall) of Mule Design, Mike Monteiro. We caught up with Mike 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 https://clearleft.com/posts/495 Tue, 26 Sep 2017 14:59:00 +0000 https://clearleft.com/posts/495 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?

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! 

#AIretreat

]]>
PowerPoint Culture vs. Post-it Culture https://clearleft.com/posts/494 Fri, 22 Sep 2017 09:48:00 +0000 https://clearleft.com/posts/494 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 https://clearleft.com/posts/493 Sat, 16 Sep 2017 23:00:00 +0000 https://clearleft.com/posts/493 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 www.leadingdesignconf.com. 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 https://clearleft.com/posts/491 Wed, 06 Sep 2017 08:00:00 +0000 https://clearleft.com/posts/491 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 https://clearleft.com/posts/489 Mon, 04 Sep 2017 08:00:00 +0000 https://clearleft.com/posts/489 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 https://clearleft.com/posts/488 Wed, 30 Aug 2017 08:00:00 +0000 https://clearleft.com/posts/488 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. https://clearleft.com/posts/492 Fri, 25 Aug 2017 12:18:55 +0000 https://clearleft.com/posts/492 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 https://clearleft.com/posts/487 Thu, 24 Aug 2017 09:02:00 +0000 https://clearleft.com/posts/487 ​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 https://clearleft.com/posts/486 Tue, 22 Aug 2017 15:51:21 +0000 https://clearleft.com/posts/486 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 https://clearleft.com/posts/485 Thu, 17 Aug 2017 15:48:00 +0000 https://clearleft.com/posts/485 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.

]]>
Business Transformation — We've been here before https://clearleft.com/posts/484 Wed, 09 Aug 2017 14:38:00 +0000 https://clearleft.com/posts/484 I was recently listening to a podcast interview with the former CEO of BP, John Browne. He explained how British business was forced to go through a massive transformation in the 60s and 70s to catch up with growing international competition.

Prior to this transformation, Lord Browne claimed that most UK businesses were run by “talented amateurs”—people who landed senior positions based on the universities they studied at, or the roles they inhabited during the war. These were obviously smart and talented people, but they had very little knowledge or experience in the specific domains they were hired to perform. So you’d have ex army officers running technology departments, or classics majors looking after procurement.

This approach would have carried on for a long time—and if you currently work in a traditional business you may still see echoes of this industrial age thinking—had globalisation not put an end to this.

Lord Browne explained how increasing pressure from US companies forced the UK to go through a dramatic period of transformation, getting rid of professional managers and bringing in talented and knowledgeable experts. Over a 20 year period, British business became a lot more efficient, and was able to compete in a global market again.

Listening to this podcast, I couldn’t help but see echoes in the current phase of business transformation. Businesses in the UK and around the world are again finding themselves under heavy competition from American companies—this time in the tech sector.

These companies have ditched the traditional corporate hierarchy, in favour of self-organising pods that focus on solving specific problems with laser accuracy. These pods are filled with talented experts, and given the autonomy to solve the problem in the most effective way, with mantras like “fail fast” and “outcomes not outputs”. The managers are there to support and facilitate, rather than to direct or punish when things go wrong.

Many UK companies are going through a process of business transformation, led by the the opportunities presented by digital technology. The majority of these companies are focussing on mode one digital transformation; simply automating once manual processes. This is low hanging fruit, but the REAL opportunities are in mode two digital transformation; adopting the culture and practices of successful technology companies.

Side note: for more on the two modes of digital transformation, have a read of my recent blog post on the subject.

Unfortunately changing culture is a lot harder, and takes a lot longer, than simply buying and installing some now software tools. It’s also very difficult to move from a command and control mentality to one of command intent, when those commanders are the ones leading the change and have everything to lose from a truly successful transformation.


How do you see digital transformation influencing business transformation? We’d love to hear from you - tweet us @andybudd and @clearleft

]]>
Guest blogger Jake Knapp: How I got hooked on workshops https://clearleft.com/posts/483 Mon, 07 Aug 2017 07:44:00 +0000 https://clearleft.com/posts/483 Back in 2014, I got the opportunity to speak at the UX London conference. At the time, I was trying to spread the word about an idea I called a “design sprint”—a five day process where a team goes from a big challenge with open questions on Monday to a tested prototype by Friday.

So my buddy Daniel Burka and I were planning our talk, and the folks at Clearleft—who organized the conference—asked if we would teach a workshop as well. A workshop for up to 80 people. 80! We normally ran sprints with no more than six or eight.

Obviously, the fine folks at Clearleft were nuts. But they’re really polite, so in the end we said yes.

Still, it did sound crazy. We honestly weren’t sure if such a large workshop was possible. We planned it out, minute by minute, hour by hour. Revised and re-revised. But how could we fit days of activities into just a few hours?

It worked. In fact, it not only worked, but for months afterward, we heard from people who had attended the workshop, gone back to their teams, and run successful sprints.

Thinking back, I realized why the workshop format was so effective. With a talk, you can tell people about an idea, or if you do an amazing job, show the idea and get them to feel it. But in a workshop, people live the idea. They get muscle memory. I guess it’s obvious, but for me, this came as a surprise.

When I tried to teach the design sprint method (first through blogs, then talks, then videos, and finally a book) I was asking people to do something really hard: to go back to their team and convince them to clear their calendars for a week, shut their laptops, put away their phones, and then follow this step-by-step checklist—all on faith. I was saying “I’m telling you this will work, please trust me.”

But with a workshop, I realized, I could compress time and take people through the actual experience of being on a team going through a design sprint. I could say “Here, let’s do a sprint together, right now.” This way, when they went back to work, they’d already have a sprint under their belt.

Now, three years later, the roles are reversed: I got in touch with Clearleft to ask if they would help me put on a big workshop. They said yes—as I mentioned, they’re really polite. We decided to make the workshop accessible for as many folk as possible, opting for an even 100. As I write there are only 11 tickets left, so I invite you to snap one up and come and join the craziness at our Design Sprint Workshop, part of the Clearleft Presents series, on Thursday, September 7.

P.S. The Clearleft folks found an amazing venue for the workshop, but it’s a secret… you can only find out where it is (somewhere on the South Bank) and why it’s so cool (they have, how should I put this… a really nice collection of wall decorations) if you go to this page and click “Tickets on sale now”.

I hope to see you there!

Join us for Clearleft Presents Jake Knapp: Design Sprint Workshop in London on 7th September - find out more and book your tickets here.

This post was written by our guest blogger, Jake Knapp, bestselling author of Sprint. Follow Jake on Twitter @jakek.

]]>
Sticky Note Fatigue and the Fog of Knowledge https://clearleft.com/posts/482 Wed, 02 Aug 2017 11:42:00 +0000 https://clearleft.com/posts/482 I’m starting to see a slightly disturbing trend in our interactions with senior leadership teams, which I’m calling sticky note fatigue.

We UX strategists love our sticky notes, and will use every opportunity to bust open a new pad and start visualising our discussions. It’s how we make sense of complex problems, and is a key part of abductive thinking.

This used to be a fairly unusual approach, with exec teams loving the novelty of design games and co-creation exercises. But the popularity of design thinking has seen more traditional consultancies adopt these tools, often fairly haphazardly.

Not another sticky note...

We’ve started to see increasing pushback when we pull out the sharpies and sticky notes. There’s a growing sense of fatigue. “Not another sticky note exercise!” They’ve done a bunch of these exercises with other consultancies, but things haven’t changed. They want answers rather than more questions. They want agencies who will tell them what to do, rather than going over the same well-trodden ground.

A big part of the problem is framing. If the people around the table expect to see an immediate benefit from such exercises, they are likely to be disappointed when it doesn’t provide them with new insights or information.

In truth, these exercises are rarely for the benefit of the client—at least not immediately. Instead they are a means for design teams to understand the problem and present it back to the client in order to build consensus. “This is the problem you have, these are the challenges we all agree you face, and this is where we’re going to devote our efforts.” In this situation the agency is the immediate beneficiary. The client only benefits once synthesis has happened.

Another challenge is confusing the map for the territory, or in this case the activity for the insights. Not all sticky note exercises are created equal. It’s not the sticky notes themselves to blame, but the people who use them badly.

Sticky notes upon sticky notes!

The fog of knowledge

This problem is compounded by what I’ve started to call the fog of knowledge. The fog of knowledge is made up of two component parts. First, as we gain more and more experience as practitioners, knowledge that was once explicit becomes tacit. It becomes increasingly difficult to communicate what we’re doing or why we’re doing it, because the answers will become clear further down the line. This is another key part of abductive thinking. But this fuzziness and unwillingness to commit can be incredibly frustrating to the type of inductive or deductive thinkers that dominate the boardroom.

At the same time, UX designers have an infuriating habit of asking lots of questions without providing too many answers. So we’ll use the ‘five whys’ to get to the bottom of the problem. We’ll constantly look to the next biggest context to understand the problem we’re solving; understand the room to design the chair; understanding the house to design the room.

The longer we’ve been doing this work, the further we tend to zoom out. But for the client who is expecting you to design a chair, talking about town planning can feel like a frustrating waste of time.

At some point you can zoom out too far to be helpful, and rather than solving the problem, you’re left with fear, uncertainty and doubt. Having perfect information seems like a good idea. Yet we struggle under the weight of too much information, not knowing what to prioritise and when. Too much information quickly becomes an inhibitor to progress. This is the fog of knowledge.

At some point you need to stop asking questions and running sticky note exercises. Sometimes you just need to start designing the damned thing. If there’s one lesson we can take from Lean UX it’s this; you can often learn more from a bad first prototype than you can from any number of sticky note exercises.


What do you think about sticky note fatigue and how do you deal with the fog of knowledge? We’d love to hear from you - tweet us @andybudd and @clearleft

]]>
Local HTTPS https://clearleft.com/posts/481 Fri, 28 Jul 2017 12:06:16 +0000 https://clearleft.com/posts/481 I’m not going to extol the virtues of encrypting your site and enabling HTTP/2. The advantages should be pretty obvious by now.

The real issue is that when you’ve got your site(s) and your clients’ site(s) encrypted, you’re left with local development versions of the sites which are now at odds with the live version. And it’s always best to mirror your dev and live environments as much as possible to avoid those last-minute deployment panics. Like when I deployed the all-new Clearleft site only to find I hadn’t updated the image links to HTTPS so none of them loaded. Queue a frantic 10 minutes of find and replace throughout the site templates while people were telling me the site was b0rked. Fun times.

The solution, therefore, is to get your local development environment serving up secure sites. What follows is an amalgam of information found in this excellent post, this stackoverflow response and the code from Laravel Valet. All kudos goes to them. Laravel Valet looks like a really interesting and simple way to set up a local Mac development environment anyway. I encourage checking it out if you want fewer headaches.

I should point out that at Clearleft we use Vagrant and VirtualBox to manage a Ubuntu devbox server on each of our machines which serves our development sites from. But these steps should work directly on a Mac.

Enough waffle, more code

First you need a SAN conf file.

[ req ]

default_bits        = 2048
default_keyfile     = server-key.pem
distinguished_name  = subject
req_extensions      = req_ext
x509_extensions     = x509_ext
string_mask         = utf8only
prompt              = no

[ subject ]

C   = UK
ST  = VA
L   = Brighton
O   = Clearleft
OU  = Dev
CN  = example.com

[ x509_ext ]

subjectKeyIdentifier   = hash
authorityKeyIdentifier = keyid,issuer

basicConstraints       = CA:FALSE
keyUsage               = digitalSignature, keyEncipherment
subjectAltName         = @alternate_names
nsComment              = "OpenSSL Generated Certificate"

[ req_ext ]

subjectKeyIdentifier = hash

basicConstraints     = CA:FALSE
keyUsage             = digitalSignature, keyEncipherment
subjectAltName       = @alternate_names
nsComment            = "OpenSSL Generated Certificate"

[ alternate_names ]

DNS.1               = example.com
DNS.2               = subdomain.example.com
DNS.3               = anotherexample.com

I believe you can use one file and simply list all your domains to have one all-encompassing certificate for all sites, but I can’t verify that and I prefer having a conf file per site anyway.

Most of the information in there doesn’t need to be touched. The actual values can be dummy data. I do recommend changing

CN  = example.com

to your site’s domain though, for reasons we’ll see later.

What needs to change is the alternate names:

[ alternate_names ]

DNS.1               = example.com
DNS.2               = subdomain.example.com
DNS.3               = anotherexample.com

Here, you make sure there is a DNS.1 = yourdomain.dev and then if you need to access the site by another url/tld or subdomain, then add those in too, incrementing the number as you go.

Put that file somewhere on your system. Save it as openssl.conf, san.conf or even domain.dev.conf or something along those lines. Next we create a self-signed certificate with openssl. This is where the certificate process can be confusing. I still don’t fully understand it but the following works, so I’m sticking with it.

openssl req -config "/path/to/san-conf-file.conf" -new -sha256 -newkey rsa:2048 -nodes -keyout "/path/to/private-key-output-file.key" -x509 -days 365 -out "/path/to/certificate-file.crt"

This will create the two necessary files, the certificate file and the private key file which you then need to add to your site’s conf file in Apache or nginx or whatever you use. Here’s an example of our site:

server {
    listen 443 ssl http2;

    server_name clearleft.dev;

    ssl_certificate     /path/to/clearleft.dev.crt;
    ssl_certificate_key /path/to/clearleft.dev.key;

    //...

Restart your server and you will now have your site serving up an encrypted local version! However… If you browse to your dev site you will get a big fat privacy warning. At this point you may be able to get away with clicking a link or two and telling the browser to accept this unsigned certificate and be on your merry way. But I can’t guarantee that. Instead, we can get your certificate ‘trusted’ by your system and then your site will load up just fine.

To do that, get your certificate file accessible by your Mac, so if you created it on a virtual machine then copy it from the VM to your machine first. Then you can use the OSX’s terminal command security to trust that certificate with:

sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain "/path/to/certificate-file.crt"

And as if by magic, you can now browse your secure site! (If you can’t be sure to hard refresh the site or browse with dev tools open. If you got the warning on first visit the browser often remembers).

And we can see that if you open Keychain

This is where changing the CN value was useful, Now you can see which domain each certificate is responsible for.

If you need to revoke the certificate, then you can run

sudo security delete-certificate -c "yourdomain.dev" /Library/Keychains/System.keychain -t

Lovely. My advice is to wrap all that up in whatever scripting language you fancy.

originally posted on my blog

]]>
There are two types of digital transformation and they're not necessarily compatible https://clearleft.com/posts/480 Wed, 26 Jul 2017 08:00:00 +0000 https://clearleft.com/posts/480 There’s been a lot of talk in corporate circles around digital transformation of late. When I find myself in these conversations, it often feels like people are talking at cross-purposes. Recently I discovered the reasons why.

It turns out there are really two forms of digital transformation taking place at the moment, and it’s not always clear which version people are embarking on. Often they’re not clear themselves. 

Mode one

The type of digital transformation favoured by large IT consultancies and ops teams is known (rather unimaginatively) as mode one digital transformation. This form of digital transformation focuses on taking traditional analog processes and digitising them. This effectively means moving processes from people and paper, to data and screens. A lot of the conversations revolve around IT procurement; buying systems to digitise and store existing paper based information, or tie existing back-office functions together.

To digital natives like myself, this feels like a no-brainer. In fact it’s the type of thing I generally thought had happened 10 or 15 years ago, so I’m constantly surprised when I see whole departments spending their days moving paper around. It’s clear that this type of transformation is needed, and can provide huge savings, especially in stagnant or shrinking markets where operational efficiency is key.

Mode Two

The other form of digital transformation, is the one that is of more interest and relevance to me and companies like Clearleft. Mode two digital transformation takes the tools, techniques, behaviours, attitudes and culture of truly digital companies, and applies them to traditional businesses.

This involves building up digital skills in-house, rather than looking at buying in products or services. It involves applying digital service design and design thinking to human problems, rather than trying to purchase your way out of the problem with IT systems. And it involves changing the culture of the organisations, from the people they hire, through to the way projects are organised, run and delivered.

Mode two is much harder, as it requires long term culture change. It’s also the type of transformation that will pay much deeper dividends in the future, not simply just by reducing costs, but by building the internal capabilities businesses need to create the new ideas and revenue streams of the future.

The merits of bimodal

Mode one and mode two transformation require fundamentally different approaches, so trying to tackle them in the same way is a recipe for disaster. This is one reason why a bimodal approach to digital transformation has been gaining traction of late.

In the bimodal model, you have one team of people, usually the IT and operations teams, focussing on delivering and improving core IT infrastructure—the type of services which require a high degree of services and are generally business critical.

You then have a second team using a combination of lean product management and design thinking to rapidly prototype and deliver new products, services, revenue streams and business improvements.  

By separating your digital transformation programme into two separate streams, a new culture and way of thinking can incubate inside a dominant culture, where it would otherwise be snuffed out. This approach makes a lot of sense, but with transformation projects typically taking seven or more years, we’re still a long way off from knowing whether this model works.


If you’d like to join the conversation about digital transformation, we’d love to hear from you - tweet us @andybudd and @clearleft

]]>
Putting on a conference https://clearleft.com/posts/479 Mon, 24 Jul 2017 11:57:00 +0000 https://clearleft.com/posts/479 It’s been a few weeks now since Patterns Day and I’m still buzzing from it. I might be biased, but I think it was a great success all ‘round—for attendees, for speakers, and for us at Clearleft organising the event.

It’s been a few weeks now since Patterns Day and I’m still buzzing from it. I might be biased, but I think it was a great success all ‘round—for attendees, for I first had the idea for Patterns Day quite a while back. To turn the idea into reality meant running some numbers. Patterns Day wouldn’t have been possible without Alis. She did all the logistical work—the hard stuff—which freed me up to concentrate on the line-up. I started to think about who I could invite to speak, and at the same time, started looking for a venue.

I knew from the start that I wanted it to be one-day single-track conference in Brighton, much like Responsive Day Out. I knew I wouldn’t be able to use the Corn Exchange again—there’s extensive rebuilding going on there this year. I put together a shortlist of Brighton venues and Alis investigated their capacities and costs, but to be honest, I knew that I wanted to have it in the Duke Of York’s. I love that place, and I knew from attending FFconf that it makes for an excellent conference venue.

The seating capacity of the Duke Of York’s is quite a bit less than the Corn Exchange, so I knew the ticket price would have to be higher than that of Responsive Day Out. The Duke Of York’s isn’t cheap to rent for the day either (but worth every penny).

To calculate the ticket price, I had to figure out the overall costs:

  • Venue hire,
  • A/V hire,
  • Printing costs (for name badges, or in this case, stickers),
  • Payment provider commission—we use Stripe through the excellent Ti.to,
  • Speaker’s travel,
  • Speaker’s accommodation,
  • Speaker’s dinner the evening before the event,
  • Speaker’s payment.

Some conference organisers think they can skimp on that last part. Those conference organisers are wrong. A conference is nothing without its speakers. They are literally the reason why people buy tickets.

Because the speakers make or break a conference, there’s a real temptation to play it safe and only book people who are veterans. But then you’re missing out on a chance to boost someone when they’re just starting out with public speaking. I remember taking a chance on Alla a few years back for Responsive Day Out 3—she had never given a conference talk before. She, of course, gave a superb talk. Now she’s speaking at events all over the world, and I have to admit, it gives me a warm glow inside. When it came time for Patterns Day, Alla had migrated into the “safe bet” category—I knew she’d deliver the perfect closing keynote.

I understand why conference organisers feel like they need to play it safe. From their perspective, they’re already taking on a lot of risk in putting on a conference in the first place. It’s easy to think of yourself as being in a position of vulnerability—”If I don’t sell enough tickets, I’m screwed!” But I think it’s important to realise that you’re also in a position of power, whether you like it or not. If you’re in charge of putting together the line-up of a conference, that’s a big responsibility, not just to the attendees on the day, but to the community as a whole. It’s like that quote 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.

Part of that responsibility to the wider community is representation. That’s why I fundamentally disagree with ppk when he says:

The other view would be that there should be 50% woman speakers. Although that sounds great I personally never believed in this argument. It’s based on the general population instead of the population of web developers, and if we’d extend that argument to its logical conclusion then 99.9% of the web development conference speakers should know nothing about web development, since that’s the rough ratio in the general population.

That makes it sound like a conference’s job is to represent the status quo. By that logic, the line-up should include plenty of bad speakers—after all, the majority of web developers aren’t necessarily good speakers. But of course that’s not how conferences work. They don’t represent typical ideas—quite the opposite. What’s the point of having an event that simply reinforces the general consensus? This isn’t Harrison Bergeron. You want a line-up that’s exceptional.

I don’t think conference organisers can shirk this issue and say “It’s out of my hands; I’m just reflecting the way things are.” The whole point of having a conference in the first place is to trigger some kind of change. If you’re not happy with the current make-up of the web community (and I most definitely am not), then a conference is the perfect opportunity to try to demonstrate an alternative. We do it with the subject matter of the talks—”Our code/process/tooling doesn’t have to be this way!”—and I think we should also apply that to the wider context: “Our culture doesn’t have to be this way!”

Passing up that chance isn’t just a missed opportunity, I think it’s also an abdication of responsibility. Believe me, I know that organising a conference is a lot of work, but that’s not a reason to cop out. On the contrary, it’s all the more reason to step up to the plate and try your damnedest to make a difference. Otherwise, why even have a conference?

Whenever the issue of diversity at conferences comes up, there is inevitably someone who says “All I care about is having the best speakers.” But if that were true, shouldn’t your conference (and every other conference) have exactly the same line-up every year?

The truth is that there are all sorts of factors that play into the choice of speakers. I think representation should be a factor, but that’s all it is—one factor of many. Is the subject matter relevant? That’s a factor. Do we already have someone on the line-up covering similar subject matter? That’s a factor. How much will it cost to get this speaker? That’s a factor. Is the speaker travelling from very far away? That’s a factor.

In the case of Patterns Day, I had to factor in the range of topics. I wanted a mixture of big-picture talks as well as hands-on nitty-gritty case studies. I also didn’t want it to be too developer-focused or too design-focused. I was aiming for a good mix of both.

In the end, I must admit that I am guilty of doing exactly what I’ve been railing against. I played it safe. I put together a line-up of speakers that I wanted to see, and that I knew with absolute certainty would deliver great presentations. There were plenty of potential issues for me to get stressed about in the run-up to the event, but the quality of the talks wasn’t one of them. On the one hand, I wish I had taken more chances with the line-up, but honestly, if I could do it over again, I wouldn’t change a thing.

Because I was trying to keep the ticket price as low as possible—and the venue hire was already a significant cost—I set myself the constraint of only having speakers from within the UK (Jina was the exception—she was going to come anyway as an attendee, so of course I asked her to speak). Knowing that the speaker’s travel costs would be low, I could plug the numbers into an algebraic formula for figuring out the ticket price:

costs ÷ seats = price

Add up all the costs and divide that total by the number of available seats to get the minimum ticket price.

In practice, you probably don’t want to have to sell absolutely every single ticket just to break even, so you set the price for a sales figure lower than 100%—maybe 80%, or 50% if you’re out to make a tidy profit (although if you’re out to make a tidy profit, I don’t think conferences are the right business to be in—ask any conference organiser).

Some conferences factor in money for sponsorship to make the event happen. I prefer to have sponsors literally sponsoring additions to the conference. In the case of Patterns Day, the coffee and pastries were sponsored by Deliveroo, and the videos were sponsored by Amazon. But sponsorship didn’t affect the pricing formula.

The Duke Of York’s has around 280 seats. I factored in about 30 seats for speakers, Clearlefties, and other staff. That left 250 seats available for attendees. But that’s not the number I plugged into the pricing formula. Instead, I chose to put 210 tickets on sale and figured out the ticket price accordingly.

What happened to the remaining 40 seats? The majority of them went to Codebar students and organisers. So if you bought a ticket for Patterns Day, you directly subsidised the opportunity for people under-represented in technology to attend. Thank you.

Speaking personally, I found that having the Codebar crew in attendance really made my day. They’re my heroes, and it meant the world to me that they were able to be there.

Zara, Alice, and Amber Patterns Day Anwen, Zara, Alice, Dot, and Amber Eden, Zara, Alice, and Chloe

This was originally posted on my own site.

]]>
Making a healthcare app in an age of austerity https://clearleft.com/posts/476 Tue, 18 Jul 2017 08:30:00 +0000 https://clearleft.com/posts/476 When Dr David Sheppard approached Clearleft recently, the first thing he asked was “How much will it cost to build me an app?”. You probably know the answer to that question already. “It depends”.

Like all good designers we immediately set about finding out what the app needed to do, and whether a native app was required at all. It turned out we were right to question Dr Sheppard’s initial assumption, but in doing we ended up exceeding his expectations.

The National Institute for Health and Care Excellence (NICE) is a public body which provides guidance and advice to the National Health Service (NHS) in England. Its guidelines make evidence-based recommendations for the prevention and management of specific conditions, improving health and using medicines, and are required to be used by NHS healthcare professionals. The NICE guidelines are comprehensive and wide-ranging, but the pertinent clinical information is not often presented in an easily accessible or readily available manner.

To help with his own practise, Dr Sheppard had carefully summarised the NICE guidance into single pages for quick and easy access. Seeing that these could be useful to other medical and clinical practitioners, Dr Sheppard wanted to make his summaries freely available for use in a quick and easy format. Having NICE guidance on hand, particularly in areas of a medical facility where use of wifi and mobile data is strictly limited, is what led Dr Sheppard to the reasonable assumption that building a native app was the way to go.

We immediately recognised that an easier, cheaper, more open solution could be available. That solution was a web app, by which I really mean a simple web site with some offline caching functionality. In these days of austerity and a consequently under-resourced NHS, there was no funding available for the project, and Dr Sheppard was prepared to pay for it himself. Rather than have a large IT consultancy charge a fortune for a native app, Clearleft decided to put its money where its mouth was and build a web app pro bono. Here’s how went about it.

Dr Sheppard had written his eighty NICE guidance one-pagers in Word. Rather than convert these straight to HTML, we reformatted the pages using Markdown so they could be more easily edited by non-technical authors in future. We linked the pages into a typographically elegant responsive website. As we did so, we made technical optimisations including ensuring text would appear immediately without waiting for web fonts to download.

The final part of the process was enabling the whole site would work as an offline app. For this we turned to an admittedly deprecated technology called AppCache. We used this to make your browser download the entire website (<2 Mb) the first time you visit it. If you’re a knowledgable developer you might well be rolling your eyes in dismay at the mention of AppCache, but for a static, infrequently changing site like NICE One-Pagers, AppCache is just fine, not least of all because it is supported by just about all devices including iOS (which at the time of writing is more than you can say about its grown up sibling Service Workers).

Ultimately, thanks to the efforts of Dr Sheppard, healthcare professionals now have summarised NICE guidance available at a glance as they do their rounds. The entire web app is open source and made available to the world, at no cost to the NHS, by using the power of web technologies, some design nous, a little critical thinking, and a good dose of enthusiasm from the Clearleft team.

]]>
The Design Sprint hammer https://clearleft.com/posts/478 Wed, 12 Jul 2017 10:59:00 +0000 https://clearleft.com/posts/478 We’re huge fans of design sprints, as popularised by Google Ventures.

We’ve been running our own variation of design sprints—dubbed Springboard—for over five years now. This takes the core elements of a design sprint—rapid iteration over a short period—and bookends the process with a little more research up front, and some follow-on support at the end. We’re not alone. In fact we’ve seen dozens of agencies follow suit and start offering design sprints as a service.

From the agency’s perspective, it’s a great way of getting to know a potential client and delivering value much earlier in the process than usual. From a client’s perspective, it’s a great way to tackle a small but well-scoped problem efficiently and effectively, while trialling a potential new design partner. We’ve seen design sprints used as a credible alternative to the old-fashioned design pitch we’ve all grown to hate.

That being said, as any tool gains popularity, it opens itself up to abuse. Or as the saying goes, “if all you have is a hammer, everything looks like a nail.” Over the last 18 months we’ve seen design sprints sold as a catch-all solution to all life’s design problems, whether they’re appropriate or not. We’ve seen design sprints used to solve problems which are far too large to be solved in a week, and problems which are far too granular and nuanced. We’ve also seen design sprints used as innovation theatre, with little thought or planning around what happens afterwards.

So I wanted to take a quick step back, to look at what design sprints are good for, and where they fall down.

Choosing the right project for a design sprint

  1. Design sprints are great at solving well understood problems, so stack the team with domain experts and share as much insight as possible. If you’re lacking either experts or insight, your sprint team will get stuck at the first hurdle. A lack of insight is easy to fix. Simply commission a small research project in advance of the sprint. Lacking access to domain experts is more tricky to solve and will greatly hinder decision making. In this instance it may be better to revert to a more traditional six-week discovery phase where the design team works around the stakeholder’s schedule, rather than the other way around.

  2. Design sprints work best when they are solving a well scoped problem. Too big and you’ll run out of time; too small and you’ll spend the week rearranging the proverbial deckchairs. Not all problems fit nicely into a week-long timeframe, so choose carefully. Prototyping a major new feature will probably work; creating a production-ready version of your next product probably won’t.

  3. Design sprints are great at creating interesting but messy prototypes, ripe for further exploration. They rarely produce production-ready solutions. If you assume you are going to solve the entire problem in a week and have it live the following Monday, you may be disappointed. Instead, you need to manage expectations, and allow more time than expected at the end of the sprint to clean things up and turn your ideas into reality. As hinted above, the fidelity of the final output is also key.

  4. Design sprints are a great way to reduce the cost of failure in situations of high risk and uncertainty. If you’re comfortable working in a Lean environment, the outcome may simply be understanding what doesn’t work. Whilst sprints are often sold as a silver bullet, there is no guarantee you’ll be left with a usable solution at the end. To steal a Ron Burgundy quote, design sprints “work 60% of the time, every time”. You should try to avoid promising the Earth with design sprints, or using them to solve problems that are too important to fail. 

  5. It’s best to use design sprints wisely and relatively infrequently. They are fun and highly addictive, so it’s easy for teams to try and solve every problem with a design sprint. But they are also incredibly hard work, and a great way of burning out your team. I wouldn’t want to see the same product team sprinting more than once every four weeks, and even external consultants need a break between sprints.

If you’re careful in selecting the right project for your sprint, and you avoid some of the above traps, design sprints are a great way to solve 80% of the problem in a short amount of time. However the time and effort comes from designing the last 20%.  It’s best not to see design sprints as some magic shortcut that can collapse the fabric of space and time, but as an efficient design approach to solve the bulk of the problem at an early stage, when the risks are at their lowest.

Jake Knapp is running a public Design Sprints workshop in partnership with Clearleft in London on the 7th September. Tickets are on sale now. If you’d like to see how we can run a Design Sprint for your business, do get in touch.

]]>
Patterns Day videos https://clearleft.com/posts/477 Tue, 11 Jul 2017 15:58:25 +0000 https://clearleft.com/posts/477 Eleven days have passed since Patterns Day. I think I’m starting to go into withdrawal.

Fortunately there’s a way to re-live the glory. Video!

The first video is online now: Laura Elizabeth’s excellent opener. More videos will follow. Keep an eye on this page.

And remember, the audio is already online as a podcast.

This was originally posted on my site.

]]>
Question and Answer https://clearleft.com/posts/470 Mon, 10 Jul 2017 11:11:00 +0000 https://clearleft.com/posts/470 When I was 17, I bought book about graffiti from a man, and 13 years later I found the very same man in front of me at work.

That man is David Samuel. If you are in the graffiti world there is no need to explain who he is, but if you aren’t…

David has been in the British graffiti scene for years. He set up the Rarekind crew back in 1997. In 2003, he created one of the first graffiti stores in the U.K., in Brighton, and that’s one of the reasons why graffiti is so ubiquitous in our city by the sea. He made his way back to London in 2008 and opened a gallery underneath the legendary Chrome and Black store. From there, he formed Rarekind Illustration Agency, which represents a wide range of disciplined artists including typographers, digital and traditional illustrators, animators, graffiti artists, film makers, and photographers. Rarekind shows that there is so much more to graffiti than some basic tagging, which is often where graffiti can be misunderstood and misclassified.

Over the decades, graffiti has evolved. It is no longer a signal of urban decay, but now in fact the opposite: a marker of cultural and creative force.

Rarekind 2008 - Copyright Rarekind Parkers.

My love of graffiti art began once I stepped into the Rarekind store.  As a child I traveled up to London, where I could see the trains and train track walls covered with graffiti from writers such as Tox, Fuel, and Fume.  But the Rarekind store was different and introduced me to the subculture of graffiti and street art, where I began learning styles of graffiti from stickers (slaps) to throw-ups, to wildstyle, to heaven spots.

My main interest was, and still is, typography (or lettering, strictly speaking)  — the structure of letters, the big, the bold, the eye-catching pieces — basically the embodiment of Rarekind’s work.  I have followed David and Rarekind ever since, from attending talks, to working with him in Carnaby street, to owning artwork by his artists like Jimi Crayon.  Luckily and independently, they have also been on the radar of our own Andy Budd.

Adidas - Copyright Jimi Crayon

If you haven’t been a guest of ours yet, you should note that we have a fantastic office with a large communal courtyard. It’s a great place to sit and work, have meetings, and eat lunch together.  That said, it does lack colour and, in the English weather, at times it can look like a prison yard with a drab and cold atmosphere.

David pointed us in the direction of Gary Stranger and Pref ID to transform our blank courtyard canvas.  Gary’s work springs from well-formed letters, brilliantly-mixed colours, and a distinctive and recognizable flair that you’ve probably stumbled upon in Brighton before.  His work never feels like just graffiti or just letters, but something that more like a crafted and layered visual language, signifying something larger than the letters themselves could convey on their own.  

Copyright Gary Stranger

Pref ID’s work is a heavy mix of his graffiti and graphic design, striving to create a unique visual language that is a graphic solution to the layered multiple word graffiti pieces on walls. His large wall pieces are freehand; no stencils, no masking tape, no projections.

Copyright Pref ID

I had the pleasure of watching the guys work one sunny Sunday. In our line of work, we are constantly posing questions and discovering new answers (which often leads to even more questions). Pref ID and Gary got this right away, and created a symbolic identification and signal for this running theme of our work.

Pref ID

We first started working together on our exhibition last year at StolenSpace gallery. We discovered that not only did we share a similar aesthetic but also a work ethic and way of approaching concepts. We have continued to work together since then on various projects. — Pref I.D

Behind the scenes

Our style is simply the outcome of putting the elements of our individual work together. It works because although they are both based on simple and more traditional letterforms, Garys work is much more precise and exact, while Pref is a little looser and often stretched or distorted. It’s this subtle contrast that gives it the balance required for it to work as it does. — Pref I.D

Gary Stranger

The Mural painted on the rooftop has two ideas behind it. One was to be the first in a series of murals using giant punctuation and glyphs. The other was to comment partly on the collaborative process between ourselves but also on the collaborative process at the heart of not only the creative agency where the mural is painted, but the creative world/process in a broader sense. — Pref I.D

Clearleft HQ

In short, the piece ‘Question and Answer’ is fantastic. It changes the entire space into a vibrant colourful area. There are more plans for the courtyard so watch this space. 

]]>
Design systems don’t start with components https://clearleft.com/posts/475 Thu, 06 Jul 2017 08:00:00 +0000 https://clearleft.com/posts/475 I’m all for design systems. I’ve designed and created many, and they’re a great way of unifying patterns, usage and language. They reduce time, save on costs and promote modular, systems-based thinking.

But I’ve noticed a growing bias towards design systems focusing on the components first. This suggests they’re designed components-first.

They’re not. Nor should they be.

Image credit: https://unsplash.com/@petkovski

One doesn’t create a design system starting with a loose collection of parts before creating the whole. It is in fact the opposite. Bear with me.

Good design systems start with a vision. A creative direction before they become a thing. They need to have the relationships between elements worked out. The hierarchies, grids and layouts need to flex and scale. Proximities, similarities and placement need examining. Gestalt theory has to get applied. None of these things are possible if you start with a loose collection of bits.

On the subject of Gestalt theory, if we see an object in its entirety before we see the individual parts, then the object as a whole needs to precede the component parts. The design system must be predicated on an initial, overarching direction, in this case the whole.

The page is dead. Long live the page.

This brings us to (gasppage-based design.

Our collective movement towards modular, component-based design systems is the right one. In today’s multi-device web, focusing on the singular page is limiting. But that does not suggest a design workflow that incorporates page design is dead. Far from it, the lowly page is crucial in ensuring a strong, solid design system.

Perhaps its because I work agency-side, but given the choice between:

  • trying to walk a client through a design system full of disparate interface elements, or,
  • showing them a page that articulates what the solution might look like.

I’d prefer the latter. Why? Because pages offer faster agreement. They provide a shared understanding, and a vision of the future thing. Pages can be tested with real users, and they can be discussed with developers. The artefacts page design creates might be wasteful, but they are useful.

A workflow

It’s worth clarifying a few things here. I don’t focus on designing pages. I use a variety of methods and ways or working to create a direction first. I use element collages to hone in on the design direction and tone. I use a pen and paper to examine ideas of layout, hierarchies and relationships. But I always design a page or two. It’s these pages that set the direction. I work with my client to iterate through the design to ensure it addresses user needs first, business needs second.

All aspects of creative direction are borne out of this workflow. With the key pages designed, we decouple the elements, break them apart and create a design system. When recombined to create new pages, the creative direction remains intact. The system now contains the right balance, composition and hierarchies to meet the business goals and user needs.

Image credit: https://unsplash.com/@larisabirta

Without creative direction, a design system becomes a group of disconnected elements existing alongside one another. Forgive the analogy, but an orchestra without a conductor is a group of disparate instruments in the same room. It’s the conductor who harmonises, balances and helps make the symphony. Make your own connections between creative direction and orchestral conductors as you see fit.

Design for the user first and the business second. Design as a whole, from 30,000 feet up, then create your swish new design system. Only once it’s designed in pages can you break apart and decouple it from the main design direction. With the direction set, the user goals met and the business happy, then your design system should stand the test of time.

This post was originally published over at Clear(left) Thinking on Medium.

]]>
A simple approach to improving form design https://clearleft.com/posts/474 Wed, 05 Jul 2017 08:51:00 +0000 https://clearleft.com/posts/474 Have you ever started filling out an form online, only to abandon the process halfway through? If so you wouldn’t be alone. This post explains a simple technique for getting more people to complete your forms and provide the information you require.

Forms are used for all sorts of reasons, be it obtaining payment details; submitting passport applications; or providing a way for you to report a dangerous pothole. What all these forms have in common is that they gather information from you, and if you decide not to provide all the information required, the process is usually considered to have failed.

There are many things you can do to improve the design of online forms in order to decrease the failure rate. These include small details such as invoking the correct keyboard on mobile devices, providing helpful microcopy at the right time, and using progressive disclosure so users only see what they need to see. But the biggest effect you can have is to ask the right questions, and only the right questions. Every piece of information you ask for is another hurdle for your user to get over before they complete the process.

The question protocol

When designing a form, you can ensure you are gathering only pertinent information by always invoking the question protocol. The question protocol forces you – and your organisation – to ask yourselves why you are requesting a piece of information from a customer. Getting to the bottom of why you’re asking a question means determining precisely how you will be using the answer, if at all.

Sometimes, questions have been added to a form because somebody needed the data at some point in the past - it may no longer be relevant to gather that information. In many situations, questions are asked because it might be ‘nice to know’ the answers, without a clear idea of how those answers will be interrogated or used. There are other times when information is asked for that could have been inferred or more usefully gathered in another way or on a more appropriate occasion.

The question protocol asks the following of any information that is collected:

  1. Why do you need this information?
  2. Who will use the information and what for? What decision will be made based on the information collected?
  3. How will you validate the information that is submitted?
  4. What happens if the submitted information is false or made up?
  5. What’s the impact of the information not being submitted?
  6. What happens if the information goes out of date?
  7. Can a customer update their submitted information? Should they be able to?
  8. Are you allowed (legally and ethically) to collect this information?
  9. How is it shared? What are the privacy implications?
  10. How securely does it need to be stored?

Asking those questions should ultimately lead you to answering the ultimate one: “Is the question really necessary?”

Finding the right person to tell you whether they really need the answers to specific questions takes time and persistence, but in the long run can save money and improve conversions. Each piece of information you ask for has two costs: firstly it is an impairment to accurate completion; secondly there is a time and money cost of collecting, storing and processing the additional information, and handling situations where the information is false or inconsistent.

Using the question protocol can help you and your organisation understand the the true business value (or detriment) of each question you ask. This will give you the opportunity to slim down your forms, minimise failure, and increase the completion rate.

]]>
Anticipatory Design - Personalisation Part One https://clearleft.com/posts/473 Mon, 03 Jul 2017 14:57:00 +0000 https://clearleft.com/posts/473 Ben Sauer and I went for a coffee and catch up the other day, and got to talking about personalisation. Our caffeine fuelled chat spawned a train of thoughts about how and where personalisation works for people - in the analogue past, the screen-based present, and, well, what kind of future?

But what is personalisation? Here, what we’re really talking about is ‘anticipatory design’. The term has been gaining traction in recent years, and with the ever increasing decision fatigue people seem to face in everyday life, it’s more pertinent than ever. Because decision-making can be stressful. And stress can be bad for us, and bad for business. Just ask Forbes.

Choices, choices

Image copyright Andreas Gursky 2001: '99 Cent II, Diptych' www.andreasgursky.com

A common problem that anticipatory design can help with is choice fatigue - knowing what a customer wants before they do, and alleviating the pain of having to choose. It’s the anticipation of a want or need, and the subsequent action to fulfil it. It’s design that can enable a person to forego decision-making. It’s kind of spooky, if you ask me. But it’s here. Although I would say that it’s always been here - on some level, humans have always behaved this way. Think of a mother anticipating her child’s next feed. It’s a fundamental thing. And in 21st century life, amidst the technological revolution, it’s manifesting in ever curious and complicated ways. It is the past, the present and the future of how we humans interact with each other - and with machines.

Side note - our newest design team member, Jerlyn, gave a presentation to the team the other day, and in it, she used the picture above (by photographer Andreas Gursky) to illustrate consumer choice fatigue, which I’ve now borrowed. Overwhelming, right?

The past - an anecdote from the present

Back to the coffee and chat, when Ben shared a story of what we both thought was a great example of old school anticipatory design - in terms of a physical ‘thing’ and a tangible experience. It’s worth noting here, that whilst anticipatory design does sometimes help with decision fatigue, it can also add some other value that’s not about removing choice, as illustrated in Ben’s story. 

Here it is, taken from his original post over at Slapdashery:

My favourite delighter: a polaroid camera and some cardboard

There are some moments when you only get one chance in a lifetime to get something right for a customer. This is about one of those moments.

If you’re not familiar with the Kano model, go ahead and read about it.

TLDR: a ‘delighter’ is a thing you do for a customer that’s not too hard, not terribly necessary, but deeply satisfying. Sometimes all it takes is a polaroid camera and some cardboard. And customers will love you for it.

When my daughter (our first child) was around one, my wife took her to Clarks to buy her first shoes. The shop assistant knew exactly what to do: out comes the polaroid camera, the greeting card, and the special box. We still have it. This was a few years before smartphones became ubiquitous.

Photo by Ben Sauer

Anticipating a user need is a very difficult thing to get right without constant awareness and presence. Clarks get it right. Before we all carried decent cameras, they knew that parents would benefit from celebrating and saving this one-off moment in our lives; my heart still flutters when I remember seeing her in shoes for the first time.

UX and Service Designers love to zoom out to the experience map; we even consider the holistic view a winning approach over a narrow view of the product. That’s a useful method, but consider what it must take to create moments like these: you need to zoom out to a life journey itself, design a solution, and then ensure that legions of people have the presence of mind to catch very rare moments in the customer’s life journey. Kudos, Clarks.

If we compare this to a digital context, what we know about user’s context is horribly narrow. Even if you did know the context, it’s very hard for it not to seem creepy or wrong; in person this is a whole different story. Knowing a lot about a customer in a digital context opens up that creepy feeling for people that they’re transparent to the whole world; not just to a single shop assistant.

Perhaps someday we’ll get this right in the digital world; there aren’t many good examples of this kind of anticipatory design out there. Typically personalisation means Amazon beating me over the head with the same ad over and over again for something I already bought elsewhere.

But when we do get it right; consider the impact on brand perception: I may not shop at Clarks every time for shoes, but I’ll always love them for this moment.

My favourite delighter: a polaroid camera and some cardboard was originally posted on Ben Sauer’s site Slapdashery.

Zoom back out

So how is the present looking? And what about the future? There’ll be more to follow on this - keep your eyes peeled for parts two and three, coming soon.

If you have any thoughts to share about this or any other posts in our blog, join the conversation on Twitter and mention us @clearleft

]]>
Patterns Day https://clearleft.com/posts/472 Sun, 02 Jul 2017 17:17:00 +0000 https://clearleft.com/posts/472 Patterns Day is over. It was all I hoped it would be and more.

I’ve got that weird post-conference feeling now, where that all-consuming thing that was ahead of you is now behind you, and you’re not quite sure what to do. Although, comparatively speaking, Patterns Day came together pretty quickly. I announced it less than three months ago. It sold out just over a month later. Now it’s over and done with, it feels like a whirlwind.

The day itself was also somewhat whirlwind-like. It was simultaneously packed to the brim with great talks, and yet over in the blink of an eye. Everyone who attended seemed to have a good time, which makes me very happy indeed. Although, as I said on the day, while it’s nice that everyone came along, I put the line-up together for purely selfish reasons—it was my dream line-up of people I wanted to see speak.

Boy, oh boy, did they deliver the goods! Every talk was great. And I must admit, I was pleased with how I had structured the event. The day started and finished with high-level, almost philosophical talks; the mid section was packed with hands-on nitty-gritty practical examples.

Thanks to sponsorship from Amazon UK, Craig was videoing all the talks. I’ll get them online as soon as I can. But in the meantime, Drew got hold of the audio and made mp3s of each talk. They are all available in handy podcast form for your listening and huffduffing pleasure:

  1. Laura Elizabeth
  2. Ellen de Vries
  3. Sareh Heidari
  4. Rachel Andrew
  5. Alice Bartlett
  6. Jina Anne
  7. Paul Lloyd
  8. Alla Kholmatova

If you’re feeling adventurous, you can play the Patterns Day drinking game while you listen to the talks:

  • Any time someone says “Lego”, take a drink,
  • Any time someone references Chrisopher Alexander, take a drink,
  • Any time someone says that naming things is hard, take a drink,
  • Any time says “atomic design”, take a drink, and
  • Any time says “Bootstrap”, puke the drink back up.

In between the talks, the music was provided courtesy of some Brighton-based artists

Hidde de Vries has written up an account of the day. Stu Robson has also published his notes from each talk. Sarah Drummond wrote down her thoughts on Ev’s blog.

I began the day by predicting that Patterns Day would leave us with more questions than answers …but that they would be the right questions. I think that’s pretty much what happened. Quite a few people compared it to the first Responsive Day Out in tone. I remember a wave of relief flowing across the audience when Sarah opened the show by saying:

I think if we were all to be a little more honest when we talk to each other than we are at the moment, the phrase “winging it” would be something that would come up a lot more often. If you actually speak to people, not very many people have a process for this at the moment. Most of us are kind of winging it.

  • This is hard.
  • No one knows exactly what they’re doing.
  • Nobody has figured this out yet.

Those sentiments were true of responsive design in 2013, and they’re certainly true of design systems in 2017. That’s why I think it’s so important that we share our experiences—good and bad—as we struggle to come to grips with these challenges. That’s why I put Patterns Day together. That’s also why, at the end of the day, I thanked everyone who has ever written about, spoken about, or otherwise shared their experience with design systems, pattern libraries, style guides, and components. And of course I made sure that everyone gave Anna a great big round of applause for her years of dedicated service—I wish she could’ve been there.

There were a few more “thank you”s at the end of the day, and all of them were heartfelt. Thank you to Felicity and everyone else at the Duke of York’s for the fantastic venue and making sure everything went so smoothly. Thank you to AVT for all the audio/visual wrangling. Thanks to Amazon for sponsoring the video recordings, and thanks to Deliveroo for sponsoring the tea, coffee, pastries, and popcorn (they’re hiring, by the way). Huge thanks to Alison and everyone from Clearleft who helped out on the day—Hana, James, Rowena, Chris, Benjamin, Seb, Jerlyn, and most especially Alis who worked behind the scenes to make everything go so smoothly. Thanks to Kai for providing copies of Offscreen Magazine for the taking. Thanks to Marc and Drew for taking lots of pictures. Thanks to everyone who came to Patterns Day, especially the students and organisers from Codebar Brighton—you are my heroes.

Most of all thank you, thank you, thank you, to the eight fantastic speakers who made Patterns Day so, so great—I love you all.

Laura Ellen Sareh Rachel Alice Jina Paul Alla

This was originally posted on my own site.

]]>
All in the mind https://clearleft.com/posts/471 Wed, 28 Jun 2017 08:00:00 +0000 https://clearleft.com/posts/471 Glossophobia, the fear of public speaking, affects more people than you’d think, including me. To try and face some of these fears head on, I recently attended a day-long workshop ran by our stand-in project manager Matthew Matheson. Here’s what I learned.

Over the past nine months we’ve had the pleasure of having Matthew Matheson at Clearleft HQ. Matt’s been manning the project management fort while Clare’s been on maternity leave, and in that time, he (and his dog Scribble) have become a part of the furniture here.

As well as filling the role of PM (no, not Prime Minister, Project Manager!) for some really exciting client and internal projects, he has delivered monthly personal development workshops for the entire Clearleft team exploring themes such as ‘positive mindset’, ‘accountability’ and ‘storytelling’.

Before being joining the research team here at Clearleft, I spent some time as an intern. Attending the workshops during this time was an immensely useful way of understanding how my new colleagues think, work together and onboarding some of the values Clearleft uphold. So when Matt floated a free ticket for his day-long workshop on public speaking I jumped on the opportunity!

All to gain

Working in the UX field, it’s important to be able to articulate your research findings, design decisions and project playbacks confidently and clearly with colleagues and clients. We all strive for a shared understanding and successful communication is key.

I have limited experience with public speaking. Like most people, I’ve had to give speeches and presentations to work colleagues, study groups and family gatherings all with various degrees of success.

Having attended Matt’s other workshops, I was confident that I was in safe hands and would leave with the tools I needed to make the next steps for progress.

Stake in the ground

The attendees met in the 68 Middle Street auditorium bar and made straight for the tea and coffee before being welcomed into the the workshop space. Once inside, we formally introduced ourselves in turn and wrote down on the first of many index cards what we specifically wanted to get out of the session.

Then as a group we claimed a piece of the wall and attached our index card goals.

Mine was:

Develop a go-to toolkit for coping with the in-the-moment fears and stresses of speaking in public

Throughout the course of the workshop we returned to this space to add parts of our growing toolkit and measure our progress collectively.

Superheroes unite!

Each one in our ten-person group had a different challenge, desired outcome, background and career.

During the first few group exercises it became clear we would be helping each other through the workshop to achieve our individual goals and would provide the praise and enthusiasm as a unit. This was very much a team effort.

Getting stuck in

Through storytelling, role playing and conversations, we explored ideas, shared war stories and compared battle scars. We unearthed and confronted some of the things we dreaded most.

I found a few of these particularly useful:

  • Superpower campfire storytelling - Positioned in a campfire circle we each took turns telling a story about the newly bestowed superpower of our choice. I used this exercise to improve ad libbing, I went for broke and, in my eyes failed miserably… it was great!
  • What makes a great public speaker? - After individually listing the qualities of a good public speaker we stood into their shoes and deliver a quick-fire speech. This was my “AHA!” moment
  • Give praise. Receive praise - Probably the easiest of the exercises but the one with the most smiles.

I’ve learned something today

The day ended with a round of confidently presented talks on the passions we’d each identified earlier on in the day. Gone were the nervous shakes, shortness of breath and spiralling traps of self-doubt.

We’d all been through a miraculous journey in such a short amount of time. We were exhausted, but each of us clutching a handful of personal techniques to take us to that next level.

Top tips

  • Get comfortable with being uncomfortable - the fears and anxieties won’t go away, you just need a few ways to deal with them
  • Saying “I don’t know” is okay and more healthy for your conversation - this one is already embedded into the Clearleft culture
  • Visualise yourself being the speaker you want to be
  • Authenticity - present from the heart not what you think your audience wants
  • Know your audience don’t pander to them at the expense of the integrity of the content of your talk
  • Find your voice - both figuratively and literally
  • First impressions matter - practice the first 3 minutes of your talk, the rest will follow

We left the auditorium transformed, more confident and with a plan of action and an accountabilibuddy to make sure we deliver.

My work here is done

Unlucky for us, Matt is moving on to his next adventure; but lucky for you, he regularly runs this workshop alongside an array of others at Improvising Change.

If you have any comments or questions about this blog post or want to share your experiences of public speaking, feel free to email or tweet me!

]]>
UX London: building blocks https://clearleft.com/posts/469 Fri, 16 Jun 2017 11:01:00 +0000 https://clearleft.com/posts/469 The UX London team were excited to work on a brand new design challenge this year - that of the stage set.

It may seem like a small detail, but it felt important and timely for us take the opportunity to experiment with a new way to visually represent the essence and brand of UX London. Enter, Stage Right, Jon Aizlewood and Kyle Bean.

Dream team

We’d worked with Kyle earlier in the year. He produced some beautiful illustration work for our new website - as seen in our Penguin case study, amongst others. In house here at HQ, Alis, Kate and I worked on a brief. We wanted the project to capture one of our core values at Clearleft: “Learn, share, learn share” - a value that spawned the creation of UX London and so many of our other events.

Then we invited Jon on board to work on the design side of things.

Here, Kyle and Jon share their insights from the project, along with the images and video that captured the creation of our lovely new stage set. It was a great project to work on - fast paced, full of creative freedom, but with some tricky practical and logistical constraints thrown in…

Our initial discussions for the stage piece centred around the idea that it should be something fun and adaptable. It also needed be something that could potentially be used at different Clearleft events, so durability was also a key requirement. By the end of our first meeting we were discussing children’s wooden toys and activity blocks and so the seeds of the idea were already in place at this point. With these ideas in mind, I went away and developed the concept that we could construct a series of boxes that could be stacked and rearranged to spell out different words throughout the 3-day conference.

Kyle Bean
Initial sketches - copyright Kyle Bean

At the same time, I also did some research into LED lighting as well as CNC (Computer Numerical Control) cutting, as I liked the idea that the boxes could be lit up by battery powered coloured lights and be made from solid plywood panels with the letters cut out. Over to the Clearleft team.

Kyle Bean
LED testing - copyright Kyle Bean

Following their brief to Kyle, Kate and Alis roped me in to help on the design front. The concept of activity blocks meant the cubes could be rotated to show one of four faces options at any given time. To further the playful, toy-like aspect of the piece, we agreed on a series of abstract icons that were in keeping with the content at UX London. That left us with a bunch of faces still to use.

Jon Aizlewood
Cube mapping exercise - complete with obligatory stickies and Sharpies! Copyright Jon Aizlewood

Together we went through a really fun session mapping out the various permutations of each cube and the options for each, in order to provide Kyle with a clear brief on the number of boxes needed and what would go on each. We ended up adding another cube to account for a range of words and tags, including UX London, Clearleft, and ensured it was future-friendly by ensuring the #UXL20XX hashtag could be used up to 2020. Always thinking ahead!

Jon Aizlewood
Cut outs - copyright Kyle Bean

From that point on it was a case of making everything and finessing the details and testing various things such as the wood finish, adhesives and and the radio controlled lighting.

Kyle Bean
The finished article - copyright Mitch Payne
Live on stage at UX London - copyright Luca Sage

Simple as that! 

To find out more about Kyle Bean’s work, visit www.kylebean.co.uk 

]]>
The schedule for Patterns Day https://clearleft.com/posts/468 Tue, 13 Jun 2017 15:20:00 +0000 https://clearleft.com/posts/468 There are only seventeen more days until Patterns Day. Squee!

I’ve got a plan now for how the day is going to run. Here’s the plan:

registration
opening remarks
Laura Elizabeth
Ellen deVries
break
Sareh Heidari
Rachel Andrew
lunch break
Alice Bartlett
Jina Anne
break
Paul Lloyd
Alla Kholmatova
closing remarks

There was a great response to my call for sponsors. Thanks to Amazon Video, we’ll have video recordings of all the talks. Thanks to Deliveroo, we’ll have coffee and tea throughout the day …and pastries in the morning! …and popcorn in the afternoon!!

You’re on your own for lunch. I’ve listed some options on the website, but I should add some more.

I have to say, looking at the schedule for the day, I’m very excited about this line-up. To say I’m looking forward to it would be quite the understatement. I can’t wait!

This was originally posted on my own site.

]]>
UX London: volunteers' view https://clearleft.com/posts/467 Mon, 12 Jun 2017 09:44:00 +0000 https://clearleft.com/posts/467 Those of you who have been to UX London before will know what an important role our volunteer crew play in the proceedings.

They’re the folk in the blue ‘crew’ t-shirts. Those who help welcome you to the event and set you up with your goodie bag and lanyard; those who set up the workshop spaces, answer your questions, show you where the toilets are and set up your breakfast and snacks. They run around like nobody’s business and help out with so many other things behind the scenes that you never see. They are absolute stars.

Photo credit: Luca Sage

In return, we aim to offer them a fantastic volunteering experience with access to much of the conference content itself - an experience that they will never forget (and maybe even want to repeat)!

I had the pleasure of working closely with two of this year’s volunteer crew, both of whom declared an interest in all things communications before the event. Lewis and Lorna did a wonderful job supporting the media activities during the conference. Naturally, they have been equally adept with their post-event communications, and have taken to Medium to share their experiences.

Photo credit: Luca Sage

The conference is a great opportunity to learn, of course. A carefully considered rota ensures that, alongside conference duties such as registration or checking wristbands, everyone gets to see some talks they’re interested in and take part in some workshops. Setting up workshops means you’re helping out the presenters, so there are chances to actually meet the experts too.

Lorna Howes

Take a look at Lorna’s blog post in full:

https://medium.com/@hadronarly/uxlondon-from-the-inside-6b24d1d7cdf

Every day you’re surrounded by like minded volunteers and delegates. You have deep conversations about the future of UX but more importantly you have an absolute laugh and possibly a beer or ten (brewed by the event’s organiser, Clearleft).

Lewis Healey

Read the rest of Lewis’ blog post:

https://medium.com/@lewishealey/my-experience-volunteering-at-ux-london-and-why-you-should-volunteer-d63b4a89d213

Photo credit: Luca Sage

We couldn’t run UX London without our crew - if you have volunteered with us before, thank you for all of your help and hard work. If you haven’t and want to find out more, please get in touch.

We hope to see you next year!

]]>
eLife goes live https://clearleft.com/posts/466 Mon, 05 Jun 2017 15:30:11 +0000 https://clearleft.com/posts/466 The World Wide Web was forged in the crucible of science. Tim Berners-Lee was working at CERN, the European Centre for Nuclear Research, a remarkable place where the pursuit of knowledge—rather than the pursuit of profit—is the driving force.

I often wonder whether the web as we know it—an open, decentralised system—could’ve been born anywhere else. These days it’s easy to focus on the success stories of the web in the worlds of commerce and social networking, but I still find there’s something that really “clicks” with the web and the science (Zooniverse being a classic example).

At Clearleft we’ve been lucky enough to work on science-driven projects like the Wellcome Library and the Wellcome Trust. It’s incredibly rewarding to work on projects where the bottom line is measured in knowledge-sharing rather than moolah. So when we were approached by eLife to help them with an upcoming redesign, we jumped at the chance.

We usually help organisations through our expertise in user-centred design, but in this case the design and UX were already in hand. The challenge was in the implementation. The team at eLife knew that they wanted a modular pattern library to keep their front-end components documented and easily reusable. Given Clearleft’s extensive experience with building pattern libraries, this was a match made in heaven (or whatever the scientific non-theistic equivalent of heaven is).

A group of us travelled up from Brighton to Cambridge to kick things off with a workshop. Before diving into code, it was important to set out the aims for the redesign, and figure out how a pattern library could best support those aims.

Right away, I was struck by the great working relationship between design and front-end development within eLife—there was a great collaborative spirit to the endeavour.

Some goals for the redesign soon emerged:

  • Promote the HTML reading experience as a 1st choice for readers.
  • Align the online experience with the eLife visual identity.

That led to some design principles:

  • Focus on content not site furniture.
  • Remove visual clutter and provide no more than the user needs at any stage of the experience.
  • Aid discovery of value added content beyond the manuscript.

Those design principles then informed the front-end development process. Together we came up with a priority of concerns:

  1. Access
  2. Maintainability
  3. Performance
  4. Taking advantage of browser capabilities
  5. Visual appeal

It’s interesting that maintainability was such a high priority that it superseded even performance, but we also proposed a hypothesis at the same time:

Maintainability doesn’t negatively impact performance.

The combination of the design principles and priorities led us to formulate approaches that could be used throughout the project:

  • Progressive enhancement.
  • Small-screen first responsive images.
  • Only add libraries as needed.

Then we dived into the tech stack: build tools, version control approaches, and naming methodologies. BEM was the winner there.

None of those decisions were set in stone, but they really helped to build a solid foundation for the work ahead. Graham camped out in Cambridge for a while, embedding himself in the team there as they began the process of identifying, naming, and building the components.

The work continued after Clearleft’s involvement wrapped up, and I’m happy to say that it all paid off. The new eLife site has just gone live. It’s looking—and performing—beautifully.

What a great combination: the best of the web and the best of science!

eLife is a non-profit organisation inspired by research funders and led by scientists. Our mission is to help scientists accelerate discovery by operating a platform for research communication that encourages and recognises the most responsible behaviours in science.

This was originally posted on my own site.

]]>
Getting stuck in - words from UX Intern Seb https://clearleft.com/posts/465 Mon, 05 Jun 2017 09:22:00 +0000 https://clearleft.com/posts/465 A couple of weeks ago we welcomed a new UX Intern into the fold at Clearleft HQ - the brilliant Sebastien Chung. Needless to say, Seb has jumped in head first with energy and enthusiasm. And, by all accounts, he hasn’t really come up for air - yet!

I asked Seb to take a moment to step back and reflect upon his time with us so far. Here, he shares his thoughts on what he’s been up to, how he’s approaching his work, and how the journey began.

Words from Seb:

Getting started

Although already a leading agency in the field of UX for a number of years, I first heard of Clearleft whilst attending UX Brighton’s “Supercharge Your UX Career” workshop at the Fabrica Gallery.

Originally coming from a background in industrial and 3D design I had made the transition into Digital a few years earlier and had been working under the broad title of “digital designer”. Coming from a solid grounding in human centred design I had always had a user focused approach to my digital work but now with a drive to work on larger, more meaningful projects, I was driven by the desire to refine my skill set and develop a deeper understanding of the field of UX.

This led me to the UX career workshop where I was fortunate to meet Clearleft’s Creative Director, James Bates. James was incredibly approachable and helpful, inviting me to their Middle Street studio to discuss furthering my UX career and after nine months and several meetings later I took the decision to put my freelance projects on hold and join Clearleft’s team as a UX Intern.

In order to ensure that I would get the most out of my time with Clearleft I started my internship by asking myself the following three questions:

Why am I doing this internship?

  • To understand the dynamics and inner workings of a leading UX agency.

  • To gain additional experience in the field with a view to work on larger meaningful projects whilst learning from industry experts.

  • To deepen and expand my knowledge and understanding of UX strategy with real life examples and applications.

  • To gauge my own skills whilst demonstrating my work ethic and value as a team member.

What are my initial concerns?

  • At 33 years old am I too old to be an intern and how will the position be viewed on my CV?

  • After working as a solo-freelance designer for the last few years how will my existing skills set match up to my peers?

  • How can I add value to the team with a view to make meaningful contributions to projects?

What will be my approach to get the most out of my time at Clearleft?

  • Adopt an inquisitive and passionate mindset for new projects.

  • Be driven and self motivated in my approach to work and tasks.

  • Listen, learn and grow from other’s experiences (be a sponge to knowledge).

  • Have a positive and upbeat approach to challenges and learn from mistakes.

Furthermore, at the end of each day I decided to record the following observations:

What did I learn today?

What did I find challenging?

What will I try to improve tomorrow?

First impressions

What struck me most about Clearleft was that everybody is open and approachable. There is a collaborative attitude within and outside of client projects that permeates the day to day activities from the internal design workshops, to the pow-wows and UX laundro-mats where team members discuss and share their weekly obstacles and challenges.

Clearleft’s open approach to sharing knowledge and fostering design learnings seems to bring employees together around a common passion and creates a camaraderie within the company.

Getting stuck in

During my first couple of weeks at Clearleft I have taken part in a wide range of projects in areas from design research and usability testing to strategy sessions. These have enabled me to gain invaluable insights into the internal dynamics and daily operations of a progressive design agency.

Without going into vast detail, here are a few observations and learnings that I have recorded from my time here so far…

  • UX is a mindset and not a process. There is not a rigid structure that guides approaches to projects, instead it is important to be fluid, approach each project with an inquisitive mindset and draw upon the tools relevant for the project at hand.

  • Strategic UX is not always about solving the problem that the client thinks they have. Sometimes meaningful UX is about digging deeper and exploring beneath the surface of the initial problem. Through understanding the user’s needs and the wider context of the clients business goals it can be possible to reframe problems with a view to deliver meaningful work with impact beyond initial expectations.

  • Go with the flow. Going from a full-time freelance designer to an internship position can be a difficult adjustment as you may not initially have much ownership, involvement or expectations placed upon you for the projects on which you work. People can be in the midst of projects or working to a deadline and it’s difficult to involve someone who is new to the project. On these occasions it is important to go with the flow, keep in mind the educational value of the position and to be prepared to help out in whatever capacity is available (it also helps to have a side project to work on). 

  • Watch out for seagulls!! (You might be unlucky/lucky enough to have one drop something nasty on your head outside the studio.)

In summary, I see Clearleft as a vibrant and evolving design ecosystem that has a genuine focus on furthering the practice of design as a positive force in the world - and for the next three months I’m thrilled to be a part of it!

Seb will be taking over the Clearleft Intern account - follow his experience on Twitter here: https://twitter.com/clearlefti…

]]>
A workshop on evaluating technology https://clearleft.com/posts/464 Wed, 24 May 2017 08:44:00 +0000 https://clearleft.com/posts/464 After hacking away at Indie Web Camp Düsseldorf, I stuck around for Beyond Tellerrand. I ended up giving a talk, stepping in for Ellen. I was a poor substitute, but I hope I entertained the lovely audience for 45 minutes.

After Beyond Tellerrand, I got on a train to Nuremberg …along with a dozen of my peers who were also at the event.

All aboard the Indie Web Train from Düsseldorf to Nürnberg. Indie Web Train.

I arrived right in the middle of Web Week Nürnberg. Among the many events going on was a workshop that Joschi arranged for me to run called Evaluating Technology. The workshop version of my Beyond Tellerrand talk, basically.

This was an evolution of a workshop I ran a while back. I have to admit, I was a bit nervous going into this. I had no tangible material prepared; no slides, no handouts, nothing. Instead the workshop is a collaborative affair. In order for it to work, the attendees needed to jump in and co-create it with me. Luckily for me, I had a fantastic and enthusiastic group of people at my workshop.

Evaluating Technology

We began with a complete braindump. “Name some tools and technologies,” I said. “Just shout ‘em out.” Shout ‘em out, they did. I struggled to keep up just writing down everything they said. This was great!

Evaluating Technology

The next step was supposed to be dot-voting on which technologies to cover, but there were so many of them, we introduced an intermediate step: grouping the technologies together.

Evaluating Technology Evaluating Technology

Once the technologies were grouped into categories like build tools, browser APIs, methodologies etc., we voted on which categories to cover, only then diving deeper into specific technologies.

I proposed a number of questions to ask of each technology we covered. First of all, who benefits from the technology? Is it a tool for designers and developers, or is it a tool for the end user? Build tools, task runners, version control systems, text editors, transpilers, and pattern libraries all fall into the first category—they make life easier for the people making websites. Browser features generally fall into the second category—they improve the experience for the end user.

Looking at user-facing technologies, we asked: how well do they fail? In other words, can you add this technology as an extra layer of enhancement on top of what you’re building or do you have to make it a foundational layer that’s potentially a single point of failure?

For both classes of technologies, we asked the question: what are the assumptions? What fundamental philosophy has been baked into the technology?

Evaluating Technology Evaluating Technology

Now, the point of this workshop is not for me to answer those questions. I have a limited range of experience with the huge amount of web technologies out there. But collectively all of us attending the workshop will have a good range of experience and knowledge.

Interesting then that the technologies people voted for were:

  • service workers,
  • progressive web apps,
  • AMP,
  • web components,
  • pattern libraries and design systems.

Those are topics I actually do have some experience with. Lots of the attendees had heard of these things, they were really interested in finding out more about them, but they hadn’t necessarily used them yet.

And so I ended up doing a lot of the talking …which wasn’t the plan at all! That was just the way things worked out. I was more than happy to share my opinions on those topics, but it was of a shame that I ended up monopolising the discussion. I felt for everyone having to listen to me ramble on.

Still, by the end of the day we had covered quite a few topics. Better yet, we had a good framework for categorising and evaluating web technologies. The specific technologies we covered were interesting enough, but the general approach provided the lasting value.

All in all, a great day with a great group of people.

Evaluating Technology

I’m already looking forward to running this workshop again. If you think it would be valuable for your company, get in touch.

This was originally posted on my own site.

]]>
Introducing Clearleft Presents https://clearleft.com/posts/463 Tue, 23 May 2017 20:10:00 +0000 https://clearleft.com/posts/463 It will come as no surprise to learn that we’re conference junkies at Clearleft. We love attending conferences, speaking at conferences, and yes, even hosting a few.

Conferences are a great way to gain exposure to new ideas, meet new people, and get excited about the craft. However it’s rare to come away from a talk having gained a brand new skill.

There are various reasons for this, but one of them is the concept of embodied cognition. The idea that you learn new skills by practicing them, rather than just being exposed to the underlying concepts. This is why we also love workshops, and ensure they form part of the programme at UX London and Leading Design.

Over the years we’ve met many amazing speakers and participated in hundreds of workshops, many of which have people talking about them for weeks or months to come. Their content has informed our practices, and the tools we’ve learned are used on an almost daily basis. Everything from sketching and design games, through to design sprints and the business model canvas.

Many of these workshop speakers have become our friends, and will regularly drop us a line when passing through London. One of the things that drives Clearleft is the desire to share knowledge, so we’ve decided to use these visits as a way of sharing workshops with the wider community.

In short, we’re starting a new workshop programme called Clearleft Presents. It will be made up entirely of some the wonderful and insightful speakers from over the years, and will take place roughly once a quarter.

Our first workshop in the series is with the wonderful Blair Enns. We’ve been following Blair for many years at Clearleft, and his “Win Without Pitching” book has been a great influence on the way we do business and sell our work.

I was lucky enough to attend one of Blair’s rare UK workshops six years ago, and it left a lasting impression on me. So he was the first person I thought of when organising our Founders Assembly event last year. Blair will be visiting the UK in early July and we’ve invited him to deliver a workshop for agency founders, directors and biz dev folk called “The Four Conversations” on the 6th July in London. Tickets are on sale now and the venue is purposefully small, so book tickets soon before we sell out.

Following Blair in September, I’m excited to announce we’ll be hosting a workshop with Jake Knapp, author of the seminal Design Sprints book. Jake’s workshop at UX London a few years back was an amazing success; so much so it quickly reached capacity and we were forced to turn people away at the door. Since leaving Google Ventures earlier this year, Jake has been selling out design sprint workshops around the world, so we’re super excited to welcome him back to London in September.

We’re still working out the details of the workshop, but if you’re interested in attending, drop us a line with your details and we’ll let you know when tickets go on sale. Also if there is somebody you’d especially like to see, drop us a line and we’ll try to make it happen.

]]>
Sponsoring Patterns Day https://clearleft.com/posts/462 Mon, 22 May 2017 11:38:00 +0000 https://clearleft.com/posts/462 It didn’t take long for Patterns Day to sell out (in the sense of the tickets all being sold; not in the sense of going mainstream and selling out to The Man).

I’m very pleased about the ticket situation. It certainly makes my life easier. Now I can concentrate on the logistics for the day, without having to worry about trying to flog tickets AKA marketing.

But I also feel bad. Some people who really, really wanted to come weren’t able to get tickets in time. This is usually because they work at a company where to have to get clearance for the time off, and the cost of the ticket. By the time the word came down from on high that they’ve got the green light, the tickets were already gone. That’s a real shame.

There is, however, a glimmer of hope on the horizon. There is one last chance to get tickets for Patterns Day, and that’s through sponsorship.

Here’s the deal: if I can get some things sponsored (like recordings of the talks, tea and coffee for the day, or an after-party), I can offer a few tickets in return. I can also offer your logo on the Patterns Day website, your logo on the slide between talks, and a shout-out on stage. But that’s pretty much it. I can’t offer a physical stand at the event—there just isn’t enough room. And I certainly can’t offer you a list of attendee details for your marketing list—that’s just wrong.

In order of priority, here’s what I would love to get sponsored, and here’s what I can offer in return:

  1. £2000: Sponsoring video recordings of the talks—4 tickets. This is probably the best marketing opportunity for your company; we can slap your logo at the start and end of each video when they go online.
  2. £2000: Sponsoring tea and coffee for attendees for the day—4 tickets. This is a fixed price, set by the venue.
  3. £2000+: Sponsoring an after-party near the conference—4 tickets. Ideally you’d take care of booking a venue for this, and you can go crazy decking it out with your branding. Two pubs right across from the conference venue have upstairs rooms you can book: The Joker, and The Hare And Hounds.

There you have it. There’s no room for negotiation, I’m afraid, but I think they’re pretty good deals. Remember, by sponsoring Patterns Day you’ll also have my undying gratitude, and the goodwill of all my peers coming to this event.

Reckon you can convince your marketing department? Drop me a line, let me know which sponsorship option you’d like to snap up, and those four tickets could be yours.

This was originally posted on my own site.

]]>
The cost of change https://clearleft.com/posts/461 Fri, 12 May 2017 09:05:00 +0000 https://clearleft.com/posts/461 I’m sure anyone who has ever had to call a tradesman into their home may well recognise that pre-quote sinking feeling - often accompanied with a lengthy inhalation and pained ’sympathetic’ expression.

As someone who likes to try and take on most DIY jobs out of both curiosity and reluctance to shell out unless absolutely necessary (I mean, how hard can it really be?), I have discovered the painful line between learning on the job and professional experience more than once.

As a result, I have learnt to temper my curious spirit somewhat and appreciate that we have sensibly created systems which draw lines around tasks that probably should require professional expertise - heating, plumbing, electricity etc - frankly things that for an amateur dabbler hold the potential to be disruptive (at least) and possibly a little dangerous.

But as domestic-focussed technology advances, the number of devices in our homes that rely on ‘traditional’ services (hardwired home infrastructures like pipes and electrical cables), is also increasing. The siting of these devices is often dependant on the physical location of available service endpoints - such as the position of a mains socket or light fitting - something pre-determined in a structure and previously the territory of extension leads, the enthusiastic DIYer or a professional tradesman.

However, we have designed ingenious ways of interacting with these devices so that the controls are in the ‘right’ place for us. Using wireless inputs we have essentially managed to bridge the location divide and place controls wherever they are needed, but this doesn’t tackle the issue of being able to place devices wherever is ‘best’ for their use and for our aesthetic needs - even Alexa needs to source her power from somewhere. In addition, by replacing many physical controls with wireless solutions, what we have gained in ‘ease’ we are losing in tactile control - the physical interaction with objects in our homes seems somewhat under threat, and whilst I love (and indeed use) many of the current solutions, I can’t help but wonder at what point we decide that app-controlled lighting and fireplaces (this really is a thing) are more novelty than function.

But what if those devices or their controls where in the ‘right’ place and those places were determined by us? No tradesman, no sinking feeling, and maybe one or two less controller apps? Well, enter Conduct, a collaborative project between Flavor Paper and UM Project. Essentially an interactive wall covering, Conduct combines conductive wallpaper and functional devices enabling users to see the connections between devices and physically control them - physical touch completes the circuit and operates a lamp, fan, speaker, light box and hinged mirror.

Whilst Conduct is only an interactive installation (currently at NYCXDesign), its’ carefully crafted design demonstrates the potential for a more ‘user-controlled’ approach to traditional services such as electricity - a modular system such as this could enable the (re)siting of ‘endpoints’, allowing devices to be placed and controlled in the ‘right’ place as determined by the user. Conducts’ design of the wiring and interactions is beautiful, but also pushing an aesthetic point - this could potentially be otherwise visualised or ‘hidden’ whilst retaining the core functionality as the technology utilises conductive, water-based inks.

By exposing the ‘hardwiring’ of our electrical systems, Conduct emphasises how much we rely on existing systems to power our ‘new’ technology - the rate of change and advancement in our traditional technologies moves at a much slower pace than our mobile app-based world and there are physical limitations as a result of this hardwired legacy. The interesting question seems to be how we can address this with new solutions - as we move quickly forwards ‘replacing’ traditional interfaces and controls, how can we design interfaces between new and old, helping to future-proof, provide adaptability, cost-effectiveness and still look good?

Oh, and just maybe avoid that good old fashioned sinking feeling?

This was originally posted on my own site.

]]>
Patterns Day speakers https://clearleft.com/posts/460 Fri, 05 May 2017 10:21:31 +0000 https://clearleft.com/posts/460 Ticket sales for Patterns Day are going quite, quite briskly. If you’d like to come along, but you don’t yet have a ticket, you might want to remedy that. Especially when you hear about who else is going to be speaking…

Sareh Heidari works at the BBC building websites for a global audience, in as many as twenty different languages. If you want to know about strategies for using CSS at scale, you definitely want to hear this talk. She just stepped off stage at the excellent CSSconf EU in Berlin, and I’m so happy that Sareh’s coming to Brighton!

Patterns Day isn’t the first conference about design systems and pattern libraries on the web. That honour goes to the Clarity conference, organised by the brilliant Jina Anne. I was gutted I couldn’t make it to Clarity last year. By all accounts, it was excellent. When I started to form the vague idea of putting on an event here in the UK, I immediately contacted Jina to make sure she was okay with it—I didn’t want to step on her toes. Not only was she okay with it, but she really wanted to come along to attend. Well, never mind attending, I said, how about speaking?

I couldn’t be happier that Jina agreed to speak. She has had such a huge impact on the world of pattern libraries through her work with the Lightning design system, Clarity, and the Design Systems Slack channel.

The line-up is now complete. Looking at the speakers, I find myself grinning from ear to ear—it’s going to be an honour to introduce each and every one of them.

This is going to be such an excellent day of fun and knowledge. I can’t wait for June 30th!

This was originally posted on my own site.

]]>
The countdown to UX London is on https://clearleft.com/posts/459 Wed, 03 May 2017 12:20:00 +0000 https://clearleft.com/posts/459 If you know Clearleft, chances are you know about UX London. Or do you? Since I arrived in December last year, I noticed that while some folks know that UX London is a Clearleft event, others may not. No assumptions here.

Whether you’re new to Clearleft, to UX London, or both, (or neither), I thought I’d share a timely insight into the proceedings as we hurtle towards the end of May. Plus I have a favour to ask you lovely attendees (more on that later on).

The low down (in case you didn’t know)

On 24th - 26th May, we at Clearleft will be running the 9th annual UX London conference. It’s a 3-day immersive and mind-bending affair designed to inspire and educate not only UX designers, but whole digital teams. The event tends to sell out and we only have a handful of tickets left now — jump and grab yours here: http://2017.uxlondon.com/

UX London is curated each year by our Managing Director and co-founder Andy Budd. He’s a dab hand at this stuff—and I’m not just saying that because he’s my boss. Andy’s a seasoned international conference speaker, so he always puts together a fantastic and well-informed line-up of influential speakers and leaders who are pushing our industry forward.

We’re proud of UX London, partly because of the reputation it has gained over the years, but mostly because people seem to have a really good time! We really care about the experience people have with us over the course of those three days. But it doesn’t happen by magic, or overnight. I want to shine a spotlight on the incredible work that goes on behind the scenes to make it all happen.

Crack team

Producing conferences and events—including UX London—is an important part of what we do, but it isn’t our core business of strategic and UX design consultancy. We do the events because Clearleft has been built over the years with the underlying principle of ‘learn, share, learn, share’ informing what we do and how we operate. UX London, we hope, exemplifies that principle. We run the event to make sure we keep learning, and keep sharing, collectively.

Kate has been running the events show for the last six years. Over the last four years, Alis has joined us to support the operation so that we can do even more. Other members of the team jump in and lend their expertise to the proceedings, whether that’s UX, design, dev, or the communications that I do.

Behind the scenes

Running events is an all encompassing experience. Months and months of planning and preparation go into UX London, because we really want to get it right for you. To give an insight into what goes on in the final few weeks leading up to the conference, here’s a bit of a brain dump (deep breath):

Drafting and designing emails, commissioning photography, writing briefs, copywriting, copywriting and more copywriting, designing and proofing the programme, social media-ing, commissioning the stage set, confirming the menu, producing merch, planning comms, scheduling, scheduling and more scheduling, briefing volunteers, reporting expenses, booking entertainment, recce-ing venues, booking hotels and travel, along with meetings and phone calls galore. Oh, and ‘liaising’. That’s my personal favourite. We do a fair bit of that. Keeping the lines of internal communication clear while we’re all spinning so many plates is super important. We have regular catch-ups and boards of sticky notes up on the wall to keep us up to speed with what everyone’s doing.

It’s full on, flat out, exhilarating, exhausting, and totally worth it.

A favour to ask

Anyway, that’s what we do for the conference and, more importantly, it’s what we do for all you folk out there who join us at UX London. And with that in mind, I want to ask you, reader, to give us a bit of feedback.

This is a heads up and a specific request. If you join us at UX London, please say “hi” to one of the team and let us know how you’re finding it. You’ll know us by our mug shots below, and we’ll be running around wearing staff lanyards and making sh*t happen on the days.

I know organisers always ask for feedback, and yes, there’ll be some cards you can fill in when you’re there, and yes, there will be a super short survey in your inbox when it’s all over—please do take a couple of minutes to fill that in! It’s standard stuff, but it does make a difference to us.

We want to keep making UX London as good as it can be. We want you to love it and learn from it, and the only way we’ll know what we get right and what we don’t is if you tell us. So in the true Clearleft spirit of ‘learn, share, learn, share’, come to UX London, get learning and then get sharing. And you can also join the conversation on twitter using the hashtag #UXLondon.

Hope to see you there!

]]>
Styling the Patterns Day site https://clearleft.com/posts/458 Tue, 02 May 2017 07:40:18 +0000 https://clearleft.com/posts/458 Once I had a design direction for the Patterns Day site, I started combining my marked-up content with some CSS. Ironically for an event that’s all about maintainability and reusability, I wrote the styles for this one-page site with no mind for future use. I treated the page as a one-shot document. I even used ID selectors—gasp! (the IDs were in the HTML anyway as fragment identifiers).

The truth is I didn’t have much of a plan. I just started hacking away in a style element in the head of the document, playing around with colour, typography, and layout.

I started with the small-screen styles. That wasn’t a conscious decision so much as just the way I do things automatically now. When it came time to add some layout for wider viewports, I used a sprinkling of old-fashioned display: inline-block so that things looked so-so. I knew I wanted to play around with Grid layout so the inline-block styles were there as fallback for non-supporting browsers. Once things looked good enough, the fun really started.

I was building the site while I was in Seattle for An Event Apart. CSS Grid layout was definitely a hot topic there. Best of all, I was surrounded by experts: Jen, Rachel, and Eric. It was the perfect environment for me to dip my toes into the waters of grid.

Jen was very patient in talking me through the concepts, syntax, and tools for using CSS grids. Top tip: open Firefox’s inspector, select the element with the display:grid declaration, and click the “waffle” icon—instant grid overlay!

For the header of the Patterns Day site, I started by using named areas. That’s the ASCII-art approach. I got my head around it and it worked okay, but it didn’t give me quite the precision I wanted. I switched over to using explicit grid-row and grid-column declarations.

It’s definitely a new way of thinking about layout: first you define the grid, then you place the items on it (rather than previous CSS layout systems where each element interacted with the elements before and after). It was fun to move things around and not have to worry about the source order of the elements …as long as they were direct children of the element with display:grid applied.

Without any support for sub-grids, I ended up having to nest two separate grids within one another. The logo is a grid parent, which is inside the header, also a grid parent. I managed to get things to line up okay, but I think this might be a good use case for sub-grids.

The logo grid threw up some interesting challenges. I wanted each letter of the words “Patterns Day” to be styleable, but CSS doesn’t give us any way to target individual letters other than :first-letter. I wrapped each letter in a b element, made sure that they were all wrapped in an element with an aria-hidden attribute (so that the letters wouldn’t be spelled out), and then wrapped that in an element with an aria-label of “Patterns Day.” Now I could target those b elements.

For a while, I also had a br element (between “Patterns” and “Day”). That created some interesting side effects. If a br element becomes a grid item, it starts to behave very oddly: you can apply certain styles but not others. Jen and Eric then started to test other interesting elements, like hr. There was much funkiness and gnashing of specs.

It was a total nerdfest, and I loved every minute of it. This is definitely the most excitement I’ve felt around CSS for a while. It feels like a renaissance of zen gardens and layout reservoirs (kids, ask your parents).

After a couple of days playing around with grid, I had the Patterns Day site looking decent enough to launch. I dabbled with some other fun CSS stuff in there too, like gratuitous clip paths and filters when hovering over the speaker images, and applying shape-outside with an image mask.

Go ahead and view source on the Patterns Day page if you want—I ended up keeping all the CSS in the head of the document. That turned out to be pretty good for performance …for first-time visits anyway. But after launching the site, I couldn’t resist applying some more performance tweaks.

This was originally published on my own site.

]]>
Type with Pride https://clearleft.com/posts/457 Fri, 28 Apr 2017 09:01:00 +0000 https://clearleft.com/posts/457 I love typography - there, I said it. Although whilst I can’t confess to being a true type nerd (mentioning no names Rich Rutter), I am happy to spend plenty of time geeking out over x-heights, ligatures, weights and a whole host of other tiny details to find the ‘perfect’ typeface.

The process of ’sweating the details’ is something I’m sure plenty of designers will associate with typography and is testament to how much effort goes into designing and crafting a typeface. Traditionally these ‘details’ have been constrained to the shape and space that individual glyphs occupy and their relationships to one another - type designers have had no consistent method of embedding additional attributes into a digital typeface - no way of communicating any intentional usage or personality past outlined physical form.

That is until recently - enter ‘colour fonts’. Now, at this point I won’t pretend to have extensive knowledge of the technical details (read - I’ll fluff over them), but essentially colour fonts allow SVGs to be embedded inside OpenType font files, enabling details such as colour and transparency to be designed and inherent to the font itself. Pretty cool. Unfortunately it seems that browser and application support is fairly slim at the moment, but both Firefox and Adobe are on the list, so potential future uptake looks promising.

So what does this look like? Well, a beautiful recent example is the font ‘Gilbert’, created in honour of Gilbert Baker, LGBTQ activist and artist who created the Rainbow Flag. NewFestNYC Pride partnered with Fontself and Ogilvy to produce the font and have released a free standard and colour font version for all to use.

Whilst the standard font is really well designed, it’s in the colour font that the crafting, personality and relevance are really communicated - having lived and worked in cities that explicitly support the LGBTQ movements, for me the font echoes the vibrancy, diversity and positivity of those communities and feels immediately part of their design language - a real homage to Bakers’ enduring work - beautiful.

What is really interesting is how much more personality and intention is communicated in the colour font - without all the additional colour information much of the relevance is missed - in essence the format is enabling the (intended) design. By using technology such as this as part of design, new tools and possibilities are opening up for designers - I’m sure this means much more great work to come, and more details to sweat!

This was originally posted on my own site.

]]>
Real 3D https://clearleft.com/posts/456 Tue, 25 Apr 2017 09:16:00 +0000 https://clearleft.com/posts/456 Striding along a narrow footpath that slices up the side of a steep Lakeland fell, you pause to admire the majestic view – “is that Bow Fell in the background? How much further until I start heading for the tarn?” you muse.

Pondering this, you pull out your well-worn and trusty Ordnance Survey map and check your bearings – perhaps you double check using your compass – reassured, you continue on your way, revelling in the natural beauty and the feeling of being away from it all.

Now, I’m no outdoor purist (ok, maybe just a little), but I will always maintain that the Great Outdoors is there for everyone to enjoy and the ability to get away from our day-to-day lives requires nothing more than a few steps in the right direction. However, if you are heading ‘out’ it’s definitely a good idea to know where you are going, what the terrain will be like and what conditions you might experience before packing accordingly and heading on your merry way. All of these things have traditionally been the realm of the map and a few acquired skills, and there is something very self-assuring about huddling over a simple folded sheet of paper knowing that you can take yourself off, have a great experience and still find your way safely back no matter what the conditions.

However, this is a picture that is changing with the advance of technology – reliance on learnt ‘traditional’ skills such as map reading and compass bearings (the ones on colourful string with an actual needle) is making way for digital alternatives and it has become commonplace to see GPS devices and smartphones out in the wild ‘helping’ to navigate. One recent addition to this is Ordnance Survey’s 3D UK mapping service – essentially a service that enables subscribed users to digitally explore a landscape before setting out.

Whilst initially this might seem like territory dominated by technology companies such as Google, Ordnance Survey’s aim is that their offering will help make a more “enjoyable, accessible and safe outdoors” by helping people “see and understand the landscape they are going out to explore”. The service enables a route to be plotted on interactive 2D topographic maps (part of Ordnance Survey’s excellent existing digital platform) and then see these rendered in 3D – essentially providing an additional layer of information showing detail and risks that that might be missed on conventional 2D maps. By having a better appreciation of an intended environment, the hope is that people will be more easily able to assess whether their goals are within their capabilities, or how best to equip themselves when they are out.

As someone who lives and works in a digital world (but can’t get ‘out’ enough), I’m definitely of the mindset that any technology encouraging and assisting people with a safer experience when venturing outside is a good thing. However, I also sincerely hope that traditional (and undoubtedly life-saving) skills are not overlooked or lost to the advance and inevitable leaning on such technology – batteries run out, electronic devices don’t play well with water and I’m sure we’ve all experienced enough ‘optimal’ GPS routing in the past to know that when it really matters being able to rely on your own knowledge and abilities is unrivalled and can be very empowering. It’s also important to remember that exploration plays an important role in enjoyment – I wonder how much one’s immersion and sense of adventure in a ‘new’ landscape is altered when they have already been there, albeit in a digital fly-through?

All this said, it’s really encouraging to see that organisations such as Ordnance Survey are embracing and utilising technology to help encourage, engage and empower people venturing outside. And let’s face it – the UK is really a stunning place however you look at it – so for me, playing with a carefully designed and crafted platform such as this – augmenting routes, details and data onto beautiful 3D landscape can’t help but inspire – great work.

(Although I do have to add that one of the ‘secrets’ to some of the best outdoor experiences I’ve ever had was to grab my map, get out there and explore the ‘real’ 3D).

This was originally posted on my own site.

]]>
There are maps for these territories https://clearleft.com/posts/454 Thu, 20 Apr 2017 10:25:00 +0000 https://clearleft.com/posts/454 The first programming language I ever learned was BASIC. I quickly moved on to C and C++, then later learned PHP, Javascript, and dabbled in C#, Python, and Common Lisp. To me, these languages all had certain things in common.

Over time I discerned a landscape of common features. There are structures you learn to recognise. Those structures form your mental map of how a programming language should work. You find shortcuts through this landscape. These shortcuts are necessary to become productive as a programmer, but they sometimes have undesired side effects.

Not every type of language in computing is a programming language — one in which you can express an algorithm. Markup and stylesheet languages have different roles and capabilities; they are concerned with semantics and presentation. There are things that you simply cannot do in HTML or CSS. There are things you can only do in HTML or CSS. These languages have their own landscapes which are quite distinct from programming languages, although they can share some superficial features.

I remember quite clearly the frustrations I encountered first learning CSS. Setting rules only to have them ignored; setting rules only to have them do something completely unexpected; tracing back up through the cascade, trying to discover why one rule was overwriting another. We’ve adopted strategies like BEM to making styling easier, but it is no surprise to me that people first encountering CSS — particularly from a programming background — find it frustrating. The mental maps I’d created whilst programming, together with the superficial similarities of CSS, led me to assume that things should work the same way, when they demonstrably didn’t.

In a typical programming language, declarations take effect precisely as you specify them, and remain in effect until you instruct them otherwise. In CSS, a rule can be declared, but if certain other conditions are not met, the rule will not be applied. Not only do you have to learn the rules, you also have to learn the conditions under which they might apply. Add the cascade, which has its own set of calculations regarding conflicting rules. Add inheritance, which specifies default rules when nothing else applies. The complexity adds up rapidly. However, most of this complexity exists for a reason.

All stylesheet languages have a set of requirements, and stylesheets on the web have even more. On top of typical stylistic rules, the language must also be able to negotiate between conflicting stylistic preferences: a user might have fonts on their browser set to a large size to help with legibility, whereas the developer may have set them to be much smaller. The language must be robust enough to still display something sensible if the style resource doesn’t load. It must also be able to handle different devices, resolutions, and sometimes arbitrary content. Nowadays, well-written sites are written responsively, so not only does CSS handle styles, it handles these styles as they change across space and time.

To emphasize: CSS isn’t a programming language. It’s a stylesheet language. We shouldn’t expect it to behave like a programming language. It has its own unique landscape and structures, ones that people with programming language mental maps might not expect.

I believe that this mismatch of expectation is what has led to the current explosion of CSS-in-JS solutions. Confronted with a language that seems arbitrary and illogical, and having spent little or no time exposed to the landscape, developers dismiss CSS as ‘broken’ and use systems that either sweep it under the rug, or attempt to force it into alignment with the landscape of a programming language — often sacrificing some of the most powerful features of CSS.

This is not to say that I think CSS-in-JS is necessarily a bad thing. CSS Modules and the ICSS Spec are an excellent attempt to deal with one of the major drawbacks of CSS — its global-by-default nature. Many systems do a good job of creating and inlining critical CSS whilst extracting the remaining rules into separate stylesheets. Unfortunately, this usually depends on proper configuration, which means that the default implementation pushes inline styles. There is often a cost to writing CSS this way, expressed in heavier HTML pages with no caching of styles. This cost is then paid by the end user.

CSS does an awful lot, and in a ideal world it would be treated with the respect it deserves. Of course CSS isn’t perfect, but no-one is arguing that it is. No-one would argue that Javascript is perfect either, but it has come to be respected for what it does do well. People with previously established mental shortcuts who dismiss CSS as ‘broken’ when it doesn’t work as expected, could take the time to understand how CSS is different, and learn to work with it rather than against it. I recognise however, that not everyone has the time, resources, or desire to learn CSS at a deeper level. In a less perfect but perhaps more pragmatic world, our CSS-in-JS tools would, at the very least, have proper configuration by default and ensure that powerful features like inheritance and media queries are readily available. After all, we’ve tried CSS-in-JS before. We should learn from the mistakes of the past.

]]>