Photographing Diverse Hands at Facebook

This is the story of how we came to create and distribute the Diverse Device Hands we recently launched as part of the Facebook Design Resources.

In May, we received feedback from an Origami user that the standard caucasian male hand we included in the prototype viewer didn’t feel quite right with their mockups when a majority of people using their products were neither caucasian nor male. We absolutely agreed — it wasn’t representative for us, either, yet we use the tool every day to design the products they use.

I reached out to a photographer at Facebook to ask if we had any existing hand photography that we could add to Origami. He actually had done a prior shoot, but after taking a look at them we realized that we’d need to redo the shoot with the tool in mind so that it would complement, but not distract from the devices.

An audit of the prior shoot’s photos, comparing to existing hand (right).

So what makes a great hand photo? In addition to typical photography good habits like having good lighting, it was critical to art direct all parts of the hand, especially the fingers. We had to make sure that the hands were visually balanced around the device and minimally covered the screen. The wrist should be leading toward the bottom of the frame, rather than at an angle. Most importantly, the finger placement needed to be on point: they should be parallel on the same side to reduce any visual distractions — no pinkies propping up devices, and no white gaps between the fingers that draw attention.

We decided to do another shoot. One of my favorite internal company groups is named Diversity @ FB, which is a space where employees can discuss any diversity related issues within and outside the company. We turned here to look for models. We were floored by the response: over 25 employees volunteered within a day! We booked a few hours in our photo studio for the following week and paid for their manicures.

We made this casting call post asking people to digitally audition by sending a photo of their hand “holding” a phone.

The shoot

Our models Jay (pictured), Nicole, and Laura put up with 100s of finger positions we went through to get the right shot.

When doing the shoot, we drastically underestimated how much time it took to carefully position the volunteer models’ hands, and learned how much time and effort went into the existing photography we had referenced.

~All the hands~

After a few hours, we had hundreds of shots, and spent the next week picking the best shots to clean up, mask, and insert into Origami.

A few months later, we shipped Origami v2.1 out to the world, with the new hands! Today, we’re happy to release them for you to use.

Our job isn’t done. This was only the first pass, and a rushed one at that. We hope to continue to improve our tools and create resources to help remind us of the people we design for — not just their race, ethnicity and gender, but their age, where they’re from, the devices they use, and more. We also plan to eventually share the source files so anyone can contribute back to this resource. Feedback? Leave a response below!

Download the hands here.

Update 6/8: Kid and Senior hands are out!

As I said before, we’d continue to expand beyond the original gender/ethnicity pairing, and now have added some age diversity with a child’s and a senior’s hands.

Credits: Nicole Gregory, Damaria Jay Hammonds, Christophe Wu, Julius Tarng, Mohammed Abid, Tim Wong