-
Agile as a ‘Cargo Cult’
In our rapidly converging media world, we hear the word “agile” bandied around a lot these days – sometimes, it has to be said, by people who don’t actually have a scooby about what it really means to work in an agile way. From the outside, agile can look simply like a process for getting things done really fast within less silo-ed teams.
Rapid, iterative, profitable, engaging… blah blah blah. Who doesn’t want to put a thick ‘done’ tick next to each of these on their to-do lists? Saying “agile” is like casting a spell. It’s another one of those words with talismanic power – investing its speaker with the magical puissance of understanding digital production, as if its utterance causes the scales to drop from ones eyes in a singular transformative moment of ‘getting it’. It’s like the “open sesame” of integrated thinking, design and development – literally opening a treasure cave. It’s like a silver bullet. It’s as easy as swallowing the red pill.
Actually that’s bollocks.
Where many fall down is in understanding that there is a huge gulf between the idea that agile is a process (which it isn’t) and the need for a philosophical understanding of its potential benefits. It’s all too easy to adopt the outward form of agile without understanding the underlying philosophy at all.
This reminds me of the phenomenon of Cargo Cults, described by Wikipedia as:
…A type of religious practice that may appear in traditional tribal societies in the wake of interaction with technologically advanced cultures. The cults are focused on obtaining the material wealth (the “cargo”) of the advanced culture through magical thinking and religious rituals and practices
The best examples of Cargo cult activity are known from the Pacific region and are recorded in the aftermath of World War II when military bases were closed and the flow of goods and materials ceased. In an attempt to attract further deliveries of goods, indigenous followers of the cults engaged in ritualistic practices such as building crude imitation landing strips, aircraft and radio equipment, and mimicking the behaviour that they had observed of the military personnel operating them. Sadly, the bases, troops and good times never came back.
My favourite example is from the island of Tanna in Vanuatu, where cult members worship none other than HRH Prince Philip. The ancestral story of a pale-skinned racist son of a mountain spirit venturing across the seas to look for a powerful woman to marry mutated into the Prince Philip Movement – a myth only reinforced by a royal visit in 1974 when they finally got to meet him.
Stuart promises to follow this post up with another that he says will be about the framework of agile methodologies and philosophies we use, and which we kind of believe are both important.
-
“Get Excited And Make Things”
That’s the line that unpacks ‘Planning-ness‘ – an ‘un-planning’ conference held recently in San Francisco.
The idea of “making” things as a way of exploring ideas and developing and articulating strategy is close to our hearts at Made by Many and Planning-ness sounds like a veritable Festival of Awesomeness. I’d love to go next time.
But it was this provocative deck by Jason Oke and Gareth Kay that got us really excited. It’s about the failure of ‘Connections Planning’, the discipline’s historical context, and what it seems to be mutating into – or at least needs to turn into in order to continue mutating.
As someone who is not a planner of any description and doesn’t even work in advertising, I’m not sure I am that entitled to talk about it – although that’s never stopped me before.
It feels like we (the MxM ‘we’) have lots in common with the kind of problems Jason and Gareth are trying to solve, and with the agenda of Planning-ness in general. We come at these problems from a slightly different set of perspectives: Interaction Design, Service Design and Agile Methodologies, but everything is converging – seemingly even our job titles, what we do, and certainly the industries we work in.
Here’s the deck, below. I’ve also picked out some of the highlights (from our MxM perspective). I’m hoping it will provoke a debate inside our company about what we do and how we talk about it – and so, I’m not going to comment too much right now.
I’m also hoping to write something more about the ways we’ve been working experimentally with BBH in very integrated teams on some projects. Mixing what BBH call Engagement Planning up with Interaction Design and Software Development, all within a broadly Agile process, has been really rewarding – and is very relevant to ideas Jason and Gareth set up in Connections Planningness.





-
Pulling Off The Optimal Platform Job
Another week, another blog post on the subject of “why creative advertising folk need to embrace ‘technologists and their geeky ways’” once again ignites vigorous debate.
The post in question is by Joe Mele, VP Client Partner at Razorfish, and received a great many comments and a huge number of re-tweets of the @BBHLabs‘ tweet that contained a link to it. The citizens of Twitter seem to react with a combination of self-loathing and schadenfreudian glee to the disruption that social technologies are wreaking on advertising. It’s a little bit dull and frankly misses the point – and it wasn’t quite (I don’t think) what Joe was saying.
Of course, how advertising responds to the digital challenge is a roasting hot topic. Joe’s blog post quotes a recent article from Ad Age provocatively titled ‘Agencies Need To Start Thinking Like Software Companies’ that talks about hybrid creative techies bringing digital know-how to Madison Avenue. If only it were that easy. It seems overly simplistic to claim that everything will be okay if they hire in some digital savvy, perhaps even ‘developers’ – let them attend client meetings and, you know, even help out with creative ideas and stuff.
Unfortunately, I think it’s a lot more complex than that – and whilst I totally agree with everything Barbarian Group Co-founder Rick Webb, says in the Ad Age article, I’m not convinced he *totally* nails it either:
What they should have been taking away all of this time — and have increasingly begun to — are the concepts of the constant beta and agile development. Marketers need to abandon the time-limited campaign online and start to think of it as a constant application of a rigorous discipline.
Rick’s completely right about needing an agile, adaptive, evolutionary approach, but I’m starting to believe that you need more than that to deliver the kind of long-term living platforms and platform-campaigns – and value – that clients need and agencies must get better at creating. I’m starting to believe you need four things, the first two of which are well-known and increasingly often quoted:
-
The future of wireframes?
I have a love hate relationship with wireframes. In the last 10 years they’ve been a part of every web project I’ve worked on. There have been times when I can’t imagine how we would have solved a particular problem without them. Yet there are also times when I’ve been completely exasperated at the amount of time and energy they’ve consumed, seemingly to very little reward.
This frustration has forced me to change the way that I approach wireframes. And as my approach has changed, I’ve been able to extract more and more value from black key lines and grey boxes…
From functional to visual

10 years ago the first wireframes I used were about as functional as you can get – a long list of page elements: static text, dynamic text, input text, radio button and so on. They were universally awful. About the only concession to help people understand how the page worked was to group common functionality into individual tables.
The wireframes were functional rather than visual as they were used to describe how the page should be built. Certainly, when you consider the screen from a developer’s perspective a list of different functional elements is probably quite logical.
However, from a user experience point of view this was a killer. Functional wireframes are incredibly difficult to read – the method of presentation gets in the way of being able to translate the information into a real screen, especially at the review stage.

Looking at this image it seems obvious that wireframes should be visual, however, IA was in it’s infancy ten years ago. Everything was new.
Wireframes also took a long time to produce. Changes to one wireframe often meant updating countless others. Change to the global nav? Certainly. Just one moment whilst I update 120 wireframes with that one.
Understandably, this hampered attempts to create wireframes that more closely represented real life screens. To help get around this, when they did become visual, they also become modular.

The modular approach to wireframes also reflects the reality of building sites. Functionality and snippets of code are built once and then reused over and over again. So why not create wireframes in the same way?
Visual wireframes also started to break down a belief that information architecture can be considered in isolation to information design. The information is the interface. How can the two possibly be separated? Join them together and you start creating wireframes that can be read and understood by everyone on the team, including the client.
Of course, this can raise the problem of clients expecting the final screens to be identical to the visual wireframes. “In the wireframes the submit button is on the right of the drop down, but in the designs it’s below. Why?” This requires careful client management, but it can be largely avoided if the wireframes concentrate on getting the ideas and thinking across, rather than just laying out a page.

Once wireframes are created using information design as a technique rather than just a visual conceit, they can be used to explain how a site will be experienced by the end user. In the example above the different colours represent different areas of content, targeted at different types of users. The client and the team can then get inside the screen and understand how it works and what the priorities are. It’s a very different world from 1999 – a list of functional elements that only be read by the one person – the author of the original wireframe.
As wireframes have evolved, the methods behind creating them have changed too.
Fail fast

Several years ago I can remember working on projects where the wireframes felt as if there were merely a documentation or cataloguing tool. The object was to create as many wireframes as possible, of every screen in the entire site, in big, monolithic and hugely detailed chunks. Rather than exploring different approaches to the information and structure of the site, the emphasis became entirely focused on using all of the time available to build a collection of wireframes, regardless of whether they were the right wireframes.
At Made by Many we practice a very iterative and rapid approach to wireframes. We create the smallest number of wireframes to explore a concept before stopping and reviewing. Does the idea hold up? If so, add on another layer of information and see whether it still stands. If it doesn’t, change direction and explore another route.
As we start off by only doing enough to prove the idea (and no more), the cost of change is so small that you can very easily change direction without having lost time or money. Ideas are allowed to grow or fail fast.
Explore interactions, don’t just specify software

For many years the primary role of wireframes was to specify software. We now use wireframes to investigate and explore how people will interact with a site. Using a ‘just enough’ approach, we often create a series of simple interactive prototypes to try out a variety of approaches to solving a problem. These prototypes can be made in HTML or they can be as simple as a series of Keynote slide for someone to click through.
This is a very different approach to wireframing. Rather than simply documenting where a link goes, the goal is to model and start experiencing what moving around a site feels like as quickly as possible. The prototype can then be tested and the results used to iteratively improve the end solution.
Of course, sites still need to be specified, but wireframes aren’t always the right tool for doing this.
Nobody likes reading wireframes

No matter how much love and attention is poured into a wireframe, they’re cast aside as soon the screens have been designed. Nobody likes reading wireframes, especially when there’s a picture available.
I’ve yet to meet a developer who would choose to build a screen from a wireframe over a Photoshop document, regardless of how many helpful and important details the wireframes may contain. Realizing this is human nature, we now annotating our PSDs rather than wireframes. Why hold the information in a document that’s no one wants to read?
The best before date keeps getting shorter

For a long time wireframes were seen as one a project’s major deliverables. The client was paying for them as part of an agency’s ‘set piece’ best practice. Because of this they were constantly updated throughout the life span of a project, regardless of whether they actually needed to be. I’ve seen perverse instances where a set of wireframes have been updated after the site has been designed, merely to ensure that the wireframes match the finished site. Why update a document that’s never going to be used again?
As more projects are developed using agile methodologies, where the working software is the spec rather than a set of documents, the useful working life of a wireframe is getting shorter and shorter.
The right approach

In a previous life at a big ‘old style’ new media agency, there often seemed to be a one tool fits all approach to projects. This applied to information architecture too – there was a set way of creating and delivering wireframes, regardless of the individual needs of the client.
In contrast, we’re now lucky to have a wide range of tools and techniques that allow us to approach a problem from the best angle. A sketch, a grey wireframe or a full on keynote prototype. These tools allow us to develop a solution in iterations, slowly adding on more detail as the solution becomes closer to a design that can be built.
Whilst there’s a natural progression from sketch to a detailed wireframe, it’s important to never feel constrained by the life cycle of a project. A sketch can be done at any time (and by anyone), regardless of where you are in the process.
Wireframes aren’t the keystone

In the same way that the guild of stonemasons kept the secret of building arches to themselves, wireframes shouldn’t be the preserve of a select group of information architects. As wireframes have become more visual (and more useful) the number of people able to contribute to their development has increased. This isn’t just a list of designers and developers, it’s also clients and business analysts who are becoming more and more involved with the process.
We often involve all of these people in collaborative sessions around a whiteboard to gradually ‘build’ the interface of a site. It’s a different way of working that involves people in a very different way to help create a better service. It’s also a way of working that’s slowly demystifying information architecture, changing the way that we interact with it and, ultimately, who creates it.
The designer as information architect

As wireframes have developed the role and skill set of information architects have developed too. The most effective wireframes are now created by people who can see how a site fits together as a series of connected interactions. Who see the information as the interface, and understand that these two can’t be separated but yet can be affected by time and place.
The more that I appreciate these skills, the more that I believe that wireframes can (and should) be created by designers.
The best sites are those where there’s a seamless divide between the look, the content and the experience. Being able to model an interaction and understand how someone moves through a site are crucial skills in this trilogy. It’s time designers stepped up to the plate and claimed wireframes as their own.
-
Behind the scenes of LOVEFiLM’s new product pages
We’ve been working with LOVEFiLM for some time now. They’re a very exciting client whose business model is built around the internet. They’re also a very successful client, having just passed 1 million subscribers to their DVD rental service.
One of the projects we’ve been working on recently is the redesign of their film pages. These are absolutely at the heart of the service – they contain all of the information about each title that LOVEFiLM has, including user reviews, recommendations, interviews, news stories and cinema listings. Seeing as LOVEFiLM have over 65,000 titles on offer it’s important that they work hard.
Rather than simply showing you the great work that one of our Senior Designers, Julia, has created, I thought it might be useful to show the process behind the project…
1. Requirements wall

Our first step on this project was to get under the hood of the current site. Using the existing film pages as our starting point, we collected together all of the content, interactions and functionality in one place.
This ‘wall of requirements’ allows us to see everything in one view and therefore helps us gain a better understanding of the problem. The process of breaking down the site, freely annotating and then rearranging and grouping components together is invaluable.
Having a physical representation of the problem we’re trying to solve also makes it easier to talk around. It’s not long before a requirements wall becomes overlaid with layers of notes, questions and answers – either from ourselves or from the client.
______________________________________________
2. Block diagrams

Once discovered, the finer details then allows us to take a step back. Rather than being constrained by details, we now want to open things up and explore a wide range of approaches.
Assigning a colour to each block of content (purple = video player, light blue = user reviews, cerise = pack shot etc) we then used Keynote to create a series of block diagrams.
The simplicity of these diagrams allows us to experiment freely with a wide variety of layouts, without being constrained by time. Keynote is a perfect tool for this approach – we can be creative, quickly.
We then reviewed these layouts (and an analysis of the competition) with the client. The consistent colours across all the layouts makes it easy to compare the relative merits of one approach against another.
______________________________________________
3. Photoshop design sketches

Once an initial route had been chosen we start sketching the page in Photoshop. Whilst it may feel unfamiliar to hear the term sketch used in conjunction with a program known for producing highly polished, finished designs, sketching is exactly what we’re doing.
At this stage we’re not excessively worried about the look and feel, or the details being pixel perfect. It’s all about getting the design to a sufficient level to prove that the chosen approach works and feels right.
Sketches are created by laying out the new page using found elements and elements of the existing site to save time. Only elements of the page that are specific to the new approach are created from scratch. This ‘just enough design’ method allows us to get to a working proof of concept as quickly as possible. We can then get feedback from the client and continue to develop the page in an iterative way.
______________________________________________
4. Detail exploration

As part of the design, we also wanted to introduce a new type of interaction metaphor that hadn’t been attempted on the existing site. (In this case, using an accordion to hide and reveal the different options for renting, purchasing and/or watching a film).
As this functionality handles some of the most crucial interactions on the site, we wanted to elaborate our thinking here to prove that the solution would work. We created a series of comps we could use for testing that showed off the interaction and all the different data sets the accordion would have to handle.
It’s important to note at this stage that the designs we’ve created are still not branded. The designs are polished enough to prove their viability, however, not so polished that we can’t make changes quickly based on the client’s feedback.
______________________________________________
5. Sketch and fail fast

As is often the case with the design process, as the screens become more real so does the understanding of the project’s requirements. Sometimes the very process of design can also uncover requirements that haven’t been fully expressed before.
Although change can be intimidating, we embrace it. One of the joys of sketching is the ability to visualise ideas quickly and, if necessary, fail fast. By concentrating on idea generation and then adding sequential layers of look and feel, we’re able to adapt and change quickly.
In this case, as well as our own sketches, the client created some of their own to try out a new idea. This was then added into the designs we’d created so far.
______________________________________________
6. Production designs

Once the route had become firmer we started to turn the pages into production designs. As you can see from the above image, the design now begins to take on the shape of LOVEFiLM. Although the look and feel has been at the back of our heads throughout the entire design process, here it really comes to the fore. For example, the black was introduced as a background colour to help the video player feel more cinematic.
Regular meetings with the client team helped keep the project running smoothly – both to review progress and to collect any specific, detailed requirements and feedback. These continual review points also meant that we were able to hand over the screens in batches throughout the production design phase, rather than in bulk at the end.
______________________________________________
7. The streaming player

The page also includes a streaming media player for trailers, interviews and films. It was very important that this was integrated fully into the design – both from a functional and visual perspective. Using wireframes and requirements from the client, we designed the player at the same time as the film page.
The designs for the player included all of the rollover states and interactions, such as dialogue boxes and ‘more like this’ recommendations screen that appears at the end of each trailer. These were specified fully and then handed over to another development agency to be built.
______________________________________________
8. Specification

AJAX overlays, message boxes and different rollover states were specified for the film pages as well. Whilst this can be a laborious process, it’s often in these small details that the design comes alive – those finishing touches that can seduce a user into falling in love with a service or product.
______________________________________________
9. Build, test, iterate…

The new film pages have been live since the middle of March. (The screenshot above is a pre-release design that uses German for the tabs – the new pages also have to work in Danish, Finish, German, Norwegian and Swedish as well as English.)
As with all agile projects, new iterations are planned for the future, as well as rolling in any feedback and comments from LOVEFiLM’s active community of subscribers. Hopefully, we can continue to share the process with you as it happens.


Remember, it’s software. To most above-the-line folks software is a black box. You put great ideas in one end and disappointing stuff (compared to their inflated expectations) comes out the other end. The black-box model treats technology as a kind of grubby witchcraft. There is little or no idea of relative complexity, cost, resource or time implications of building the software to make the great ideas happen.