Page MenuHomePhabricator

Copy: Wording for Empty States
Closed, DuplicatePublic


Task Title: Design Empty State Screens for Wikipedia iOS App's Watchlist Feature

The iOS app in Wikipedia is developing a watchlist feature to allow users to track changes to articles they care about. For users who have no articles in their watchlist or are not logged in, we need to design and implement "empty state" screens that communicate there's nothing to display and what actions they can take.

Task Description

1. Create Empty State Screens:

  • For users who are not logged in
  • For users who are logged in but do not have any articles in their watchlist

These screens should include the following:

  • Appropriate and informative text that guides users on the next steps
  • Accurate illustrations from the Figma designs to enhance user understanding

2. Review of Illustrations:
The empty state designs should be reviewed by Olga to ensure consistency with other empty state illustrations in the iOS app.

3. Detail the "Add Items" Button Behavior:
When clicked, the "Add Items" button should direct users to an onboarding screen that explains the process of browsing articles and selecting to add them to their watchlist.

4. Include a Watchlist Explainer:
As part of the empty state screen for users who are logged in but do not have a watchlist, include a brief explainer of what a watchlist is and how a user can add an item to their watchlist. This should guide users on how to navigate to article pages and use the 'Watch' icon to add articles to their watchlist.

The design and implementation of these empty states should:

  • Encourage users to create a watchlist
  • Prompt users to log in to the app

Wording Proposal

For users who are signed in but do not have a watchlist:

"You currently have no articles in your watchlist. A watchlist is a collection of articles that you want to track changes to. You can add articles to your watchlist by visiting the article page and clicking on the 'Watch' icon. Try it now by adding some articles!"
[Add Items Button]

For users who are not signed in:

"Watchlists can now be synced across devices. Log in to your Wikipedia account and allow your Watchlists to be saved."
[Log In/Sign Up Button]

Use the empty state designs that Robin put in the Figma file.

Screenshot 2023-05-25 at 00.49.33.png (1×640 px, 66 KB)
Screenshot 2023-05-25 at 00.49.48.png (1×644 px, 77 KB)


Event Timeline

As discussed in planning today, we will use the designs from Figma for illustrations, and add a requirement to the design task that the illustration aligns with other empty state illustrations in iOS.

The action here is for @RWambua-WMF to:

  • update the image to be the empty state file Robin put in Figma
  • Add a requirement to the design task that the illustration is reviewed by Olga and it is consistent of what we see elsewhere in the iOS app

Additonally, it isn't clear here what happens when someone clicks add items. So please:

  • Add further details of the expected behavior when someone clicks add items


  • Instead of instructing someone to add items, have explainer copy of how a user can add an item to their watchlist and what watchlists are for

It looks like Robin already has some placeholder copy in Figma. I recommend reviewing it and determining if it is sufficient or if it needs to be updated in any way. It may also be reviewing the empty state when someone have filters turned on.

Additionally have a look at Robin's comment in T335608#8845828 and determine if the task should be closed @RWambua-WMF.

Feel free to use T331272 as inspiration of format for copy feedback