An illustrative image from the Loupe 2018: Designing for People project

Loupe 2018: Designing for People

Opening the inaugural Loupe conference with a talk on human-centred design.

  • For

    Framer Loupe

  • When

Andy McMillan, co-organiser of XXXO and Framer’s Loupe conferences, and Jorn van Dijk, cofounder at Framer, asked me if I’d like to speak at the inaugural Loupe conference. The process of deciding on a resonant topic, distilling that down to a conference talk format, and delivering it, was arduous yet incredibly fulfilling. You can read more about that process in my notes.

I ultimately settled on what I knew best at the time; the design tools and process revolution we are currently experiencing. More specifically, how these new ways of working are perhaps part of a larger pattern in human and design history. Below is the talk in full, followed by a condensed textual version.

Reality check

I grew into digital design through Photoshop, and Paint before that. From there I began to rely on built-for-digital-design tools like Sketch and Figma. I’d argue that all of these—including Sketch—are inherently (and perhaps accidentally) print design tools.

Gutenberg in the 14th century, China 700 years before that. Movable type, the printing press, down to offset printing. All of these tools that we’ve used through to desktop publishing come from a world where designers physically set the type, mixed the colours, and handled the paper stock.

A drawing of a printing press
Woolsey, Theodore Dwight, 1876.

Fast forward to the last 10–20 years. We kept on using these same print tools through to digital interface design—except to make models; high fidelity models of the actual thing being made.

I think sort-of knew this all along. Then tools like Framer (Classic) irrevocably exposed this workflow as indeed backwards. Soon after, the great question of 2016 came along and made the awkwardness even more palpable:

Should designers code?

As opposed to what? Continue to make models by drawing rectangles? And what does ‘code’ as a verb mean? Draw rectangles with code to then handoff? Re-skill as front end developers with great taste?

It’s possible a bad question with bad answers. I believe the intent of the question (or at least my interpretation) is what is interesting:

How do designers work with code?

We are beginning to realise that we are ultimately pushing-and-pulling to-and-from the same source as our engineers. It’s not about which tool we interface with to wrangle code—or whether we do so directly—the output is shared and therefore the same.

We’re certainly not the first design discipline to have this realisation. The games industry for example has historically worked in this way. Within a team you might have:

  • Level designers
  • Programmers
  • Animators
  • Environment artists
  • SFX specialists
  • Lighting specialists

…all building upon each-others work. It’s hard to visually represent these relationships so I’ve come up with the best analogy I could…

The Fab Five model

Queer Eye is a great lesson on humanity. It’s also a great lesson on team dynamics.

The Fab Five from Queer Eye, all posing for a photo
Bobby, Karamo, Antony, Jonathan, Tan.

These guys do something similar to the games industry except, instead of code, the medium is a human being. Each member has their own individual expertise and tools, yet work simultaneously on the same subject. Antony will be prepping a meal plan whilst Jonathan is doing the guy’s grooming, whilst Bobby is grabbing a few things at the hardware store. They’ll check in occasionally, both with the medium and each-other.

Surrounding context

If you’ve seen an episode you know the haircut and the house are not the lasting takeaways. The real tear-jerker is the softer output; the life transformation brought about by the Fab Five’s respective skills.

It’s this softer output that us designers need to be aware of (and arguably building for) in our world. Interface design workflows and tooling are being disrupted like never before—as are the social and cultural implications of what they help build. Think about the way that you last:

  • Rented a movie
  • Said happy birthday to a friend
  • Found and organised that last date
  • Had food show up to your house
  • Found your current place of work

We were asking a technical question with “should designers code?” and ended up with an overwhelming answer:

  1. Our tooling has changed dramatically.
  2. Our audience is now the entire world. Digital interfaces are commonplace, even in developing countries.
  3. Our roles are broadening to include product and organisational leadership.

Luckily, we’re not the first design discipline to go through this kind of transformation.

Pouring slabs

Not too far from central Amsterdam is a bizarre piece of living history: the Bijlmermeer.

An aerial photo of the Bijlmermeer housing housing development

The Bijlmermeer was conceived-of and built as the design of built environment was facing a transformation from multiple fronts:

  1. Revolutionary tooling, materials, and construction methods (such as reinforced concrete) reaching maturity.
  2. People and cities across the world generally urbanising, and post-war cities restructuring.
  3. Architects becoming formally responsible for the health and safety of the people who interacted with and inhabited the buildings they designed.

As well as being built during this time, the Bijlmermeer became a prime example of a specific approach to urban design. One with an unrelenting belief in technological progress to advance the human condition. An approach that I worry interface designers are moving towards. An approach with a lot to do with Le Corbusier.

Le Corbuisier at his desk
Wim Dussel, 1955.

Legend has it that Le Corbusier’s vision for High Modernist design came to him whilst overlooking Paris from an aeroplane. If true, I believe it speaks volumes about a core High Modernist philosophy; if things can be standardised and made perfect from a technological point of view, then they should be duplicated down to the screw size—wherever it will be implemented across the world.

This is his rendition of an improved Buenos Aires:

A sketch of Buenos Aires, from the sea
Buenos Aires as rendered by Le Corbusier.

He drew the following sketch shortly after a flight over Rio De Janerio:

A sketch of Rio De Janerio, from the sky
Rio De Janeiro as rendered by Le Corbusier.

And this last one breaks my heart. This is his blueprint for his Radiant City—specifically applied to Paris.

A sketch of the proposed Radiant City
The Radiant City.

Le Corbusier’s urban utopia: high-rise buildings (in the distance) for the optimal work environment, medium-rise buildings (in the mid-to-foreground) for the perfect living conditions, massive vistas (taking up most of the middle) for leisure. Superhighways connecting these three purpose-built environments and their superblocks as there is no concept of a footpath or gradual transition between zones.

Radiant City1 is his seminal book on this philosophy and proposed city. It’s well worth a read. For example, the below gem illustrates exactly how his superblocks compare to blocks that existed in historic cities (and for these examples, thankfully still do to a degree).

A diagram comparing city block sizes
A handy block-size comparison chart.

The Bijlmermeer wasn’t built by Le Corbusier, but it was done in his footsteps and core tenets—well within the school of high modernity2.

A site plan for Bijlmermeer A screenshot of Apple Maps for Amsterdam
First: Bijlmermeer site plan, via Second: Central Amsterdam (~10km away), at a similar scale.

Designing from above

I believe the intentions of the Bijlmermeer designers and Le Corbusier were actually quite good; they were ultimately about improving the human condition. The naivety in designing from above is only made obvious in hindsight—after these places have been built and interacted with.

Designing from above is actually the antithesis of what people need. We are complex beings that do not deal well with reduction regimentation in our interactions.

Brasilia and the Bijlmermeer, two environments built from above, shared a funny phenomenon that illustrates this well. Residents of both places consistently had difficulty in finding their own apartment or setting a recognisable meeting place.

Sadly, there are more severe examples of how this methodology has failed people. The infamous Pruitt-Igoe in St Louis was one of them.

An aerial photo of the Pruitt-Igoe housing development
United States Geological Survey, 1963–72.

Pruitt-Igoe was a housing development designed and built from a blank slate. Take a peek at the photo above and note the surrounding buildings. To understand a key reason for its demise, we need to consider what Pruitt-Igoe replaced.

I live in New York so like to use New York examples. This first photo below was taken on Hester Street, on the Lower East Side. The second photo was taken from somewhere around Alphabet City. Although more gentrified and car-heavy, both areas still generally maintain their density.

Merchants selling their wares on the street Two kids playing with a fire hydrant
First: Berenice Abbott, 1936. Second: Vergara, Camilo J, 1970.

Their structure and density are similar to that of the tenement buildings Pruitt-Igoe replaced. Buildings with eclectic groups of people of all types on the street. Shops, street vendors, and stoops. Mischief and cheek.

The kids playing with a fire hydrant are not at school or at home, nor are they in a defined play area. These nebulous interactions occurring on a sidewalk-facing street are complex and seemingly chaotic—because they are and we are too.

Designers tend to conflate complexity with disorder. We have a hard time mapping organic interactions and often avoid it all together. It’s therefore perhaps natural that this organic, decentralised, urban design could be used as blame for social and economic problems in St Louis.

Pruitt-Igoe set out to be Le Corbusier’s urban utopia but ended up prematurely yet amazingly demolished (on live television3).

Pruitt-Igoe being demolished Pruitt-Igoe being demolished Pruitt-Igoe being demolished Pruitt-Igoe being demolished
U.S. Department of Housing and Urban Development, 1972.

I don’t think there’s a Pruitt-Igoe, Bijlmermeer, or Brasilia of product design. I instead worry that the failures made by their designers are ones we could soon make. In our world we have to simplify and systemise, just to be able to work with our already-abstracted design tools and computers—let alone design something coherent that fits into the palm of a hand.

Designing from above is an easy option for us.

Designing from below

In a similar window of time as Le Corbusier was Jane Jacobs; an architectural journalist, author, and hardcore urban activist rooted in Greenwich Village. Jane Jacobs was an expert in what makes good urban design and a significant figure in New York City history.

Jane Jacobs holding papers
Phil Stanziola, 1961.

One of my favourite Jane Jacobs-isms4 follows:

The best way to plan for downtown is to see how people use it today.

With our new ways of working, mixed with some Jane Jacobs awareness, I believe product designers are actually in a good position to design with this context—designing from below.

Designing with data

There are many degrees to designing with data, but even the easiest ones can have a huge impact. Being at a design (tools) conference, I’m sure a lot of you already do this; injecting data into avatars, names, and other UI surfaces. A few notches up lies designing with a more representative dataset, and then of course real (obscured) data.

This practice can extend itself upwards to the shape of elements being filled; their types and reason for being, dependent on and reflective of the people using them. Our interfaces can become inherently informed from our respective ‘downtowns’.

Designing with data also means using similar hardware, software, and network conditions as the people you’re designing for. There’s a chance that your fibre-optic internet connection and 21″ 4K display are different from what your users have access to.

Leaving the office

Those of us who can should leave the office and physically embed ourselves in the communities that we are designing for.

It can be hard to justify the value in sitting on a park bench to your boss, but ethnographic research (done over time and done right) can clarify needs and explain or help predict behaviour. Inversely, user testing sessions (often unscientific and without a clear goal) can lull designers into a false understanding of their communities.

Like designing with data, leaving the office informs what we’re making from the very beginning. And if that’s not possible, it gives us indicators on how to adapt.

Take a look at the below image. The left-most block is one average day at Times Square in 2009. Janette Sadik-Khan5, the then-transport commissioner, and her team ran an experiment; 5 blocks of Times Square were to temporarily become off-limits for cars. The team visited the local hardware store, picked up some paint and lawn chairs, and set them out on the newly-cleared streets.

Three photos of crowds in Times Square, New York
From left: Hiroko Masuike, Damon Winter, Justin Maxon, 2009, for The New York Times.

People turned out, started to hang out, and stuck around. The DOT team had to go and buy some more lawn chairs. This temporary plaza was so successful it was eventually made permanent6.

Embracing difference

Times Square is living proof of a built environment having learnt from its past. Its most recent design process was informed by city data, prototyped with cheap materials, and required the skills of different people to get right.

Only by having different people on our teams do we have the diversity of thought necessary to make interfaces that resonate with our diverse audience. As the makers, advocates, stewards, and users of design tools we are responsible for ensuring they are open to our non-traditional designer and non-designer teammates. For our own good!

Looking up

For all its faults, high modernity was a legitimate response to what was happening in the world, 50–60 years ago. What we making, and our philosophies on how to make, are shaping today’s world.

What we make is used by people to decide who to vote for, or how or why to take action on climate change. People use what we make as their primary form of communication, to watch Queer Eye, and to meet their life partners.

I’m optimistic because our digital medium has something that the design of built environment doesn’t have. It’s why places likes the Bijlmermeer or Brasilia are still around in their flawed form.

It takes generations to suffer through, and then eventually modify or replace bad urban design. We can design from below; go to our streets, and put the result in peoples’ hands next week. And then we can do the same thing the week after.

  1. Can be hard to find for sale. I went to NYPL’s Art & Architecture Collection in Bryant Park to get access to the book. ↩︎

  2. This 99% Invisible episode is a great deep-dive into the design history and current revival of the Bijlmermeer. ↩︎

  3. One of many videos here. Enjoy. ↩︎

  4. Found in Vital Little Plans: The Short Works of Jane Jacobs. Also quoted in the film Citizen Jane, which, if you’ve made it down here, you should watch. ↩︎

  5. A great description of her approach here, and official DOT plans (from 2013) here↩︎

  6. Gothamist has the best photo comparison and write-up that I’ve seen. ↩︎