Change Details

**Background** The iOS app in Wikipedia needs to create a watchlist to allow users to track changes to articles they care about. We need a to have an empty state for users who are 1. Not logged in 2. Are logged in but do not have a watchlist **The Task ** The primary task is to: [] Create empty states that lead the users to log in to the Wikimedia application and understand what a Watchlist is and how to create it. To achieve this, we need to: [ ] Create text for empty state for users who are not logged in [ ] Create text for empty state for users who are logged in but do not have a watchlist Some other things to add: [] Ensure that the empty state illustrations are accurate [] Consider adding a button leading to onboarding slides on the empty state for users who are logged in but do not have a watchlist (so they understand what a Watchlist is and how to add items to their Watchlist. Basically saying "Hey! You don't have a Watchlist but this is how you can create one." **Requirements** - Tasks should lead users to create a watchlist - Task should lead users to log in to the app **Proposal on wording** **For users who are signed in but do not have a watchlist:** **Wording:** You do not have any articles in your watchlist and then we can have a button called “add items” that takes them to the watchlist. We can also reuse the android illustration that illustrates the empty state. {F37030413} **For users who are not signed in: Sync watchlist** **Wording:** Watchlists can now be synced across devices. Log in to your Wikipedia account and allow your Watchlists to be saved. Followed with a log in/sign up button. **References** [[ https://docs.google.com/presentation/d/1XnhtnsZxrVBgaV8byqR60Q6oGIDBdBuOI1_urGfhHPQ/edit#slide=id.g2238869534f_0_174 | iOS Watchlist Deepdive ]] [[ https://www.figma.com/file/YFtut34Eaq3vwS0lJQPbbE/iOS-Watchlist?type=design&node-id=176-9195&t=JwfTLW0nKNoYrtN9-0 | Figma file ]]

Absolutely, here's a formatting that can work well in a Phabricator task: --- **Task Title:** Design Empty State Screens for Wikipedia iOS App's Watchlist Feature **Background** 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. **Requirements** 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] **Designs:** Use the empty state designs that Robin put in the Figma file. | {F37031496} | {F37031498} **References** - [[ https://docs.google.com/presentation/d/1XnhtnsZxrVBgaV8byqR60Q6oGIDBdBuOI1_urGfhHPQ/edit#slide=id.g2238869534f_0_174 | iOS Watchlist Deepdive ]] - [[ https://www.figma.com/file/YFtut34Eaq3vwS0lJQPbbE/iOS-Watchlist?node-id=35-1733&t=7ckQxTz5xiKJeAeI-4 | Figma file ]]

Absolutely, here's a formatting that can work well in a Phabricator task: --- **Task Title:** Design Empty State Screens for Wikipedia iOS App's Watchlist Feature **Background** The iOS app in Wikipedia needs to createis developing a watchlistt 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. We need a to have an eCreate Empty sState for users who areScreens:** 1. N- For users who are not logged in 2. Are- For users who are logged in but do not have a watchlist **The Task **any articles in their watchlist The primary task is to:se 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. [] Create empty states that lead the users to log in to the Wikimedia application and understand what a Watchlist is and how to create itReview of Illustrations:** The empty state designs should be **reviewed by Olga** to ensure consistency with other empty state illustrations in the iOS app. To achieve this,**3. we need to: [ ] Create text for empty state for users who are not logged inDetail the "Add Items" Button Behavior:** [ ] Create text for empty state for users who are logged in but do not have a watchlist Some other things to add: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. [] Ensure that the empty state illustrations are accurateInclude a Watchlist Explainer:** [] Consider adding a button leading to onboarding slides onAs part of the empty statee screen for users who are logged in but do not have a watchlist (so they understand what a Watchlist is and how to add items to their Watchlist., Basically saying "Hey!include a brief explainer of what a watchlist is and how a user can add an item to their watchlist. You don't have a Watchlist but this is how you can create one."This should guide users on how to navigate to article pages and use the 'Watch' icon to add articles to their watchlist. **Requirements** - Tasks should lead users to create a watchlistThe 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!" - Task should lead users to log in to the app> [Add Items Button] **Proposal on wording**For users who are not signed in: **For users who are signed in but do not have a watchlist:** **Wording:** You do not have any articles in your watchlist and then we can have a button called “add items” that takes them to the watchlist. We can also reuse the android illustration that illustrates the empty state.> "Watchlists can now be synced across devices. Log in to your Wikipedia account and allow your Watchlists to be saved." {F37030413}> [Log In/Sign Up Button] **For users who are not signed in: Sync watchlist****Designs:** **Wording:** Watchlists can now be synced across devices. Log in to your Wikipedia account and allow your Watchlists to be saved. Followed with a log in/sign up button. Use the empty state designs that Robin put in the Figma file. | {F37031496} | {F37031498} **References** - [[ https://docs.google.com/presentation/d/1XnhtnsZxrVBgaV8byqR60Q6oGIDBdBuOI1_urGfhHPQ/edit#slide=id.g2238869534f_0_174 | iOS Watchlist Deepdive ]] - [[ https://www.figma.com/file/YFtut34Eaq3vwS0lJQPbbE/iOS-Watchlist?type=design&node-id=176-9195&t=JwfTLW0nKNoYrtN9-035-1733&t=7ckQxTz5xiKJeAeI-4 | Figma file ]]