How to run a user-centred photoshoot

I’ve been on a bit of a mission over the last few years to improve the effectiveness of web photos. It’s got me thinking whether a more user-centred approach to the commissioning of photos would make them more effective.

What if we redesigned the photo commissioning process to consider both the user and constraints of responsive design?

This is exactly what we did when asked by the Institution of Mechanical Engineers (IMechE) to commission a set of images for some key pages of the website we had designed for them.

Let me take you through the steps we took and what we learned along the way.

Brief your photographer

At the beginning of the process we showed our photographer Tom Luddington the final page designs, shared the objectives of the project, discussed the relevant user needs and demonstrated the responsive nature of the pages that would hold his photos.

Tom was really open to taking a user-led approach and valued such a detailed briefing. He grasped the idea of responsive design quickly and realised that it was useful for him to understand the impact this would have for future web commissions.

Before we started discussing the particulars of the individual photos, we wrote a detailed set of guidelines both for the photographer to follow but also to act a reference document for any other future shoots. We aimed to create the ultimate set of guidelines and challenged ourselves to try and think of everything that the photographer would need.

These guidelines contained:

• The wider objectives of the redesign project & vision and values of the client's organisation
• An explanation of our user-centred approach, why it was important & business and user goals for each photo
• How many photos we needed, photo behaviour at different breakpoints
• Brand guidelines regarding use of photography including examples of ‘good’ and ‘bad’ photos
• Photo usability checklist (.xls) from my Usability of web photos book

Critically, we took all the findings regarding user needs for each of the main site sections and fed these into the guidelines so the user was represented within the document.

These guidelines were used to evaluate a set of existing photos to see if we could reuse any. We ended up commissioning all of them from scratch as nothing met our requirements.

Shooting for multiple screen sizes

This was a fascinating aspect of the project. Check out the live site before you read this section and play around with the screen size to see how the photos behave.

Each photo had to work compositionally when viewed at different sizes and the design treatment varied between different screen sizes. Within larger screens the left hand side of the photo is obscured by intro text which is removed for smaller screen sizes.

When viewed on large screens the left hand side is obscured so the composition of the right hand side needs to work independently of the left.

On smaller screens – such as tablet devices held at landscape orientation – the intro text is removed revealing the full image.

With the left hand panel removed the image still works compositionally as a whole, leading the eye to the main subject of the image.

The challenge for the photographer was to find a composition that worked for both treatments of the image. We knew that the main subject of the photo had to be positioned to the right hand side but we also needed some interest in the left hand side for when that we revealed within smaller screen sizes.

Key learning:

You can’t expect photographers to understand the nuances of responsive design! We made a responsive demo of the page we were shooting for and put a test photos in so Tom our photographer could see the impact of the way it reflowed upon his original composition.

This was a really effective way of helping him understand the impact of responsive design on the way he needed to compose the images.

Make the photos fit the objective

For each photo we reviewed what the business and user objectives of the page were and discussed how we could create an image that would help to meet these objectives.

This was a really enjoyable creative process as it involved all members of the team suggesting locations, subjects, activities and stories that we could try and tell within the photos.

The hard part was the logistics of making these pictures happen in terms of organising locations to give us access & finding credible subjects to appear in the images within the tight timescales.

Tom our photographer encouraged us to hunt down new location opportunities. He really pushed us from a creative point of view, coming up with ideas for compositions, locations and subjects that would be visually appealing. If a location wasn’t going to work we just chose another and saved wasting time and money just turning up somewhere on the day with the hope of finding some interesting locations.

Key learning:

Sorting out logistics takes ages. You need to allocate significant time for people to contact potential locations, organise people to be in the shoots and to visit them to take test shots well in advance of the main shoot days.

Create a shot list

Once we had decided on the plan for each of the two shots for the 7 pages we were shooting for, we created a shot list in Google Docs so that everyone was contributing and seeing the same brief. We referred to this throughout the project and it was invaluable to track progress and to make sure requirements didn’t shift during the project.

Key learning:

Sketch out your photos before you take them. It helps to convey your intentions to the whole team and also provides a handy reminder on the shooting day of what image you’re working on next.

Shoot to match design constraints

One of the most critical things we needed the photographer to remember was the way that the photos were going to be cropped within the design.

To help with this we positioned a laptop nearby showing the page he was shooting for to keep the final destination of the shot in mind.

Our photographer also set up a mask within his Capture One software which showed the crop we planned to apply within the final design treatment. This allowed us to check that the composition suited the crop and to suggest adjustments as he worked.

Without these prompts we could easily have forgotten the constraints of the design and ended up with compositions that didn’t work.

On the day of the shoots

We knew that shooting on location would be tricky. We had to move loads of kit around in an environment where people were trying to do their jobs. Plus we had to deal with other limitations such as poor light, no space, and background distractions.

We wanted the photos to feature real engineers to make the images feel authentic. It turns out that engineers don’t love having their photos taken as much as we hoped and keeping people engaged and interested was hard.

Our preparation was vital. We referred back to the sketches we had made and also reminded ourselves of the user and business goals to keep us focussed on what the photos needed to communicate. We shot loads of variations of each of the photos, varying depth of field, facial expressions, compositions, positions of subjects to give us as many variations should we need them in post production.

To check the photos were going to work within our page templates we dropped test shots into our responsive prototype during the shoot to check they would work. This identified a few compositional issues with some of the shots which were then quickly rectified there and then.

Key learning:

It was amazing watching how the true skill of a photographer lies in getting the best from their subjects within the time they have. It’s all about charisma and people skills. The technical stuff has to be done on autopilot. The photographer's assistant also plays a critical role to ensure everything goes smoothly from checking focus, solving technical issues, moving kit and suggesting creative variations for compositions.

Post-production

Post-production offers a bit of 'get out of jail' card. You can create images that are essentially composites of the different variations of individual photos from the shoots. You may like the lighting within one shot but not the facial expressions for example. This needs to be done very carefully to ensure the result looks natural. It's a time consuming and highly-skilled job.

We were able to work collaboratively with the photographer to select the most effective shots and to determine what post-production work needed to be done on them.

Key learning:

We gave our photographer full control over the production of the final images. He had found previously that his images had been mangled in the past by rogue CMS’s or web publishers with image manipulation software. The photographer is often best placed to determine such things as sharpness, crop & composition, colour correction, levels etc.

Outcomes

It was a wonderful project for many reasons, thankfully our client Bruce McGill, Head of Marketing was as happy as we were with the final images.

It was clear that an essential component of the project to improve the user experience of our website had to include a fresh approach to the commissioning and use of photography on the website.

We needed photography that was user focused and supported the different propositions and offers unpacked across the website. Consistency with our brand values and visual identity was also essential.

The process was not without its challenges but the end results have been impressive and have played a key part in delivering the wider brief of website improvement.

Hopefully there’s something in this article that you can re-use to help to improve the effectiveness of the photos within your own products and services.

Thanks so much to Bruce McGill from IMechE for such a great project and to Tom Luddington for the great photos and for being flexible to incorporate a more user-centred approach to his workflow.