https://pds.blog.parliament.uk/2017/08/09/mps-portraits-designing-for-great-content/

MPs portraits - designing for great content

It’s been a huge team effort to get to this stage. Data, content, front and back end development, user research and design all working towards one goal. Our Editor-in-Chief has already written a great post about the official MP portraits so this post is from my perspective as a designer. This is how we’re putting the portraits to work on our beta site.

Names and faces

There are a bunch of user needs that we wanted to address with this piece of work. For a start, photos can make it easier to find who you’re looking for. Some of the existing MP photos, however, are from decades ago.

We’ve also heard from users that it can make it easier when meeting MPs for the first time. And we know that portraits are something MPs and journalists make use of.

As Carrie mentions in her post, there’s also an opportunity here. Fundamentally Parliament is about people, not a building. We want MPs’ personalities to shine through on their pages. Making Parliament more human is a step towards making democracy more accessible. One of the things PDS was set up to do.

The portraits and the design

Gif of some MP portraits

With our goal of creating a connection between MP and citizen in mind, our early concepts were ambitious. We pulled them apart as a team to see how we could execute them, keeping accessibility and scalability in mind.

Simultaneously, the data team was working their magic to build an API which could edit the photos in the way we needed. Unfortunately, it wasn’t to be so we put these early efforts on pause before sinking too much time into them. We took a step back to see the qualities that we liked in the original design. The biggest thing for us was that the MP was front and centre - integral to the page rather than an afterthought.

From this we developed a custom crop of 5:2 which is a horizontal slice of the photo, framed around the MP’s face. This crop has visual impact without pushing the page’s content too far away. The fact that we’re using a slice also has the nice side-effect of making each MP sit in a slightly different position on the page.

Calling cards

List items on an iPhone

There's a number of lists on the beta site and to help make them better, we’ve updated the list items to show a picture of an MP when there is one. By updating the items themselves, rather than just the list, we can make sure that anywhere you see an MP you’ll also see their face. This component then becomes like an MP’s calling card wherever they pop up on the site. For example, on the constituency pages.

You’ll soon see them appearing in many other places too.

Using components like this will create a smoother experience for users and a consistent design across the new Parliament site. It’ll also speed up design and development so everyone wins.

Cropping the portraits

A screenshot of the crop ratios

Initially we had two crops to create of each image. While we were in a cropping mood we had a think about what other crops might be useful. We landed on an additional 2:3 and 4:3 of each image. These are more traditional editorial and portrait crops, respectively. That makes four crops plus the original image. Four x 650 MPs = a lot of photoshopping.

Luckily, the data team had a better idea. We could bake these into the API. We worked out that we could supply them with a single coordinate for each face, reap the rewards of code and keep my fingers from turning to a bloody pulp.

The fastest way I could achieve the necessary number of crops still involved a little dog work, but not too much. I wrote a photoshop action which drew some crop marks over each image creating a sort of draggable frame. This meant that, in seconds, we could crop and check that each MP looked good in their five images. Nice.

Freely available

What’s the point in having five crops and not sharing them? That’s why we made a download page for each MP’s set of photos. This allows users to see the full portrait, read about the license (in plain English) and download any of the crops. We’ve already seen these popping up in numerous places.

The reaction to the portraits has been stronger than we’d ever hoped. Paul Masterton MP said on Radio 4’s Today programme:

This kind of perception of MPs being an alien species ... these photos really railed against that

Of course, this is a huge credit to Chris McAndrew, the incredible photographer Carrie commissioned.

100% a cliche, but I think this project is a great demonstration of many different disciplines working together to get stuff done. I also think it’s shown where you can add value by exceeding the baseline user needs.

We’d love to hear what you think about the design process. You can follow PDS on Twitter and let us know or leave a comment below.

Leave a comment