⚠️ This task is work in progress and specs will be completed in week 49.
⭐️ Specs in this task originated from this [concept doc](https://www.notion.so/wikimediadesign/Watchlist-be87bcc07d7c4f9fa7a4b4507dcb49e1).
👨🎨 Check out the latest designs for this task on [Zeplin](https://zpl.io/a3mkop8).
---
# What is a Watchlist?
A watchlist is a page which allows any logged-in user to keep a list of ”watched” pages and to generate a list of recent changes made to those pages (and their associated talk pages). In this way, you can keep track of and react to what's happening to pages you have created or are otherwise interested in.
**👉 Learn more on [Help:Watchlist](https://en.wikipedia.org/wiki/Help:Watchlist)**
---
# Why are we doing this?
Why are we introducing the Watchlist on Android? The Android team is focusing on building a stronger ecosystem for editors. If we enable editors (beginner and advanced) to communicate with each other with less friction, it will cultivate a more widespread ecosystem and a better community. Advanced editors can guide beginners in making good edits **and** a larger community of regular readers can give feedback on article talk pages. As part of these efforts, Wikipedia Watchlist is introduced on Android.
---
# User story
As a novice editor (or an experienced editor) of an article I care about, I'd like to monitor the article for changes, including:
- Good-quality edits by other editors, so that I could thank those editors for their contributions.
- Good-faith edits that don't quite make the grade, so that I could give feedback to those editors to improve their edits.
- Bad-faith edits (vandalism, misinformation, etc.) that I could revert.
---
# TOC
- **1)** Watchlist article experience
- **2)** Watchlist main view
- **3**) Watchlist diff view
- **4)** Watchlist notifications?
- **5)** Onboarding new users
- **6)** Analytics questions
- **7)** Appendix
---
# **1)** Watchlist article experience
| 1. | 2. | 3. | 4.
| {F33929231} | {F33929233} | {F33929235} | {F33929237}
**Flow:**
1. User selects `Add to Watchlist` in the overflow menu
2. User sees a confirmation snackbar with an additional option to change the duration of the watched item (Watchlist Expiry).
- Copy: `%itemName` and its talk page have been added to your watchlist permanently.
3. User sees a toast to select the duration
4. User sees a confirmation snackbar
- Copy: `%itemName` and its talk page have been added to your watchlist `%durationPeriod`.
- Options (consistent with Desktop Wikipedia):
- Permanent
- 1 week
- 1 month
- 3 months
- 6 months
---
# **2)** Watchlist main screen
| 1. | 2. | 3.
| {F33929247} | {F33929251} | {F33929253}
**Remarks:**
- Users access their Watchlist via `More` main navigation item.
- Watchlist features items from all active user languages by default. The languages can be selected via language icon in the app bar (see 2.).
- Hide the language icon in the app bar if only 1 app language is set.
- Quick filters at the top (All, Talk, Pages, Other) allow filtering the view (similar to the Mobile web version).
- Tapping a Watchlist item leads to the diff view, see chapter 3).
- A Watchlist card item consists of:
- Title (article, talk page, other)
- Language indicator (e.g. `EN`)
- Hide the language indicator if only 1 app language is set.
- Time
- Diff summary, if available
- If not available, preview the change itself
- Characters added / removed
- Editor information
- User icon (person or anonymous)
- User name that links to user profile
---
# **3)** Watchlist diff view
| 1. | 2. | 3. | 4. | 5. | 6.
| {F33930051} | {F33930053} | {F33930062} | {F33930055} | {F33930057} | {F33930059}
1. Shows the main view of the screen.
2. Show the overflow menu of the screen.
3. State when tapping the 'WATCHING' button: Snackbar appears and button changes 'WATCH'.
4. Thanks flow #1: Dialog appears after tapping the 'Thanks' button to raise awareness.
5. Thanks flow #2: Snackbar confirms that the 'Thanks' has been sent. Thanks button is greyed out.
6. Thanks flow #3: Shows the Snackbar when 'Thanks' has already been sent for a specific edit.
**The view consists of:**
- App bar
- Back button
- More menu
- Share edit (icon) → triggers native share dialog with a link to this diff
- Undo edit (icon) → action to be defined
- %userName’s talk (icon) → takes users to the in-app talk page of this user
- %userName’s contributions (icon) → takes users to the user contributions screen (external link)
- Link to Watchlist item (article, talk, other)
- Button
- Watching
- Full star icon when permanent
- Half star icon when impermanent (→ Watchlist Expiry)
- Date / time
- Previous / next navigation buttons → to navigate back and forth between the Watchlist item’s edit history
- User profile button
- Thank button
- Indication of characters added / removed
- Edit summary
- Edit diff
### Diff style / colors
- Images below derive from iOS, we keep it consistent
- Use `Roboto Bold` to highlight changes in diff
- Use ~~strike through~~ to indicate removed characters
- Background-color: → see table below
| | Light | Sepia | Dark | Black
| **Addition** | {F33934367} | {F33934373} | {F33934377} | {F33934381}
| font-color | `base10` | `green50` | `green50` | `green50`
| background-color | `green90` | `none` | `none` | `none`
| **Removal** | {F33934365} | {F33934370} | {F33934375} | {F33934379}
| font-color | `base10` | `red30` | `red75` | `red75`
| background-color | `red90` | `none` | `none` | `none`
More on colors: [Visual Style: Colors – Wikimedia Design Style Guide](https://phabricator.wikimedia.org/maniphest/task/edit/264017/)
---
# **4)** Watchlist notifications?
Per @Dbrant’s technical investigation: «Unfortunately, it does not look like watchlists are designed in such a way that Echo notifications can be sent upon every edit made to any article in a watchlist. (Question: would we ever need such functionality?) The watchlist would become a 'destination' that the user would need to enter deliberately.»
---
# **5)** Onboarding new users
(to be filled in)
---
# **6)** Analytics questions
//To be refined with Shay and Dmitry.//
- **Existing users to Watchlist**
- How many existing users have adopted the feature?
- **New users to Watchlist**
- How many new users with an account are using the feature?
- How many users are creating an account based on the new feature?
----
# 7) Appendix
## Related links
- [Help:Watchlist - Wikipedia](https://en.wikipedia.org/wiki/Help:Watchlist)
- Watchlist Expiry
- [Watchlist Expiry WIP - Google Slides](https://docs.google.com/presentation/d/12_0m3K-OcdDRB5tHY4ZnUgM25iY7-8BA8I7Z3TfzbYA/edit#slide=id.g4f7238e74f_0_0)
- [Watchlist: Mobile Alternatives - Google Slides](https://docs.google.com/presentation/d/1aNpOP6-gZJjGDOw4XOW3ejT_U7dXGRmloxIJCPv7jAM/edit#slide=id.g703cbd8461_0_0)
- Enabled on [Mediawiki.org](http://mediawiki.org/), and we'll be releasing the feature to more wikis over the coming weeks.
- This feature was developed in response to the #7 request in the 2019 Community Wishlist Survey.
- To learn more, you can check out the [Help:Watchlist_Expiry](https://www.mediawiki.org/wiki/Help:Watchlist_expiry) page on [Mediawiki.org](http://mediawiki.org/), as well as the project page. Since this is a new feature, we invite you to share your feedback on the project talk page!
- [⚓ T264017 User Experience for Watchlist](https://phabricator.wikimedia.org/T264017)
- Pau’s work:
- [New Filters on Watchlist - Google Slides](https://docs.google.com/presentation/d/1Mn6Ul8Bcj6sn6xsVGQanya_OR-FCQdoYnKNZm5KixSo/edit#slide=id.p)
- [Research plan draft for extended filters - Google Docs](https://docs.google.com/document/d/16afvBWjp2ckFPqbu_JrQmFtjW3NwuYUnlrL8e7ZOMvM/edit)
- [Manual:Watchlist - MediaWiki](https://www.mediawiki.org/wiki/Manual:Watchlist)
- [Wikimedia Apps/Synced Reading Lists - MediaWiki](https://www.mediawiki.org/wiki/Wikimedia_Apps/Synced_Reading_Lists#Why_Not_Watchlist)
- [Reading/Reading Lists - MediaWiki](https://www.mediawiki.org/wiki/Reading/Reading_Lists#How_does_Watchlist_fit_in)
- [Query: Advanced Search](https://phabricator.wikimedia.org/search/query/PSAqokspNQDc/#R)
## Todos
- [x] Add concept for diff view
- [x] Define thanks flow
- [x] Add color definitions for diff view
- [ ] Define revert flow
- [ ] Should we surface revert functionality more prominently in the diff detail screen? (per Johan’s feedback)
- [ ] Design onboarding process, ask Johan for feedback so both newcomers and experienced editors are addressed.
- [ ] Fill in analytics questions