Copy Redesign of Facebook Page Creation screens

Awamba Izu
8 min readApr 6, 2022

Daily UX Writing Challenge: Day 15

Photo by Brett Jordan: https://www.pexels.com/photo/blue-and-white-logo-guessing-game-5426402/

This post is in response to the Daily UX Writing Challenge, and this is the final challenge. The instruction was to rewrite the copy on the page creation screens of Facebook.

My approach to this copy redesign is mostly focused on consistency of language, and active communication with the user; using “you” and ”your.” Addressing the user personally and directly encourages them throughout the process. Maintaining consistency in tone and word choice helps limit cases of confusion in the process.

Let’s get started!

Screen 1

Copy to be changed

Pages are for businesses, brand and organizations, and they're free to set up.

Problem with the copy

The highlighted text is not consistent with the tone of the headline, which is personal and directly addresses the user. The headline uses “your”, but the body just talks about businesses, brands and organizations, without establishing an association with the user.

Final copy

Create a Page for your business, brand, or organization. It’s free to set up.

Solution

The final text gives a clear overview of what the user is about to do, and addresses them directly; “…your business, brand, or organization.” It sounds personal, and still reflect the informal language consistent with the rest of the app.

Before and after screens reflecting a change in the copy as explained before this image.
Images were gotten as screenshots and edited with Figma

Screen 2

Copy to be changed

Description text: This is how people identify your Page

Placeholder: Start typing

Guide text: The title of your Page should match the name of your brand, business or organization

Problem with the copy

  • The body text above the input field can be interpreted to suggest that the title is the only way the page can be identified. However, multiple pages can have same title, and in that case, the title cannot be an effective means of identification.
  • The placeholder text does not relate to the rest of the text on the page, and does not talk about the content of the input field.
  • The guide text below the input field focuses on how the title should be, instead of directly instructing the user on what to do. It deviates from the normal order used before, and starts with brand instead of business.

Final copy

Description text: This helps people identify your Page

Placeholder: Page title

Guide text: Use a title that matches the name of your business, brand, or organization.

Solution

  • The final body text shows that the title helps in identification, but is not the only way we can identify the page.
  • I’m not a fan of placeholder texts, especially in this case where there is a description above the input field and direction below. However, because of the faint color of the input field, a placeholder would let the user know where to click to input text. The final placeholder text simply describes the expected content of the input field.
  • The final guide text addresses the user directly, and does not just focus on how the title should be. “Use THIS” instead of “THIS should be…” It also maintains the same arrangement of business, brand and organization, as in the first screen.
Before and after screens reflecting a change in the copy as explained before this image.
Images were gotten as screenshots and edited with Figma

Screen 3

Copy to be changed

Headline text: What’s this Page about?

Guide text: Add one category to help people understand your page. Choose the closest one — you can update it later.

Problem with the copy

  • The headline on this screen is not consistent with the tone of the other headlines. It just introduces a question, and that is not in line with the instructional tone of the previous (and next) headlines.
  • The guide text can be put into fewer sentences.

Final copy

Headline text: Choose what your page is about

Guide text: Choose the closest category that helps people understand your page. You can change it later.

Solution

  • The final headline gives the user a clear instruction on what’s expected in that step of the process.
  • The guide text is in fewer sentences and communicates a clear message. Also, the word update was replaced with change, because update means the original subject would not be fully replaced, just upgraded, or made different. However, in this case, a change in category would mean the previous category being fully replaced, not just upgraded, hence change is more appropriate.
Before and after screens reflecting a change in the copy as explained before this image.
Images were gotten as screenshots and edited with Figma

Screen 4

Copy to be changed

Body text: If you have a website, add it here so people can get to it from your Page

Skip option: You can skip this step if you don't have a website.

Problem with the copy

  • The description text is plain. It could be better and more motivational.
  • The option to skip does not follow a straight flow. The user has to pass the skip option while reading, then return to it to click.

Final copy

Body text: This would help drive traffic from your Page to your website

Skip option: If you don't have a website, you can skip this step.

Solution

  • The description text highlights a significant advantage of adding a website, and this can help to motivate the user.
  • The skip option is placed towards the end of the sentence, so the user just reads through once, and clicks when needed.
Before and after screens reflecting a change in the copy as explained before this image.
Images were gotten as screenshots and edited with Figma

Screen 5

Copy to be changed

Healine text: Add a profile picture

Body text: Pages with profile and cover photos show up higher in search results.

Call To Action: Change photo

Guide text: A photo or logo works well here.

Problem with the copy

  • The word picture is not consistent with the rest of the page. Photo is used everywhere else.
  • Show up can have different meanings, and can be replaced with a more appropriate, and simpler word.
  • Change photo is out of place, because the user is just in the process of creating the page, and no photo is there to be changed.
  • There is no helpful instruction on the relationship between the page and the photo.

Final copy

Headline text: Add a profile photo

Body text: Pages with profile and cover photos appear higher in search results.

Call To Action: Upload photo

Guide text: Use a photo or logo that is relevant to this Page.

Solution

  • The final headline uses photo instead of picture, to maintain consistency in the copy.
  • Show up is replaced by appear which is a simpler and more appropriate word. Appear is also more commonly used when talking about search results on the internet.
  • Upload photo directs the user to upload a photo, unlike the previous copy that tells the user to change something that was never there in the first place.
  • The user is clearly instructed to use a photo that is relevant to the Page. This would help in identification of the page.
Before and after screens reflecting a change in the copy as explained before this image.
Images were gotten as screenshots and edited with Figma

Screen 6

Copy to be changed

Body text: Pages with profile and cover photos show up higher in search results.

Guide text: Choose a larger, high resolution image for your cover photo.

Button text: Next

Problem with the copy

  • Show up can have different meanings, and can be replaced with a more appropriate, and simpler word.
  • There is no helpful instruction on the relationship between the page and the cover photo.
  • After this step of the process, the page is created. The word next does not inform the user appropriately. It makes it seem as if there is another step of the creation process.

Final copy

Body text: Pages with profile and cover photos appear higher in search results.

Guide text: Use a larger, high resolution image that is relevant to this Page.

Button text: Create Page

Solution

  • Show up is replaced by appear which is a simpler and more appropriate word. Appear is also more commonly used when talking about search results on the internet.
  • The user is clearly instructed to use a photo that is relevant to the Page. This would help in identification of the page.
  • The button tells the user that they are at the last stage, and clicking it would create the page. This makes the user conscious of that fact and helps them know what to expect after clicking.
Before and after screens reflecting a change in the copy as explained before this image.
Images were gotten as screenshots and edited with Figma

FINAL PAGE CREATION FLOW

An image containing 6 screens with the final edited copy explained above.
Image created by Author with Figma

OBSERVATIONS AND TAKEAWAYS

  • I observed that the word page always started with a capital letter, no matter where it appeared in a sentence, as in “Give your Page a title” I believe this is because page is not used as a common noun, but as a proper noun, to depict a specific feature of the Facebook application. So it’s not just a page, it’s the Facebook Page.
  • More information than the above is needed to set up your page fully, but only the most important information is required when creating the page. That is good because it shortens the page creation process, and a shorter process encourages the user to finish. However, I would suggest adding an indication of progress on each screen, so the user can see how far they’ve gone and how much is left of the process.
  • I thought of a page preview process after adding a cover photo and before creating the page, but that would not have so much benefit. This is because information provided during the creation process can easily be changed anytime after the page is live, and making a preview screen a mandatory part of the process would just slow the user down.
  • Coming up with the new copy did not involve significant research, because this challenge had a time limit of 1 hour. However, I tried to ask people around me if the rewritten copy provided more clarity, ad this helped me adjust my drafts before arriving at the final copy.

Thanks for reading till the end. I’m really happy I got this far in this challenge and I’m grateful for all I’ve been able to learn. Kindly give feedback. I would appreciate it. Tell me what you observed while reading, or what I could have done better. I’m always willing to learn more and improve.

Connect with me on Medium or on Twitter!

--

--

Awamba Izu

I love to improve and simplify User experience, with words and actions.