Month: November 2011

Touch The News Workshop at Mozilla Fest

Mozilla Fest 2011 took place in London last weekend. Mozilla Fest is

The Mozilla Festival is a yearly celebration that brings together hundreds of passionate people to explore the frontiers of the open web. We mash developers, designers, and big thinkers together to make things that can change the world.

This year’s theme is Media, Freedom and the Web—how can the web can make us more creative, collaborative and connected in an age of broadcasters big and small?

I was invited to stop by for the day-long hack session “Touch the Web”, best described by the organizer, Johanna Kolmann, as following


We split up into teams based on creating groups of balanced skills, and self-organized into a format in which we discussed in the morning what we wanted to pursue, what our angle would be to make an iPad version of the Boston Globe website, and hack it together in the afternoon.

PostIt Notes on the wall behind developers conferring
If there are no PostIt notes, there wasn't a UX cycle.

There was no time for a full User Centered Design process, but there was to discuss our expectations from online news media, our frustrations, and what we felt a news source on tablets should have. Writing and posting our wants, likes, and needs on PostIt notes gave us targets and a framework to keep in mind, which we then distilled to the Use Case we wanted to attack. Working that out by comparing to elements of sites we did like—also known as Best Practice or Competitor Research—we sketched a goal together, and in the afternoon we got to work to create a prototype on the iPad.

Large notes on the wall with sketches for a visual interface.
Always keep sketches visible for the whole team during work.

In a sense a very Agile process of defining a story, a goal, and a way to get there quickly. However, in Agile, at the point where developers go heads down to do the work, the UX team can then do preliminary work to get ready for the definition process of the next sprint, or consult on interaction details as the sprint continues. Except that eight now for us there wasn’t a new sprint waiting to prepare for, and there weren’t that many details of the interaction to really oversee.

But UX can always help the developers develop better: I started bringing them coffee and snacks.

First Consult

The first consult was in the lovely “Inn The park” cafe in St James’ Park, where I went over a mobile and an online proposition with my first “client”, Chris. We covered a range of topics and technologies, but what I want to discuss now is based on an initial sketch he brought for the online service. It was appropriately minimal for a modern web service, asking for just a tiny bit of information to then show in return what the possibilities of the proposition were. While a huge step ahead from services that want you to create whole accounts and enter passwords before showing you anything about what the service really does, it was, based on all the user tests I have seen, a little too minimal.

The questions that every front page of a site needs to answer, are

  1. “Is this for me?”
  2. “Do I want this?”

Failure to answer these means people in your target population will almost immediately move on, as they are awash in an Internet sea of alternatives. During testing I have found that users switch off real quickly from the proposition if they can not for themselves answer these questions within minutes, reporting back with “I couldn’t tell who this was for” and “I couldn’t tell what I was supposed to do here” with always the corollary  “so I stopped caring / was frustrated / moved on”. That is not the response we want as creators.

While a front page or opening screen full of mystery works for certain propositions, it usually only does when the user has somehow already bought in to the idea that there’s value to be had there. If not, and especially when designing a page for a service, you have to answer these questions in a way that can be absorbed in seconds by a first-time visitor.

To help get to those answers, re-cast the questions as:

  1. Who is this for?
    Once you know, make sure all your font, colors, graphics, tone of voice, amount of text, and lay-out choices speak to the people this is for.
  2. What can they do here?
    Find a way to explain the answer to this within seconds. It can be that your prominent single Call To Action makes clear what you want them to do, it may be a diagram that explains your proposition in simple steps, it may be a list of actions to take. But it must communicate the proposition and the actions to take fast, in any way you can.

I would caution against addressing question 2 using only a video on the front page, though. Fashionable as that currently is, video does not serve users who come in while at work in busy open-plan offices and have a lot of noise to deal with, users with specific accessibility issues like vision or hearing impairments, people using constrained mobile devices, people in low bandwidth situations, people who for any reason only have a little attention available, and many more. Video is a great way to communicate, but make sure it is not the only one.

And it is surely also a good exercise: if you cannot explain your proposition in a few sentences or a simple graphic, should you be investing all these resources in making it? Are you focused enough, are you clear enough on what it is you are building?