Long Live Page Description Diagrams

I've never been the kind of designer that locks down ideas and expects other team members to understand and support my ideas. Design artefacts should be used as a platform for collaboration and to that end, Page Description Diagrams are great.

A project that I came to late at Lightmaker was the creation of The Rest is Noise (TRIN) website for the New York music critic Alex Ross' The Rest is Noise book.

Our Creative Director asked me to get involved in the project after he'd shown some initial look and feels to the folks at the Southbank Centre which they had loved and approved straight away. To create wireframes at this point would've been counter productive because:

The Page Description Diagram

There's a lot of posts out there about why people love PDDs, my favourites have to be:

A PDD is perfect to sit within the processes for creating a responsive website.

With limited time and budget, I had to be careful that the work I produced, was as effective as possible. So after some stakeholder phone calls, I knew we needed to focus on the conversion path as the ticket sales were handled by the main Southbank Centre website and we couldn't lose customers in the transition. So as well as the PDD, I also created a selection of user journeys.

The client's response

I was curious as to how the client would react to the PDD, they had traditionally only worked with wireframes and looked perplexed at first. Once I'd explained it, they were straight in there helping me change the priority of elements and adding insight.

The design team's response

I think they were assuming I'd give them wireframes that would rearrange their page so when I passed them the PDD, their eyes lit up and a day later, the comps were signed off and we were beginning the build.

Creating the Page Description Diagram

To save time I ended up using Axure (for the user journeys too), it's quick to place simple elements on a page and could spit out a PNG for me to distribute. Simple.

The Page Description Diagram showing page elements in order of importance from highest to lowest.
The Page Description Diagram I created showing page elements in order of importance from highest to lowest.