The Clearleft Podcast

This is the Clearleft podcast. And this is Sir David Attenborough.

I am quite sure that I am not the only one who came here as a little boy or a little girl, six, seven, eight years old, and had our minds blown by the extraordinary things we saw.

I do remember school trips into the Natural History Museum and wandering back there this year has been incredible.

The Natural History Museum is a magnificent institution. And if you’re lucky, the Natural History Museum is also a terrific client to work with. Clearleft were fortunate to work with the Natural History Museum. To be specific, we were working with them on the website for a competition. The Wildlife Photographer of the Year.

In the exhibition at the Natural History Museum, there are a hundred pictures chosen from 45,000 entries.

To happier things for a moment, a picture of a fox surprising a marmot in China has won the grand title in the 2019 Wildlife Photographer of the Year competition. It featured alongside a whole load of other deserving winners.

Let’s look at some other animals then, spiders and antelopes perhaps. Some of the subjects in this year’s Wildlife Photographer of the Year competition.

Well, competition organizer, London’s Natural History Museum received over 48,000 entries from 100 countries. Okay. It’s a tough job.

It is an exhibition which gives us an intimate glimpse at the world’s most wonderful wildlife.

This is the cumulation of a huge amount of work from a vast number of people, whether that’s, you know, the huge amount of work that went into the actual images themselves when the photographer took them to what the content department’s done, the guys who actually built the show, it’s all just really beautiful in the end. And the hope is that when the visitors come in, they’re unaware of all of that work.

The Clearleft team comprised designers, Chris How and James Gilyead, developer Trys Mudford, and project manager, Helen Davies.

It’s been going since 1964. And when you go and visit it every year, at South Ken, and it’s an amazing physical exhibition, some of the images are amazing. The way it’s presented is really beautiful. And then that goes on tour around the world. We got to see it. It was great. It does come to Brighton.

They don’t just, you know, rock up in a van with all these prints and throw them on the floor in the Natural History Museum, they spend months, if not years, designing these exhibitions, so I feel like we wouldn’t be doing the images justice if we didn’t put as much thought into how they were presented as they did in the physical exhibition.

In the early days, the exhibition comprised prints, quite small and in fact in the very first exhibition, there were blu-tacked onto the wall. Well, today’s very different kind of exhibition.

In the Natural History Museum, we have beautifully back lit pictures and they appear as the judges see them. And now those back lit pictures are traveling the world. And so people can see them in their full glory.

I’d been given a ticket there as a birthday present. So I’d already been. And it is a fantastic exhibition. It’s so well crafted. You go into this black room and everything is still, and there is very light background music, and the photos are illuminated from behind and stand out with such a contrast and such clarity. The images are truly incredible.

What we were trying to do is take the same approach that the organizers of the exhibition would have to do, which is given that you can’t change the photos, you still need to present those things in a way that is sensitive and respectful.

The project looked straightforward enough. Clearleft would be encouraging visitors to the website to visit the actual exhibition. Right?

I spoke to Chris early on in the project.

Our initial expectation was we were going to build a digital product that would help people go to a physical exhibition, and that has been flipped around through some of the work we’ve been doing to view it very much as “what could we do in the digital space for a truly global audience?” And the visitor experience, the physical visitor experience being secondary to that.

There was certainly an internal goal to increase traffic footfall to the exhibition itself. But we are very aware that getting to South Kensington is not possible to a lot of people in a lot of countries around the world and wanting to bring that feel of that exhibition to the masses was very much part of the goal as well.

In very early discovery phase, we did some stakeholder interviews, and the person who runs the exhibition, not just the digital side, but the whole exhibition, challenged us to be really ambitious, to meet her and her ambitions. And she was talking about work that she had been doing on a truly global scale with some really impressive people. And we wanted to be part of that.

So there was definitely an a-ha moment of one of the major sponsors has got real ambition.

And also it was in line with them introducing a new strategy where rather than being stuffy old fashioned collectors of stuff, they wanted to have a new strategy about being advocates for environmental history and natural history issues.

A lot of photographers have actually built their career on, on the publicity that is generated by what is a huge, huge competition now and wonderfully international.

The people who make up the exhibition, the people whose work we are displaying. We interviewed some of these people and the view that they took on the exhibition was very different from how the organization viewed it.

We did some audience interviews to understand our users a bit better. And that was over a week of a series of remote interviews with various people; entrants, visitors, amateur photographers, professional photographers, and that helped us develop our design direction a bit better.

So having heard stories about we have to be really respectful of the work, we had to make sure that their work couldn’t be lifted and copyright infringement and all of those usual kinds of things that you get when people talk about somebody else’s work, when you go back to the originator of that work, the creator of that work, what we heard over and over again was the work is important, but it’s the message behind the work they wanted to communicate. And what they were looking for was a platform that would help them communicate the story behind the work. And change people’s minds. And that shift from being an aesthetic experience to being the start of a turning people into, into taking action around the stories behind the objects was the a-ha moment.

We also want to show the world that there is a huge archive of images here over the 57 years that’s worth looking at and worth interrogating.

So now this project is no longer just about delivering a beautiful website. The scope has expanded to cover behavior change too. Okay. That’s what’s desirable. But what’s technically feasible?

So each competition for the last 10 years, which is online, is set up and you head into a competition and then you work through the categories and the photos within that.

Chris’s vision was very much to open that out, to expose the entire catalog and let you interrogate it in different interesting ways. Because it feels like there’s so much depth and wealth in the photos that just gets forgotten about when the competition goes on to the next year.

So the aim was really to build a system that would allow us to expose this information and get to it in interesting and new ways.

We were able to suggest ideas. One of them was this idea of custom image sets where you could create your own interrogation of the system, your own search filter queries, and you could save those to a URL, which could then be shared to someone else. And you can allow them to run through that set of images in context in the same way you would in a gallery, in the actual physical space, walk from image to image in the categories that the Natural History Museum have set out. We were suggesting creating custom sets that you could then share to someone else. And that idea came very much from bouncing ideas between the two of us.

There are those assumptions where we all think something either is possible or isn’t possible. And in this project I have seen things that I thought were technically going to be difficult and take a lot of energy being done with blinding speed by the devs on the project.

Equally the other side, you know, I’ve seen things that I think should be relatively simple and they just turn out to be more difficult than you could ever imagine. And that’s one of the great natures of being on a project is assumptions get you get challenged every day to look at what you believe to be true and is that true.

So we started discussing tech stacks for that. And we went up over to a whiteboard as most good ideas start with, and I started talking to him about GraphQL and how one could set up a database and link interesting nodes in a far more fluid way the one would normally do in a RESTful system and we started drawing out various entities and working out how one could interrogate this data.

And it was, it was incredible to do with a UXer and a developer, ’cause the idea is coming from Chris were excellent. And as I suggested, we could link this node of photographer location to the image media type or whether the photo is black and white or taken with a telephoto lens, the ideas just started brimming out out of him.

So you can then filter by photographic style. So if you wanted to find all macro photography, for example, or all aerial photography, you could do that. And then also to add in species information. So you’d be able to see all the mammals or all the mammals in Africa.

So you’ve got this incredible way of filtering that big archive in whichever way you want to cut that.

And I think they were quite interested and excited, but a bit nervous, I think it’s fair to say about GraphQL, and whether they’d be able to pull it off. And in the end we didn’t use GraphQL. And I think that was probably for them, the right decision.

And yeah, it was a really good opportunity at the start to not, like steamroll our ideas and our tech stack onto them, but just to have really great conversations and to just steer them in the right direction for what was right for them. And yeah, perhaps GraphQL would have been too much of a stretch.

So it was really good to just work that out, but some of the concepts of sets and traversing various bits of various taxonomies at the same time, came from those initial ideas that we had on the whiteboard.

The API itself was written by Matt, who’s one of their developers there, Matt Cooper. He was excellent. He broke down the data into really sensible well-documented chunks and he’d made quite a RESTful API to begin with. And as soon as we started talking about sets and how we could interrogate it, he started looking at tags and how we could create like tags and trees of tags and that ended up being the backbone of this project.

All right. So the backend work is going well. But this project isn’t about data. It’s about an experience. We don’t want people to feel like they’re navigating a spreadsheet. This needs to feel immersive. What’s the best way to present this work?

One thing that we weren’t able to touch, and didn’t want to touch, is the images themselves. So we were dealing with probably the highest quality assets you could ever hope to work with, which are these amazing photos from all over the world.

The agreement they have with the photographers is that we won’t doctor your images in any way. And whereas Instagram has a nice uniform square grid, we can’t do that with these photographs.

They have to be presented in the way that they were taken.

What can we actually manipulate without encroaching on this artwork?

When I talk about, you know, the deliberate spacing and very thorough attention to detail when it comes to the fonts and the sizing, it’s very, very subtle. So when this goes live and people see it you could almost argue that it was better if they don’t notice the typography and the spaces between things because if they don’t notice, it means they’re paying attention to the photos, which is exactly what we want people to do.

What we’ve done is tried to tone it down. We’ve tried to make a more tonal experience which more closely reflects the physical exhibition.

We chatted about the various options we could use to reimagine this experience into a digital space.

They were quiet adamant in the beginning that we keep it black and white, and that we don’t introduce any colour. My argument to that point was that when you’re in the physical exhibition, which is what they’re trying to emulate online, it’s not black and white.

It’s quite a tonal, quite a sensitive experience. It’s cathedral-like, people have said. It’s quiet. It’s respectful. It’s a peaceful place to be. And the images still managed to shine in that environment. So with that in mind, right from the beginning, we knew that we wanted to introduce some kind of variations in lighting and that took the form of a kind of palette of grays.

So hopefully trying not to be too controversial and steer too far away from the black and white.

This project isn’t about delivering a one-off website. This needs to be something that continues to evolve over time. A living, breathing system.

My colleague Cassie and I went up, it must have been late summer last year, and we had a chat to them about pattern libraries and design systems. And this is all new, a new avenue for them.

We started talking to them about how a pattern library or how a design system could start to expand their options and bring consistency to their workflow.

Visual designers often talk about not wanting to design the same thing every time. We don’t want to reinvent the wheel every time. So we often talk about a kind of sensible defaults approach to projects.

Every project I’ve worked on at Clearleft has kind of honed my… I don’t want to say laziness… efficiency.

Working with James was a real treat. He’s a incredibly creative and precise designer. One of the most precise designers I’ve ever worked with. He takes such care with everything he creates and very much a, a logical thinker.

So creating a system that the website would sit atop was really important to him.

His goal was very much to create something that would be logical and explainable and reasonable. So in the future when new decisions had to be made about how do we add this feature, there was already patterns created and sound reason behind it.

I think most designers like to do things by eye, they drag things around in Figma, they’ll kind of experiment. And I do that too but my outputs are always quite rigid.

So I usually operate from the layers palette on the left hand side of Figma. So I’ll group things in a, what I think is a meaningful way. I’ll name layers. I’ll make things repeatable so that all of that, well, repeatability is baked into the design.

It made the developer’s lives really quite straightforward. Everything was documented incredibly well.

So it’s not an afterthought. And it I won’t leave things for the developers to infer from my designs. I try to help them. It’s like an olive branch. Here, look, I’m not just throwing something at you for you to kind of guess what my thought processes were, I’m going to show you what the space is, I’m going to name the spaces even just to to make a thing genuinely systematic, genuinely predictable, genuinely repeatable.

And so we spent a long time at the beginning of the project, working in quite an abstract way, deciding fundamental concepts or sizes or scales or various systemy things that weren’t exactly obvious or tangible. But acted as like a bedrock underneath the project.

What we’re designing is the approach to design.

So those could have been: How do we work with color on the website? How do we bring the toning of what is a dark exhibition onto the web and how do we not use just straight black and white as they currently did? And how do we bring those shades out? Or how do we scale things that feels appropriate on every device?

I think space is something which gets forgotten too frequently in design but what I want to do is make people very aware of it. I don’t want space to be accidental. I think that’s when you start losing quality in your designs. And I think if you take all of the ingredients, and I think space is a key ingredient of design, if you take all of the ingredients and bring them out so that people can see them and so that you can have discussions about them, it will improve the quality of design.

And these early conversations were incredibly geeky and incredibly fun. But again, showed a huge amount of bravery on the part of, of NHM because we weren’t necessarily producing full pages at this point.

We were just creating prototypes and creating small experiments of: How does this thing scale? How does this thing feel? Which is very intangible.

But it worked incredibly well.

So the first page we designed took weeks and the second page was designed and built in minutes.

When we got to the, even the last, the last few weeks, but even the last few days, we were able to roll out features incredibly quickly because of the early groundwork we had done.

Talking to Trys and James about this project, something that came up again and again was the level of collaboration.

So on this project I was lucky enough to be sitting right next to Trys, very good Clearleft developer. And we were designing in tandem. So his role on this project was design. My role was design. Chris the UX designer was also designing. So I felt like we were all designing in parallel. And at the same time Trys was building a lot of this stuff in code.

It was great to be able to have that time as a developer to try some of these things out before getting into the detail of the project. But I think it also really helped from the design point of view. There was a lot of sort of steps we could miss out because we were getting stuff into the browser straight away.

We were testing ideas out, testing animation ideas out. Typography was half made in the browser, half made in Figma. It was really, really collaborative and really, quite rapid in the end.

I think often we use the word designer and developer it to mean different things, but on this project, it was a really good example of everybody being a designer and that being a really positive thing. Working in the browser at speed really helps.

All of this collaboration led to another project that spun out of the work done for the Natural History Museum. It’s a project called Utopia. If you want to know more about this project, you can visit utopia.fyi

That website explains:

Utopia is not a product, a plugin or a framework. It’s a memorable/pretentious word we use to refer to a way of thinking about fluid, responsive design.

well, I think James and I have both been thinking about the idea of space and type and doing things in a more fluid, logical way for several years.

The idea we’re talking about is what we’re now calling Utopia, which is a systematic approach to scaling type and space.

The name was a bit of a joke to begin with and it somehow stuck.

So one of the things we want to do with Utopia is to start visualizing space.

Just before the project, I’d finished on another project and I had a few days of downtime. And yeah, we have these park project ideas at Clearleft where we’re able to work on side projects when we have downtime.

We started just playing around with what would a fluid type system look like in 2019 it would have been then. How can we use CSS custom properties to create type scales? Modular scales have been used in Sass for many years and there’s a lot of tools that do that for you.

But we hadn’t found many that worked with CSS custom properties and the idea that we could set out a system and expose the six controls you would need to create modular scales with the size, the break point, and the, the type scale, both a minimum viewpoint and a maximum viewport. The idea that we could expose those six values at the top of a page, let you control those and not hard code a lot of the, of the values. And we started playing around with that and yeah, a few days later, we had a prototype working and we had the, the beginnings of, of Utopia there.

This website came to being within the space of a few days.

And although I’ve used similar approaches on projects in the past this is definitely the flagship project where we’ve gone in knowing that we’re going to design this way.

We started the Natural History Museum project and this seemed like the perfect place to test these are Utopian ideas out, mostly because with this project, the image is the hero and the intention was to let the rest of the site, the chrome of the site, just fall away into the background and provide a canvas for the image.

And so the whole idea of Utopia is creating a system that just works and then lets your content shine. That seemed absolutely ideal for this. So we chatted with them on the first day of the project when we were all up in London about we have this concept of fluid type and fluid space, and we’d love to use it on this project.

And they were incredibly open to experimenting and trying some new ideas. We put it into practice and we started with a type scale and we made tweaks as the project went on and we tightened it up.

Myself and Trys were working side by side with a kind of maximum efficiency angle and it worked.

Some of the concepts we were bringing to the table with Utopia, and with fluid type and space, were very new both to them and to us. We hadn’t yet finished Utopia at that point. And so they were incredibly brave with taking on some of those tasks and learning with us and learning together, and they were very open to some of the suggestions we made, but they were also aware of what was appropriate for them.

Ultimately it’ll rest with the internal team at the Natural History Museum to execute and get this thing live.

We were never there to push our agenda onto them. Our role was not to dictate what solutions we’d go for, or steamroll our agenda, but it was there to listen and to question and to maybe interrogate and suggest our experience that would help empower them to make decisions that they would be comfortable with.

It’s their product, not our product and we’re there just to facilitate and to help them.

In a way, the final website is just the most visible output of this project, the tip of the iceberg. Below the surface, there are equally important long lasting outcomes around facilitation.

One of the rewarding bits was from my perspective and definitely from a dev perspective, even more so from a dev perspective, but from my perspective, it was the first time I really felt like I’d made an impact in upskilling the team.

As a project team, we are very keen to stress to our clients that they should be in a mindset of this being a product and not a project. That we are working on this with them for a set period of time. And that’s dictated by the budget as much as anything else. But when we leave, we would hope they would have a launchable website, but there were lots of ideas being discussed for future iterations.

And we very much saw this as a product, not a project. A project feels very time constrained and there’s very much an end to it. And this is a competition that’s been going on for half a century and will continue to do so. It was really important that this project doesn’t just end the day we leave, it gets carried on and gets nurtured and gets continued and built upon.

There was a big element to this project, which was much more about upskilling and teaching the teams there at Natural History Museum.

So not only did we deliver a fairly shiny final product in the website, we also brought the internal team along for the ride and we showed them the benefits of component-based design. We got them using Figma. We were doing true collaborative design. And we’re leaving them with a pattern library and the beginnings of a design system that they’ll be able to use going forward.

The idea was to set the ground work. And to leave them with a lot of pieces of the puzzle created and working, with enough documentation for them to carry it on and as much confidence and skills to be able to finish the project and carry it on.

What we’re also proposing is that when there’s a requirement for some sort of functionality that isn’t covered by the pattern library that the internal team at Natural History will have the knowledge and they’ll have the tools to insert their own patterns into the pattern library. So it’s a living system.

It was a case of, I’ve just given them the confidence to take the skills that they already had, give them some new skills and then to be helping them with code reviews and with discussions and workshops. To really get them out of their comfort zones a bit and get them comfortable building in this new way.

I don’t think we’ve solved all of their problems. We’ve identified plenty of exciting opportunities for the coming months and years. Unfortunately we didn’t get a chance to tackle all of them but we did talk about some interesting new features and I’d love to see the team publishing some of those new patterns on the website.

We set out to do a collaborative project.

We set out to have a project where they would be the responsible owners for it. We would be supporting them in that work.

The team at the Natural History Museum did a great job and my colleagues at Clearleft also did a great job. It really was a wonderful example of collaboration in action.

Would you like to see the result? Get ready for an acronym-tastic URL.

Visit nhm.ac.uk/wpy

It looks great on any device or screen size. But I recommend visiting it with the largest screen you’ve got. Maybe dim the lights too. Then start browsing. Those incredible images will suck you in.

Have you ever heard the term WWILFing? W W I L F. It stands for “what was I looking for?” You know how you go to Wikipedia to find out one thing. And then 20 minutes later, you emerge from a rabbit hole of links that you’ve followed asking yourself, what was I looking for? That’s WWILFing.

Well, the website for the Wildlife Photographer of the Year is guaranteed to get you WWILFing.

From any photograph, you’ll use the tagging system to get lost in a trail of magnificent hypermedia. I know I’m biased, but I really think that this is what the World Wide Web is all about.

It was a real honour for Clearleft to work with the Natural History Museum on this project. And the workspace was pretty good too.

And for us, it was an opportunity to work with amazing photography in an amazing building.

It was just exciting for us.

We got to go to some amazing spaces. So when you go to the boardroom in the museum, you pass the taxidermied Guy the gorilla. And every time we passed it, James, Helen, Trys found it hilarious that I’d seen Guy the gorilla as a child in London Zoo when Guy the gorilla was still alive, which they somehow think that that makes me an ancient specimen myself.

I remember before the project started, Chris saying, “Now we need to visit Darwin’s collection. We need to make sure that happens. In fact, we should try and get our project kickoff in Darwin’s collection of artifacts.” And I remember thinking, that sounds good. I don’t really know anything about that. But, cool. I’m glad you’re excited by it.

And as the project went on, it got brought up a couple of times with some of the NHM members in earshot. And James and Chris were incredibly, incredibly excited to go visit this collection.

And then on the last day, I was the only one up in the office and they said, “We’ve got a treat for you. We’re going to take you down to Darwin’s collection.”

I had to send her a little message to Chris and to James, just to let them know where I was. And yeah, I had to get a few slightly smug looking photos standing next to this wall of jars with yellow tops showing they were the first ever example of this creature.

There was a giant 30 foot squid. There was an awful lot of mammals and animals in jars of acid. I mean, I can’t say I fully appreciated it in the way that they would have, but I took some comfort knowing that they were not appreciating it.

You’ve been listening to the Clearleft podcast.

If you’ve enjoyed hearing what it’s like to work with Clearleft and you’d like to experience that for yourself, get in touch. You can email us at info@clearleft.com

And if you’re enjoying the podcast, tell your friends, tell your colleagues, tell everyone you know.

Thanks for listening.