Collaborative Prototyping

I am currently working with the talented guys at Jasper Morrison to rebuild their website. They are a versatile design studio, creating all manner of iconic objects for companies such as Vitra and Muji to name a few, as well as many larger scale urban and architectural projects. It's fair to say they know a bit about the design process.

When you work with the right client such as these guys who are really engaged in the journey, then it can be a wonderful thing. I thought I'd take some time to document some of the design iteration that we are currently engaged with as a great example of rapid collaborative prototyping.

Identifying problems

Before any design work was done we took time to understand what needed to be improved. The main site design hasn't been touched for over six years and it was clear that the content had outgrown the original structure.

To address this we began the project with a workshop with the team in the studio. I facilitated a session where we went through a number of exercises:

  1. Firstly I asked them to verbally guide me through the main areas of the website from memory as best they could. I love this exercise as provides great insight into how people see their website and can instantly reveal many assumptions and priorities.
  2. With that fresh in mind, we then we did a collective site review. This meant objectively rating the site against a number of criteria including as ease of use, relevance of information and consistency.
  3. We spent a little time gathering site analytics ready for analysis later
  4. Finally through group discussion set out to come to a shared understanding of the purpose of the site. This resulted in the following definitions which help to shape the design process:

What is the core purpose of the site?

  • To be a central, authoritative reference point for Jasper Morrison studio

How will it do this?

  • Act as a ‘Museum’ type archive of material
  • Take a curatorial approach – in the spirit of the published books
  • The design of the site should embody and live up to Jasper’s design principles, and stick strongly to the existing site aesthetic.

I set off and performed a content audit of the site - an inventory of each page to help identify redundant content or inconsistencies. This process helps me get a deeper knowledge of a sites more eccentric features, providing insight to add to the information gathered in the workshop.

Early sketches

At this stage I like to get straight into the design process as quickly as possible, and tend to do so by picking out a detail and starting there. I threw together a few mockups in sketch which just focus on the content of a product page, purposefully leaving out any navigation.


This is helpful because it focuses the teams' mind to the initial challenge of introducing new page layouts to suit a responsive design whilst honouring the existing aesthetic. I sent the images to the studio who responded enthusiastically, and so I immediately set about building some html prototypes of the mockups. I used patternlab to present these to the team so we were discussing actual prototypes in the browser as early as possible.

Group ideation

We met again soon after to do some more group exercises, this time based around ideas generation and sketching. Due to the speed of the html prototyping I had also been able to build a first attempt of the main navigation in html. This meant that we could spend time with the earliest round of interactive designs on actual devices and critique them as a group, before leaving the screens and putting pen to paper. I set the task of creating as many different variations of the page template and site navigation as possible, taking everything we had learnt so far into account.


A few different ideas were now emerging - It was felt that there could be a real use for a new type of navigation within a product page which would allow users to browse thumbnails of related items. After some further discussion it was decided to build a version to test it out. Using codepen, I sketched out the idea in code quite quickly.

See the Pen WrzZVm by Jonathan Garner (@jonathangarner) on CodePen.

We still felt the idea had merit so I then dropped the component into the patternlab templates to see how it sat in the context of the overall design. At this point it quickly became clear to the team that the expanded section of navigation was visually moving too far away from the minimal aesthetic. This is a great example of the power of being able to try things out quickly, learning from actual experience rather than theory.

The team were now deeply engaged in the process and really enjoying the iteration. We finished the session by identifying a few other main sketches which had merit.

Rebound shots

To my delight, a few days later I received an excited email from the team saying that they had continued a similar process together after I left and they thought they had cracked an idea for the navigation to work. Not only that, but they had created some rebound shots to my initial sketch mockups capturing their ideas.


I immediately set about converting their mockup back into a new prototype, but before jumping into the code I took some time to explore their new navigation layout on paper. The design was suitably minimalist but needed dissecting - while I felt flexbox was going to make this manageable, I wanted to explore how the search box could fit in to this new structure.


I quickly had a working vertically tabbed interface and then spent some time exploring different branches of the pen to place the search box in different formations.

See the Pen JM Nav 2nd Gen prototype x2 by Jonathan Garner (@jonathangarner) on CodePen.

And that's where we are in the process right now.

The fantastic thing about this approach is that when everyone trusts the process and engages then just by focusing on specific details you can very quickly build up large portions of the site. The fact that everyone is involved through these steps means that there is a much greater understanding when it comes to assessing the new page templates in the broader context.

Importance of Dialogue

One project that I am consulting on at the moment deals with an organisation that is largely run by volunteers and is spread across over 30 countries. A major part of this work is to try to foster a sense of community between all of the individuals who are doing similar work around the world, but are currently doing so mostly in isolation.

January 2016 marked the beginning of a second year of this work, and while we have so far been able to celebrate a number of successes most of the low hanging fruit has now been picked. It seems that this is the point of the process where things get tough, but also the place where a cultural shift really begins.

There are two distinct aspects to my role in this process:

  1. Act as a point of contact and advisor for the individuals and teams who are currently working in isolation, to help them formulate their work process and delivery of their national website.
  2. Try and get a deeper understanding of how these separate units are operating within the context of the organisation to help pool resources and maintain consistency.

While the former is quite easy to track with tangible progress and deliverables, the latter is altogether more difficult to quantify. It involves having many conversations with individuals all throughout the organisation, many of which open up further areas of enquiry which lead to more conversations. Rarely is there a sense that this brings us closer to some form of a conclusion or result.


This is something that I was beginning to feel increasingly uncomfortable about - after all, no one likes to feel like they are not getting anywhere. I knew that it was important to be having these conversations, but I felt like I needed to be able to justify having them by accomplishing 'results'.

This uneasiness lead me to re-discover a wonderful collection of essays on the topic of dialogue, written by the theoretical physicist David Bohm titled 'On Dialogue'.

This summary by Jeanie Sharp does a better job than I could do condense Bohm's thoughts:

Dialogue "comes from the Greek word dialogos. Logos means 'the word' or in our case we would think of the 'meaning of the word.' And dia means 'through'--it doesn't mean two" (Bohm, 1990, p. 1). Bohm points out that dialogue suggests a "stream of meaning" flowing among, through and between us. This makes it possible to create a flow of meaning in the entire group so that some new understanding will emerge. This in turn will create a "shared meaning" in the group that serves as the glue or cement that will hold the group (and society) together.

This insight feels so important and entirely liberating - that the process of dialogue itself is the actual result, one which is laying the foundations for a global community of shared understanding.

I have tried to capture Bohm's recipe for such a dialogue below in as succinct a format as possible to serve as a personal reminder, but one must read the whole essay to really understand the spirit of the approach needed:

  1. Suspend assumptions ( there is no attempt to gain points or prevail, and nobody tries to "win" ).
  2. Regard each other as colleagues (dialogue can only take place when we can suspend those notions of authority).
  3. There must be a Facilitator who holds the context of dialogue. If group is experienced, facilitator can just kind of blend in, especially once the atmosphere is established.

I am excited to try and understand these principles more by finding ways to bring this format of dialogue into the work - focusing more on the benefit of a shared meaning within the group rather than specific arbitrary points of progress.

You can read a copy of the principle essay from the book online here.

Progressively enhanced 'things'

While drooling over details about the new Tesla cars recently (and lamenting their price tag) a thought suddenly struck me; now that the dashboards of these cars are fully digital displays, what happens when some of these things fail?


Now I am sure that there are some clever systems in place to prevent this from happening, although so far I haven't been able to find anywhere which explains exactly how. But even with the most clever systems in place things will always fail - and the more I thought about it the less I liked the idea of driving along the motorway with my dashboard screen glitching out. I would be more reassured if there was a simple but functional physical needle hidden behind that display just in case of emergency...


Which made me realise that what I was considering was essentially applying the principles of progressive enhancement to 'smart objects' and 'internet-of-things', er, things. If the core functionality of an item like a smart watch, for example, fails then what measures are in place to ensure that functionality can continue? We have service workers in place to deliver content when we lose our internet connection, so why should our £300+ 'smart' watch be entirely redundant when it runs out of battery? Would it be admitting failure to build in a backup lcd display (or equivalent)?

Now while I have had fun leading workshops making arduinos change the colour of the lights in the room, I essentially have no experience of designing smart devices. I'm don't even own a smart watch, so this may already be well taken care of. However in my (admittedly limited) attempt to find examples of this out there, or even other's thoughts on the topic I haven't managed to find anything so far. The closest I got was the wonderful quote from this article:

An escalator can never break – it can only become stairs. You would never see an “Escalator Temporarily Out Of Order” sign, just “Escalator Temporarily Stairs. Sorry for the convenience. We apologize for the fact that you can still get up there.”

But interestingly, this was still used as an analogy for web development rather than a serious call to arms for physical progressive enhancement. I'll continue to research this, but it certainly seems worthy of more consideration.

Inspired by Music

There is something about the creative process in making music which I find incredibly exciting. Perhaps the allure is because it is foreign to me - I never stuck it out with any of the instruments that I learned, so lack the confidence and fluency to play or make music.

Without fail though I will get inspired by certain sounds, rhythms or melodies in ways which are hard to explain. I suppose this is a common human experience, but I find it interesting how compelling and engaging it is.

Perhaps it is because it is so easy to simultaneously enjoy a song as a whole while also dissecting it into it's component parts. Visual media often creates such a convincing illusion that we don't notice the process which underlies the form. But with music it feels much easier to be aware of each facet of the whole - as you get to know a piece of music more and more you notice small details which can be appreciated on their own while also enhancing the whole experience.

Of all the varied music I love, I am most fond of the band Radiohead for the reason that this creative process of layering sounds feels so tangible through their music. With each new album they seek out new methods of approach to capture different types of sonic experiences. What I find most interesting about this is that no one sound or approach is sacred to them - if three quarters of an album requires that not every band member appears in those songs, then so be it. Not only is that kind of restraint very brave, it also serves as the perfect catalyst to take an idea and discover multiple new and exciting representations of it.

In an attempt to illustrate this (as well an excuse to share some music that I love) I have picked out three versions of the track 'Bloom' from their (for now) most recent album, 'The King of Limbs'.

Whereas their previous album was developed from their live performances, Jonny Greenwood describes their new found process for TKOL:

"We didn't want to pick up guitars and write chord sequences. We didn't want to sit in front of a computer either. We wanted a third thing, which involved playing and programming."

The band experimented with a turntable and vinyl emulation software to sample and manipulate music they had been working on, using sampler software written by Greenwood. Thom Yorke likened the process of editing and arranging prerecorded sounds and ideas to editing a film.

So let's get started with exhibit A, the original track from the album:

Exhibit B is taken from the highly recommended show / labour of love 'From the Basement'. This video offers an intimate insight of the band going through another process to bring the track back to a performable state. Sounds that began as samples and programme loops now get reborn through live performance:

And then finally, take a look at this recent performance of the song, this time played only by Thom Yorke at the Pathway to Paris climate convention. While stripping back the full band back to just a piano, some live looping and vocals, Yorke not only sustains the essence of the song but gives it a whole new life and meaning beyond any original conception I had of it.

While I don't make music, open-minded processes and explorations such as those I have just shared will always inspire me to try and push my creative boundaries to find new ways to communicate an idea.

Tibetan New Year

Photo by Ori Avatal

A short trip to the south of France this week gave me the chance for a few days of retreat - a much needed opportunity to regain some headspace. The Tibetan New Year brought the first snowfall of 2016 to the region, and it was just beautiful.