Page MenuHomePhabricator

Homepage: Revised Banner module design
Closed, ResolvedPublic


User story & summary:

As a homepage visitor, I want to see information relevant to me, so that I can deepen my involvement in the wikis.

This task is a continuation of work started in: T354676: Campaigns + Growth offsite design sprint


Originally, the banner module was created at short notice to help certain communities that needed a way to direct users on local events to a different landing page from the homepage. (See T269804)

This task is to revise the banner module design to accommodate additional use cases (related to WE1.3) and associated needs (ability to close/dismiss, ability to target to certain users only based on set criteria, guidelines on content to include, etc.)

This task is important because there should be other ways to share general messaging with editors other than just Central Notice Banner. This task is also a step towards supporting the WMF Annual Plan Objective around WE1.3.


This task should include three separate designs:

  1. Banner design iteration 1 (the WE1.3 MVP release)
  2. Community Configuration for Homepage Banner (for design iteration 1)
  3. Banner design iteration 2 (long-term ideas that aren't part of the initial release)

Banner design iteration 1 (the WE1.3 MVP release)

  • Design that includes the basic features needed for an MVP release: banner title, icon/image, main text, call to action, and the ability to dismiss the banner.
  • Create a desktop and mobile version that shows the default location of the banner on the homepage.
  • Mockup two separate use cases for this banner: a WE1.3 campaign (possibly: Celebrate Women campaign), a Knowledge Gap themed Content Translation CTA (related to translating/adding articles related to Knowledge gaps in general, or focused on closing the gender gap or related to adding more content related to underrepresented geographic regions)

Community Configuration for Homepage Banner (for design iteration 1)

  • Design that includes how the Homepage Banner will look from the Community Configuration side. Utilizing current Community Configuration 2.0 designs, add a Banner section to the Community Configuration form related to the Homepage.
  • Configurable elements of the Homepage Banner should include:
    • The homepage visible elements: banner title, icon/image, main text, button text (call to action).
    • The background logic: Is the banner enabled or disabled? Admins should be able to configure the banner to only display to certain users (based on user groups? edit count? permissions?). For example, a banner about new editor training should be targeted to newer editors, but a banner about a Women in Red Campaign might want to target more experienced editors.

Banner design iteration 2 (long-term ideas that aren't part of the initial release)

  • Design that includes the more advanced set of features that we hope to add to a future iteration of the banner module. For example: ideas like highlighting more than one event (the ability to scroll/click through multiple banners), the ability to customize where on the page the banner displays, the ability to add in further community configurable logic (scheduling of banners), etc. NOTE: please timebox iteration 2 work to only a few hours. It's OK if iteration 2 designs are a work in progress, as this doesn't block our immediate plans.
Community updates moduleContent translation moduleCommunity Configuration for Community updates module
mobile v.1 (4).png (1×362 px, 73 KB)
mobile v.1 (5).png (1×362 px, 82 KB)
desktop v.1 (4).png (1×2 px, 345 KB)
(same as previous desktop mockup)
Form for newcomer homepage (5).png (1×1 px, 122 KB)

Figma designs

Acceptance Criteria:
  • Initial Figma designs shared with Growth Product Manager
  • Figma designs shared in Design Review
  • Iterate on design feedback
  • Designs shared publically in this task

Event Timeline

KStoller-WMF triaged this task as Medium priority.
KStoller-WMF updated the task description. (Show Details)
KStoller-WMF moved this task from Triaged to Up Next on the Growth-Team board.
KStoller-WMF raised the priority of this task from Medium to High.Feb 9 2024, 12:31 AM

Moving this to higher priority since I'm hoping to have some initial designs to share at next week's P+T meeting.

I'm most interested in: a desktop mockup of the Homepage that illustrates a campaigns related banner displaying and a content translation related module enabled.

KStoller-WMF lowered the priority of this task from High to Medium.Feb 19 2024, 5:28 PM
KStoller-WMF moved this task from Incoming to Doing on the Growth-Team (Sprint 7 (Growth Team)) board.
JFernandez-WMF added subscribers: Sgs, Urbanecm_WMF.

I've added the designs to the task description, therefore closing this task.

@Sgs @Urbanecm_WMF just want to make sure that on the Community Config part for the Community updates module, the 'Image' setting is possible (meaning the admin pasting a link from Commons and that image automatically fitting in the mobile and desktop frames). does this over-complicate engineering work? I am happy to re-open this task or open another one specifically for this if it needs further thinking.