Page MenuHomePhabricator

Design: Suggested Edits (final specs for the pilot release of Home)
Closed, ResolvedPublic5 Estimated Story Points

Assigned To
Authored By
KStoller-WMF
Jul 23 2026, 9:15 PM
Referenced Files
F98211498: image.png
Wed, Aug 12, 2:59 PM
F98210846: image.png
Wed, Aug 12, 2:59 PM
F98210561: image.png
Wed, Aug 12, 2:59 PM
F98210539: image.png
Wed, Aug 12, 2:59 PM
F98210518: image.png
Wed, Aug 12, 2:59 PM
F98210406: image.png
Wed, Aug 12, 2:59 PM
F98210356: image.png
Wed, Aug 12, 2:59 PM
F98210247: image.png
Wed, Aug 12, 2:59 PM

Description

Context

This task continues design work from T426702: Design prototyping: Personal Dashboard + Homepage [FY26-27, Deepen Engagement 1.3], which explored Dashboard layout paradigms, onboarding simplification, and navigation, and T420862: Early Design Ideation: Personal Dashboard + Homepage [FY26-27, Deepen Engagement 1.3] before it.

We are now moving from exploration to definition: the parent task T432668: Design: Pilot wiki release of Home (MVP to replace Newcomer Homepage) covers the final designs and specs for the pilot wiki release of Home. This subtask covers only the Suggested Edits module.

For this release we are aiming to improve second-week retention.
https://www.mediawiki.org/wiki/Contributors/Strategy

Task Objective

Produce final mobile and desktop designs and specs for the Suggested Edits module on Home, sufficient for engineering handoff.

The module must:

  • Be capable of fully replacing the Suggested Edits experience for pilot wikis
  • Be mobile-first: all core flows optimized for mobile, with desktop parity
  • Use Codex components when logical
  • Be designed for the new Home view, which is delivered technically via the PersonalDashboard extension.
  • Limit suggestions to a motivational and achievable number
Designs
  • Mobile and desktop layouts for the Suggested Edits module on Home
  • All module states: loading, populated, empty/error
  • The post-account-creation flow: what a new account holder sees on first landing, and how the module reflects choices made (or skipped) during account setup
UX specs & display states needing definition

Post-account-creation flow

  • If the user completes account setup (interest/topic selection), how are their selections reflected in the module on first view?
  • If the user skips account setup, what default suggestions do we display, and do we prompt them to add interests later?
  • If suggestions don't exist for the indicated interests, what do we display? Do we fall back to other topics, and how do we communicate that?
  • If the user completes all available suggestions, what do they see?

Module display states

  • Suggestions fail to load (error state): what messaging and retry affordance do we show?
  • Can the user minimize or dismiss the module?

Content & layout edge cases

  • Long article titles, missing article images, and truncation behavior on small viewports
  • RTL layouts and long translated strings
Acceptance Criteria
  • Final mobile and desktop designs for Suggested Edits on Home
  • All module states designed (loading, populated, empty/error)
  • Specs documenting display states and conditional logic, sufficient for engineering handoff

Event Timeline

KStoller-WMF triaged this task as High priority.
KStoller-WMF moved this task from Inbox to Up next Sprint on the Growth-Team board.
KStoller-WMF set the point value for this task to 5.Jul 26 2026, 10:20 PM

to get things started lemme share (hopefully) all the different variants of the suggested edits module as of today!

suggested edits onboarding - page 1

image.png (1,332×1,308 px, 169 KB)
image.png (1,314×390 px, 49 KB)

suggested eduts onboarding - page 2

image.png (1,332×1,308 px, 160 KB)

suggested edit module (desktop and mobile)

image.png (1,328×1,304 px, 615 KB)
image.png (728×1,280 px, 244 KB)

suggested edits module info (desktop and mobile)

image.png (1,328×1,390 px, 218 KB)
image.png (720×638 px, 77 KB)

suggested edits module preview (mobile and table only)

image.png (688×436 px, 33 KB)
image.png (796×548 px, 100 KB)

suggested edits loading state

image.png (2,160×1,458 px, 162 KB)

suggested edits more info - page 1 (desktop and mobile)

image.png (1,012×918 px, 120 KB)
image.png (724×1,284 px, 108 KB)

suggested edits more info - page 2 (desktop and mobile)

image.png (1,012×1,016 px, 150 KB)
image.png (724×1,284 px, 117 KB)

suggested edits module filter (desktop and mobile)

image.png (1,328×232 px, 22 KB)
image.png (720×1,450 px, 136 KB)
image.png (828×242 px, 21 KB)
image.png (1,340×1,756 px, 249 KB)
image.png (1,252×1,140 px, 152 KB)
image.png (720×1,450 px, 130 KB)
image.png (1,252×372 px, 51 KB)
image.png (720×360 px, 29 KB)

suggested edits module empty state

image.png (1,328×1,304 px, 90 KB)
image.png (728×1,280 px, 71 KB)
image.png (1,328×1,304 px, 96 KB)
image.png (364×640 px, 30 KB)
image.png (1,328×1,304 px, 94 KB)
image.png (728×1,280 px, 75 KB)

AAlhazwani-WMF changed the task status from Open to Stalled.Wed, Aug 12, 2:59 PM

sharing an update to inquire feedback! as a first step we took the existing mobile web module and went through a "codex-ification" process:

  1. first, we looked at the suggested edits module in production
    image.png (824×1,848 px, 221 KB)
  2. then we rebuild the same exact module with the same exact content with codex tokens and stock components
    image.png (856×1,880 px, 112 KB)
  3. and we started to think how to remove potential elements to lighten the experience
    image.png (856×1,880 px, 107 KB)
  4. then we wondered how we could expose more suggestions, like 3 instead of one
    image.png (856×1,880 px, 152 KB)
  5. we tried removing the background and the border to reduce visual noise, especially as we plann to add more content to this page
    image.png (856×1,880 px, 156 KB)
  6. swapped the robot icon with a lightbulb icon to standardize how suggestions are presented to people (building off 'suggestion mode' from the editing team)
    image.png (856×1,880 px, 156 KB)
  7. and swapped the arrow icon with a contextual menu to give immediate access to interests, types of edits, and info materials
    image.png (856×1,880 px, 184 KB)
  8. and those menu items open either a dialog (building off our 'account setup' work T430058) or a popover
    image.png (856×1,880 px, 262 KB)
    image.png (856×1,880 px, 196 KB)
    image.png (856×1,880 px, 181 KB)

building off this process we outlined all the different variants that 'suggested edits' need to support (figma file).

  • for the section on the Home these are the current variants:
    image.png (2,816×1,440 px, 547 KB)
  • and when people tap on "See all suggestions" we open a full view with the upcoming: card group divider
    image.png (3,320×1,450 px, 731 KB)

We can consider this task resolved and these designs approved.

We are aiming to move quickly and get a version of Suggested Edits available for the PersonalDashboard ASAP, so if engineers run into technical blockers in implementing any of these changes, let's discuss!

Also note that long-term I'm hoping we can implement larger images for Suggested Edits (full card height), but if that's not feasible with current Codex cards, then we can stick to these smaller image sizes.