Designing a More Expressive Profile Picture
On Monday, March 25, 2013, the Human Rights Campaign began urging people to set their Facebook profile pictures to a pink and red equal sign in support of same-sex marriage in the United States. Millions of people took action.
When the Supreme Court ruled in favor of marriage equality, June 26, 2015, a small team within Facebook hacked together and launched Celebrate Pride— a way to effortlessly place a visual overlay supporting marriage quality over their profile picture. Over that weekend, more than 26 million people used the tool to add a rainbow flag over their face on Facebook. Seeing the flood of rainbow flags provided even more fuel for my team to explore how profile pictures might be transformed into a platform for expression — a modern day picket sign at a rally or even facepaint for a championship game.
This was the first time a team at Facebook began to seriously look at how people were using their profile pictures for more than just showing their face.
We began exploring how we could help people customize their profile pictures. Through research and testing, we found that people used their profile picture to express a wide range of support: from social causes or events, to sports and school spirit.
Showing support through your profile picture used to be a high-friction experience. You had to either make or manually download an image that expressed the cause, then upload it to Facebook as your profile picture. While this process allowed people to show their full support for something, it often caused people to lose their real identity by creating a feed of people who all shared literally the same profile picture. Identifying who created a post or wrote a message became harder— you immediately couldn’t rely on a profile picture to tell who was who. With large scale events, such as the Supreme Court’s decision on marriage equality, this problem increased the time needed to parse through Facebook in order to recognize who a person was.
A Profile picture is one of the few elements used across the entirety of Facebook and connected applications. As as result, we had to ensure we didn’t break the profile picture experience by allowing individuals to add custom content to their image. We decided to focus on ways individuals could add a creative element to their profile picture while still keeping their personal image front and center. That’s how we landed on the concept of custom “frames” for profile pictures.
Designing a profile picture frame is a new concept for us and there was not much prior art that would work well within the constraints of a Facebook profile. In order for a frame to work across the varying color palettes, complexity of profile pictures, and multiple display sizes, the frame itself needs to have a few key qualities.
Designing these frames with a number of initial partners, we learned that the keys to making successful and appealing designs are:
- Bright, bold colors
- Dynamic shapes
- Little text
- Few elements
We wanted bring on partners like Michigan Football and Manchester United, but we couldn’t expect them to understand the profile design ecosystem as well as we can. To help, we used the principles above to create a set of guidelines explaining how to design their frames to work well within the Facebook ecosystem while still matching their branding and campaigns and maintaining an individual’s identity on the site. Working with the pre-determined logos and color pallets were crucial to ensuring the frames felt organic and connected to the original source page.
A big risk to this approach of utilizing custom frames with profile pictures was losing the homegrown and authentic experience we saw come from organizations such as non-profits and sports teams in the past. In an effort to maintain that authenticity, we wanted to create a system where any Page could create a custom frame and have their fans apply it to their profile picture. This led us to start developing a platform where Facebook Pages, the source of authentic voices with followers who want to support them, could design custom profile picture frames for their followers to show solidarity.
As people added a frame to their profile picture, we wanted to harness the energy around specific causes by attaching a call-to-action to each frame post generated. This created a quick entry point for friends to show solidarity and apply a frame to their own picture.
One of our goals was to help people understand that these frames were created by Pages. Our data showed that 98.3% of all profile frame impressions happen from a friend’s post versus the Page post itself, which showed the impact of adding a call-to-action in the News story that gets generated whenever someone adds a frame to their profile picture.
One metric of success for our team was to see whether or not mutual friends would show support together with custom frames. In order to achieve this, our product had to be designed for all major platforms Facebook is available on: Android, iOS, mobile web, and desktop web. This meant that in order for us to see the same results as the marriage equality and Pride rainbow pictures, we had to break Facebook’s traditional approach of adding new features. Rather than building, testing, and learning on one platform with a subset of the population, our team had to focus on designing and building our product across all platforms at the same time. If you saw a friend add a custom profile frame but couldn’t do it yourself, whether on your phone or desktop computer, the likelihood of us reaching the same amount of impact as past picture changing hacks was limited. We had to launch to everyone — not our usual small percentage of people.
Of course, all this meant that we had to ruthlessly prioritize features to ensure we could have parity across all major platforms.
Being able to prioritize and cut features can be one of the hardest parts of being a designer, but doing so allows you to get designs out in the world in order to validate and build a better experience for the next iteration. Features that initially felt like launch blockers for this project, such as multi-frame support, had to be put on hold to ensure the project would have the largest impact (and quickest learnings) possible. Ultimately, having our first version out in the world allowed us to have a product ready for huge global events, like El Clasico.
Unfortunately, not all moments that warrant displays of support and community are celebratory. After the 2015 Paris terrorist attacks, we made the decision to use the profile picture frame tool in order to help people show support for the people of Paris. Our team jumped into action to ensure our platform was ready to launch a new frame. We learned a lot about using profile pictures for expressing support over the course of just 72 hours. Most importantly, this event reinforced our resolve to create the platform and get it out to as many Facebook Pages as possible — allowing the community to create their own frames and spread their own messages of celebration, solidarity, or even mourning. We’re hard at work to make that kind of platform a reality.
When you are part of any close knit community, like supporting Marriage Equality or Michigan Football, there is a real emotional and visceral feeling about seeing all your friends changing their profile picture and rallying around a single event or cause. You want to be involved, you want to show that you are part of this community too.
Creating a platform that enables people to show what communities and causes they care about was seemingly simple at first. In reality, it required prioritization to ensure the experience feels authentic and true to the original intention of a person wanting to change their profile picture. We had to break our traditional product cycles and make hard decisions. In the end, millions of people have used our platform successfully to show support for the things and communities they believe in most.
