Page MenuHomePhabricator

Create wireframes that outline the watchlist feature for iOS
Closed, ResolvedPublic

Assigned To
Authored By
RWambua-WMF
Apr 6 2023, 1:56 PM
Referenced Files
F37119631: Diff_View_(Stacked).png
Jun 26 2023, 5:04 AM
F37119629: Diff_View_(Side_by_Side).png
Jun 26 2023, 5:04 AM
F37119627: Empty_State_for_Logged_In_Users.png
Jun 26 2023, 5:04 AM
F37119625: Empty_State_for_Logged_Out_Users.png
Jun 26 2023, 5:04 AM
F37119612: Watchlist_home_(bottom_filter).png
Jun 26 2023, 5:04 AM
F37119618: Watchlist_home_(Top_Filter).png
Jun 26 2023, 5:04 AM
F36992506: iOS Watchlist 09.jpg
May 23 2023, 2:37 PM
F36992504: iOS Watchlist 08.jpg
May 23 2023, 2:37 PM

Description

Background

The Wikipedia Watchlist feature is a personalised tool that allows users to track changes and updates to their selected articles, making it easier to stay informed about specific topics of interest. By bringing this feature to iOS, it enhances the user experience, allowing for seamless access to real-time information and fostering greater engagement with Wikipedia's vast knowledge base. The integration into iOS devices ensures that users can conveniently monitor and contribute to the ever-evolving content on Wikipedia, bolstering the platform's collaborative nature and accuracy.

The Task

Task summary: Create designs for the first version of the iOS watchlist.

Requirements
  • Create low fidelity variant mockups of a proposed home for the Watchlist feature in iOS based on discussions heard in the design review. Let us remain flexible on the potential home of the iOS watchlist.
Design

Some of the designs created include:

1) Watchlist home
iOS Watchlist 01.jpg (1×786 px, 360 KB)
2) User context menu
iOS Watchlist 05.jpg (1×786 px, 413 KB)
3) Empty + logged in
iOS Watchlist 03.jpg (1×786 px, 167 KB)
4) Logged out
iOS Watchlist 04.jpg (1×786 px, 186 KB)
5) Account creation
IMG_32F3D5D324EC-1.jpeg (2×1 px, 577 KB)
6) Preview: Filtering
iOS Watchlist 02.jpg (1×786 px, 232 KB)
Preview: Filtering empty
iOS Watchlist 01 Empty.jpg (1×786 px, 155 KB)
7) User page
iOS Watchlist 06.jpg (1×786 px, 475 KB)
8) User talk
iOS Watchlist 07.jpg (1×786 px, 355 KB)
9) User contributions
iOS Watchlist 08.jpg (1×786 px, 491 KB)
10) Thanks
iOS Watchlist 09.jpg (1×786 px, 280 KB)

Other Designs Include:

Navigation Designs

Watchlist Top Navigation
Watchlist_home_(Top_Filter).png (1×524 px, 93 KB)
Watchlist Bottom Navigation
Watchlist_home_(bottom_filter).png (1×526 px, 94 KB)

Empty States

User is not logged in
Empty_State_for_Logged_Out_Users.png (1×530 px, 59 KB)
User is logged in but does not have a Watchlist
Empty_State_for_Logged_In_Users.png (1×526 px, 56 KB)

Diff View

Side by Side Comparison
Diff_View_(Side_by_Side).png (1×528 px, 201 KB)
Stacked Comparison
Diff_View_(Stacked).png (1×530 px, 151 KB)

Notes:

  • Disclaimer:
    • ⚠️ Where the Watchlist will be positioned is going to be determined in a design sprint in the weeks of May 15-29
    • ⚠️ The above design features a search bar and filter entry point, which will not be implemented in V1. They’re showcased to inform engineering about its positioning.
  • The Watchlist features all items from a user’s app language plus items from Wikimedia Commons and Wikidata
  • Tapping an entire Watchlist item takes users to a diff view of the edit (T335579)
  • Empty states
    • If the user is logged in but has no items on their Watchlist yet, an empty state is shown (3) with a CTA that leads users to the 'Explore' tab
    • If the user is logged out, a teaser for account creation is shown (4, 5)
  • Tapping the username reveals a contextual menu that leads to the in-app web view of the user page (7), native user talk page (8), in-app web view of a user’s contributions (9) or triggers a 'Thanks' dialog, that works the same way as implemented in the edit detail view of revision history (10)
  • The new design (1) is based on the existing revision history list design and adds:
    • Search and filter (for V2, the above designs should just give an idea of where search/filter will be positioned)
    • The title of the item (e.g. Polar bear)
    • The project of the item as an icon (Language, Project [Wikidata, Commons]
    • User menu as buttons for contextual actions (2)
References

Event Timeline

JTannerWMF subscribed.

We are going to have a separate task for navigation and placement of the feature on the main page and in article view. For now what we need is designs for the diff screen, list, watchlist snackbar

LGoto renamed this task from Create wireframes that outline the feature for iOS to Create wireframes that outline the watchlist feature for iOS.May 23 2023, 6:33 PM
LGoto moved this task from Needs Triage to Product Backlog on the Wikipedia-iOS-App-Backlog board.
LGoto added subscribers: OTichonova, ARamadan-WMF.