Update to the "name change" flow in the Facebook App

Facebook / Meta• 2022

Overview

This was a fairly simple / straightforward project, where we needed to make a change in the logic of how often and when a user can change their name, but we needed additional design to support this change, and while we were changing code, we might as well update the styling of the flow from a 4 year old style, to the latest "tetra" styling that Facebook currently uses.

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
Qianxu Zeng + more, Design review

Narrative

This project arose because there was a change needed to the mechanic that allows a user to change their name. Especially if they had the verified check mark. Some users were abusing the system by obtaining the check mark and then immediately changing their name to another person, say Elon Musk, Bill Gates, or Kim Kardashian, and spreading false narratives on their page. This is clearly a breach of our policy so we needed to change the backend mechanic and algorithm to protect against this abuse. This will increase the trust our users give to the verified badge and increase Facebook's platform integrity.

Due to this change, we needed additional design work, some sort of a notification, some copy and explanation and since we were already going to me changing some of the screens in this flow, I figured I would bring the styling up to our current style guide. As it had been using a style from about 4 years prior.

Problems and goals

Problems we were trying to solve
‍

Users were unsure when a "verified" user was legitimate because some users had been abusing the system.
Flow was clunky and had lots of options / steps. How do we optimize?
UI of this particular flow was outdated

Project goals
‍

Increase trust among users of the verified check mark
Educate users about the repercussions of changing their name
Discourage or eliminate abuse of the name change system
Modernize the styling of this particular flow so it matches other parts of the app
Improve the UX of the overall flow, making it more efficient and easier to use/understand.

Strategy and kickoff

I was made aware of an upcoming policy change. I spoke with engineering about the proposed change and walked through the change with them, noting the current experience through an audit. I thought it might be helpful to add additional verbiage and maybe an additional screen to warn users about the complications or repercussions of changing their name after becoming verified or changing their name too often. As I walked through the current flow, I noticed there was a slightly cumbersome UX experience and immediately noticed the UI was different from the current look and feel of most of the rest of the app. I also proposed modifying this while we were in there making changes. This was thought to be a good idea and was conditionally approved pending the amount of work / lift required.

Process

Current implementation audit

First, I needed to do an audit of our current implementation. How does it work? What are any causes a user could get hung up... Below is the basic flow as it stood.

Initial reactions

I noticed a few inconsistencies right off the bat:

Some screens had a title, while some did not.
Different back icons for some reason.
I don't know why the screen totally changes when you hit a password error. You lose most of the contextual text and the "current page name"
If you submit a wrong password, the help text shows now you can't change your name for 60 DAYS!!!!! (up from 7?)
The confirmation screen seemed to be a dead end. The back icon on the success screen took you backwards to the previous "Preview" screen. Where you would then need to tap "Cancel" to get back to the Settings surface. Huh? That seems broken.

Part 1- UX cleanup of the primary flow

Name screen

I made a quite a few changes to this screen to improve usability and readability. I fixed most of the UX issues that were plaguing this flow.

Similar to the current behavior, this screen puts the user directly into edit mode (and the title now reflects this), however "Save" is disabled until a user actually makes any change.
Moved the contextual note up to the top and bolded the important information since our policy change, only allows a user to change their name every 90 days now (up from 7).
An alternate concept I had was having a more prominent message at the top explaining the policy change and how drastic of a change this was. But this was thought to give too much prominence to a negative policy change. I thought the purpose was to discourage users from abusing this feature. Shrug
Updated the contextual message ("Please note")to our latest style.
Removing redundant page title and section heading.
Updated button group and rest of the surface to latest UI.

Update to the contextual message

Moving the policy change notification to the top was not approved, as it brought too much attention to what was considered a negative policy change. So I needed to revert back to the previous placement and just update the style. Bummer. That seemed important.

Preview name change screen

I made a few changes here just to improve usability and keep things consistent. Now the content on the screen will not change.

Cleaned up the UI and made it easier to read / scan the information you just changed.
Kept all of the content consistent throughout this screen, regardless of any action or errors you may make.
Updated the form fields to our latest style. It is important to keep the contextual information (such as error messaging) in close proximity to the action you just took. Rather than moving the error message to the top.
Disabled the Save button if the user is unable to proceed, for example, if the user typed in an incorrect password.

Confirmation screen

I think this was the biggest change. Now instead of the confirmation screen being a dead end and having to go backwards into the flow, I have it automatically go to the Edit name screen, but now you're unable to edit the screen. Originally I made it go back to the settings screen directly with the toast at the bottom, but after receiving feedback, it was agreed that we should just bring them to the first step of the flow. A simple tap of the back button will bring them back to the settings page. I suggested we test both versions, just to see how people react.

Part 2 - Other names

You may have noticed the "Other names" section at the bottom. This is where users can add additional names such as nick names, or maiden names, etc. This also needed a revamp. This didn't have any policy changes or large UX problems, so this was mainly a revamp of the styling and how the drop down works. I'll show some of the before and after and keep this section simple.

I made a handful of UI improvements and brought in our "tetra" styling. Also, we did away with the traditional drop down because the Facebook appnow uses an action sheet to house option menus.

Prototype

Click to view a fun little prototype I made of this flow. You can also play around with the prototype in Figma here

Testing and results

This is currently undergoing QA and should be released to the public soon.

Learnings and next steps

What did we learn?
‍

Since we want to discourage people from changing their name, this needed to stay somewhat buried in the settings section rather than at the forefront of a user's profile.

Future considerations
‍

One thing I would want to test is having the password entry be on a separate screen when you try to change your name. But that wasn't an option because it would require too much engineering effort and this needed to be a fairly lightweight and quick turn around project.
Explore adding icons to the name types field. Not in scope for this project.
Explore adding an additional screen or notice that would explain that a user would potentially lose their verified checkmark if they change their name. Not in scope for this project.