Project hero image

Profile Type Differentiation

Facebook / Meta 2022
Overview

We offer many different types of profiles/entities for users to express themselves. Personal, Additional, Professional, Community. It is hard to differentiate between different entity/profile types. Especially between AP+/Pages and Personal Profiles. We also have a legal requirement to show when these profiles are a business entity.

Role

Lead Product Designer

Responsibilities

Product Design
Product Strategy
Design QA

Team

Emma Framson, Product Manager
Dosoo Amenyah, Product Manager
Chris O'Boyle, Designer
Kristine Domingo, Engineer
Nicole Sadler, Privacy / Legal
Qianxu Zeng + more, Design review

Narrative

Historically, we have been asked by PXFN (privacy cross function partners) and integrity teams to provide users insight into the entities they’re engaging with across two axes:

1. Insight as to the profile type, given that policies/capabilities can differ
2. High level access to critical integrity information about the entities

Problems and goals

Problems we were trying to solve

  • Users had hard time differentiating between profile types
  • The profile details section was cluttered
  • Some information was redundant
  • Important information was too far down the screen

Project goals

  • Surface entity information higher up the screen and more differentiation
  • Easily access integrity information about this entity.
  • Meet all Privacy and Legal requirements
  • Declutter and reorganize the screen and header section

Strategy and kickoff

First I needed to gather all of the requirements. Initially part of this request came from an exectuive stating the profile surface looking cluttered, which kicked off a redesign effort, but this would have many implications. I wanted to learn all the ins and outs of the intergrity information we would need to keep in tact.

Process

Current implementation

Current page labels

Currently we use a “Page” label on a user's profile in the About section to show that this is a Page or professional Profile. Feedback received is that this is really heavy and “clunky” and takes up more space than necessary. However, removing this label would not be allowed under our privacy or integrity policy so it would require several other changes to be made.

1. Need a way for users to access the integrity screen (which is linked from the blue link)

2.Need a place to house the "category" that a user selects when building their profile. This is mandatory on all profile types except for a personal profile.

Brainstorming and initial explorations

For the first pass, I wanted to see if adding an element would be helpful, one, because it wouldn’t require us to remove any valuable information and two because a new element usually catches the eye of the user. I tried a few variations; icon, label or the category alone

First pass explorations image

Feedback and insights

  • Need ability to get to the Page transparency screen (currently “i” icon)
  • Would not meet privacy requirements with no "i" icon.
  • Keep any elements out of the navigation area
  • Cannot have icons near the profile photo as that is reserved for the "online" status dot.
  • The category isn't obvious that it's tappable
  • Might want something a little more subtle
  • How might we reduce the size of the header?

Passes 2, 3, and 4.

We quickly realized we didn’t want to add additional visual elements due to scale and localization, so we opted for some more subtle variations. Moving the label into the header or just adding it to the details section header. But each one had it’s pros and cons. We also needed a review by the Privacy, Legal and Integrity teams. I worked with these teams to further understand some of the requirements.

Labels in details header
Meanwhile, in tandom, we wanted to see if we can could further reduce the height of the header, as part of our content first iniative. We had be quietly testing a left aligned and smaller profile picture, as well as more consolidated information. Here are some mocks with an updated header design. Ill explain some of the changes we made in a second.
Labels in the header redesign
With this header redesign, we wanted to make the important things easier to find, and consolidate some pieces of information within multiple lines. We also reduced the height of the cover photo and reduces the overall size of the profile photo. This would gain us about 54px total. However, this introduced Privacy problems, which we needed to address.

Final outcome

After some feedback from legal, privacy and integrity, we felt confident that we had a solution that would relocate all of our text strings without increasing section height, keep things accessible and be usable.

Additional / Professional Profile (previously Pages) before and after

Additional Profile before and after
After some feedback from legal, privacy and integrity, we felt confident that we had a solution that would relocate all of our text strings without increasing section height, keep things accessible and be usable.

Community Profile (previously Groups) before and after

Community Profile Clean

Final Variations

Finally, after combining all of these changes along with the differences between entities already such as various button CTAs, the ability for some profile types to have a visible username, and the verified badge, we made significant progress on differentiating between our four main profile types. Have a look below.

Final screens

User testing and results

This is currently undergoing more testing but the previous testing had given us lots of insights.

Key insights

  • Too much information detracts from the user experience.
  • Unless it's a "vital" integrity signal, progressive disclosure is the right method to communicate.
  • Patricipants from Brazil felt it was especially important to understand when other profiles can distribute ads.
  • Participants wanted to know if a profile was personal or professional, so they could confirm they were following the correct profile.
  • Participants were split on the importance of knowing if a profile had admins or not.
  • Participants had no idea that Pages and Profiles had different capabilities.

Learnings and next steps

What did we learn?

  • We learned a lot of about the importance of integrity.
  • We cannot make it harder to access this information (no more than 1 click away)
  • Integrity info must display admins, admin location, ads capability, whether an entity is running ads currently, whether an entity is state owned, etc.
  • We don’t have to necessarily have a text label to differentiate entity types, this could be visual or other.
  • The text label we currently have doesn’t have to be blue.
  • The entity label and integrity info entrypoint don’t have to be the same thing.

Changes we made

  • We made the arrow navigate directly into the integrity information so that it is still just one tap away.
  • Added all of the necessary integrity information

Next steps

  • We will be watching the data very closely and adjusting sizing, spacing and more to optimize our content consumption.

Previous Project

Next Project

Chef Privé - Conceptual App

View Project
Chef Prive project thumb

Facebook Name Change Flow Redesign

View Project
Hero image

Next Project

For fun: Chef Privé

coming soon
Chef Prive project thumb

Previous Project

Yahoo Follow

View case study
Yahoo follow project thumb
Contact me avatar
Want to work together?

Let’s get in touch!