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.

previous note