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.
Product Designer
Product Design
Product Strategy
Design QA
2 Product Managers
1 Designer
2 Engineers
and many more
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.
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.
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.
I noticed a few inconsistencies right off the bat:
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.
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.
I made a few changes here just to improve usability and keep things consistent. Now the content on the screen will not change.
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.
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.
This is currently undergoing QA and should be released to the public soon.