Rather unfairly, I tend to be a bit wary of the word ‘banter’. It conjures up images of the none-too-subtle blokey chat popularised by magazines like Loaded and TV shows like Sky’s Soccer AM.
Still, I’m glad I didn’t let the name put me off attending Design+Banter earlier this month, a London event organised by Gearóid O’Rourke and Sam Willis.
The evening brought together around 150 web professionals to drink free beer (thanks guys!) and listen to three guest speakers talk about design concepts, projects and ideas.
Of the three talks, the one that really stuck with me came from Gil Wedam, lead designer at Citymapper.
If you’re not familiar with Citymapper, it’s an astonishingly good app that helps you find your way around major cities like London, Barcelona, New York and Berlin.
Its elegantly-simple screens hide a wealth of functions and some playful touches, which have helped it garner a bucketload of five-star reviews.
Gil began his talk by explaining how Citymapper became feasible when several elements aligned:
- Smart phones had become widespread, so any such app would have a big potential user base
- City authorities were beginning to open up their transport data to third parties
- Nobody else had created a really good, comprehensive app covering all modes of transport
Obsessed with people
More than anything, Citymapper’s approach to design puts it ahead of competing apps. And as Gil explained, their philosophy is to always ‘design for humans’.
Sounds obvious, right? Well, the Citymapper team go to significant lengths to put people at the centre of the app, at every stage.
They begin with a list of specific questions that the designers want the app to solve. While other apps might say ‘get me from A to B’, the Citymapper team aims to get right under the skin of potential users:
- I kinda feel like walking, do I still have time for that?
- It’s freezing! How long do I have to stand at this stupid bus stop?
- I’m late. Again. Any Boris bikes around?
An illuminating slide at the start of the start of the presentation (pictured above) revealed how these — and other — questions aim to reflect real-world user situations.
This obsession with human situations manifests itself in every aspect of the app. But the results screen is perhaps the most obvious place to see it:
It successfully crams a huge amount of information into a small space, giving you all the details you need to make a decision about which mode of transport to use.
Crucially, it doesn’t tell you the ‘best’ option based on some narrow criteria. It gives you choice, letting you decide for yourself.
That shows respect for the user by keeping them in the driving seat. It’s open data of a sort, because it doesn’t try to second-guess what you want to see.
Design begins with words
Then there’s the language. As Gil remarked early in the presentation, ‘design begins with words’.
At Citymapper, they spend lots of time finding out what people call things, aiming to use the same language in the app.
It’s a simple principle that works across all sorts of content — from conversion-focused sales copy to microcopy on forms and, yes, in-app content.
Using the language that your users speak means they’ll understand you. It shows empathy. And it makes it easier to connect with them during the short period you have their attention.
Gil’s team understands this. That’s why Citymapper says ‘get me somewhere’, not ‘search routes’ or ‘find journey’. That’s why it says ‘thinking’ while searching for results, instead of ‘searching’ or ‘processing’.
And that’s why Citymapper is by far and away the most enjoyably useful transit app out there.
Citymapper is available for iPhone and Android.
Information about the next Design+Banter event should be posted online in due course.
Turning a traditional company into an internet-only operation isn’t hard. The hard bit is doing it while managing to still turn a profit.
And while many brands have struggled with the digital world, Auto Trader — one of my regular clients — has adapted impressively.
No more magazines
The company was once best-known for its weekly magazine full of ads for new and used cars. But the last edition rolled off the presses around a year ago.
Today, the company relies on its website and mobile apps to reach car buyers, sellers and owners.
I can’t claim any credit for that long-term success, of course. But I am pleased that the first Auto Trader project I worked on recently picked up Digital Product of the Year at the British Media Awards.
This substantial project was a complete rethink of the way people can advertise their cars through Auto Trader.
The vision was to create a process that would function across desktop and mobile devices, allowing users to switch to the most convenient device at any point.
For instance, if you need to take photos of your car, you can just grab your smart phone and upload them from there.
Simplifying a complex process
Creating an ad for your car is a complex process. You have to enter detailed information, upload images and constantly think about how to show your car in the best light.
I came into the project relatively late on, so most of the credit for the experience should go to the team that worked on it from the start.
However, I did craft virtually all the content in the process, from form labels and error messages to hint and help text. This consistent, friendly copy is designed to help and encourage visitors through the process.
Although very similar, the desktop and mobile experiences are tailored to take advantage of each device’s capabilities. This introduced the challenge of delivering subtly different content while maintaining a consistent, logical experience.
It took a while for everything to come together, but I think the result is a great example of the power of UX content and microcopy.
How did it turn out? You can see for yourself by creating an ad on Auto Trader. But as far as the British Media Awards go, it’s a winner.
Read my case study to learn more about this project.
In The Economist, nothing ever spreads like wildfire
It’s often said that good writers should read often and read widely. One source of consistently strong writing is The Economist.
Although you can find superb prose on its website, the magazine is well worth its £5 cover price.
At face value, you might expect it to be a dry, sober read. But The Economist brings complex subjects to life through writing that’s exceptionally clear and instantly engaging. Here are a couple of examples.
Using unnecessary words
Published recently, this moving piece examines how Northern Ireland is dealing with crimes committed during the troubles.
It includes an interview with June McMullen, whose husband was shot in 1981.
The first quote in the piece ends with three words that hint at the human cost of political wrangling and help the reader paint a picture of the interview in their mind (the emphasis is mine):
‘“I knew he couldn’t have survived it,” she recalls, over tea in her spotless kitchen. “Johnny was pronounced dead at the scene, so he was.”’
That ‘so he was’ is a typically Northern Irish turn of phrase. Including it in the piece seems to contradict a key rule of The Economist Style Guide (‘if it is possible to cut out a word, always cut it out’). Yet it adds detail and introduces some emotion, drawing you into the piece and enticing you to read further.
Knowing when to break the rules is, it seems, an important part of crafting articles fit for The Economist.
Putting a new twist on an old cliché
In the same edition, there’s a fascinating article about how new crop strains could help pull millions of people out of poverty.
The style guide’s first rule is ‘never use a metaphor, simile or other figure of speech which you are used to seeing in print.’ The opening paragraph of this piece is notable for following it:
‘Borlaug’s varieties put out more, heavier seeds instead. They caught on like smartphones.’
In The Economist, good ideas don’t spread like wildfire, sell like hotcakes or grow like weeds.
They do something more original, because clichés should be avoided like the plague. Ahem.
For more writing inspiration, check out The Economist Style Guide and website.
Image: Flickr user woodleywonderworks under a Creative Commons licence.