Page MenuHomePhabricator
Create Task
Maniphest T274820

Newcomer tasks: unactivated state of the mobile preview of the impact module should drive newcomer edits
Closed, ResolvedPublic
Actions

Assigned To
• mewoph
Authored By
RHo
Feb 15 2021, 9:07 PM
Tags
Referenced Files
F34150479: Screen Shot 2021-03-10 at 4.38.36 PM.png
Mar 11 2021, 12:55 AM
F34150484: Screen Shot 2021-03-10 at 4.39.03 PM.png
Mar 11 2021, 12:55 AM
F34150481: Screen Shot 2021-03-10 at 4.38.51 PM.png
Mar 11 2021, 12:55 AM
F34150488: Screen Shot 2021-03-10 at 4.46.09 PM.png
Mar 11 2021, 12:55 AM
F34150492: Screen Shot 2021-03-10 at 4.48.32 PM.png
Mar 11 2021, 12:55 AM
F34148521: impact_module_unactivated_mobilesummary.png
Mar 9 2021, 10:50 PM
F34146390: image.png
Mar 8 2021, 10:22 PM
F34146393: image.png
Mar 8 2021, 10:22 PM
View All 15 Files
Subscribers
Aklapper
Etonkovidova
kostajh
• mewoph
RHo

Description

This task is to update the content and visual design of the mobile preview of the impact module to encourage newcomers to start editing, . The mobile preview design was omitted from the parent task T223221 due to an oversight.

Current
image.png (358×820 px, 31 KB)
Proposed
image.png (554×816 px, 61 KB)

Redlined mocks on Figma https://www.figma.com/file/Pgo6fPGaDDiqXWGfMI8oiF/Growth-features?node-id=0%3A1

Design details:

  • The same heart graphic used in the intro overlay for newcomer tasks is used here.
  • The graphic and module header text is the same size and styling as the Suggested edits mobile preview.
  • Larger header text: "0 edits so far"
  • Smaller text: "Help extend free knowledge to the world by editing topics that matter most to you."
  • Footer text: "Once you start editing, you’ll see here how many people are viewing the articles you’ve edited."

Details

SubjectRepoBranchLines +/-
Add drop shadow on heart image for mobile summary view of Impact modulemediawiki/extensions/GrowthExperimentsmaster+8 -1
Update unactivated state of impact module's mobile summary viewmediawiki/extensions/GrowthExperimentsmaster+52 -0
Customize query in gerrit

Related Objects
Search...

Event Timeline

RHo created this task.Feb 15 2021, 9:07 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 15 2021, 9:07 PM
RHo moved this task from Incoming to Ready for Development on the Growth-Team (Sprint 0 (Growth Team)) board.Feb 15 2021, 9:07 PM
• nray moved this task from Needs triage to Growth on the Mobile board.Feb 16 2021, 7:41 PM
kostajh added subscribers: • mewoph, kostajh.Feb 18 2021, 12:24 PM

@mewoph, do you want to pick this one up as a follow-up to T223221: Newcomer tasks: unactivated state of impact module should drive newcomer tasks?

• mewoph claimed this task.Feb 18 2021, 4:55 PM

Sounds good

• mewoph moved this task from Ready for Development to In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.Feb 24 2021, 12:24 AM
gerritbot added a comment.Feb 24 2021, 5:10 PM

Change 666708 had a related patch set uploaded (by MewOphaswongse; owner: MewOphaswongse):
[mediawiki/extensions/GrowthExperiments@master] Update unactivated state of impact module's mobile summary view

https://gerrit.wikimedia.org/r/666708

gerritbot added a project: Patch-For-Review.Feb 24 2021, 5:10 PM
• mewoph moved this task from In Progress to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.Feb 24 2021, 5:14 PM

Updated UI:

unactivated_impact_mobile_summary.png (1×538 px, 147 KB)

RHo updated the task description. (Show Details)Feb 24 2021, 10:10 PM
• mewoph mentioned this in T223221: Newcomer tasks: unactivated state of impact module should drive newcomer tasks.Feb 24 2021, 10:40 PM
• mewoph added a comment.Feb 24 2021, 11:24 PM

Updated background colors per https://www.figma.com/file/Pgo6fPGaDDiqXWGfMI8oiF/Growth---features?node-id=1%3A1881

unactivated_impact_mobile_summary_updated.png (1×530 px, 118 KB)

gerritbot added a comment.Mar 2 2021, 1:14 PM

Change 666708 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Update unactivated state of impact module's mobile summary view

https://gerrit.wikimedia.org/r/666708

kostajh moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Mar 2 2021, 1:47 PM
Maintenance_bot removed a project: Patch-For-Review.Mar 2 2021, 2:10 PM
Etonkovidova moved this task from QA to Design Review on the Growth-Team (Sprint 0 (Growth Team)) board.Mar 6 2021, 2:22 AM
Etonkovidova subscribed.

For Design review - the specs seem to be in place. However, please review the following

(1) the text is different between figma mockup and what is in the task description.

The text from the task description (that was implemented):

Help extend free knowledge to the world by editing topics that matter most to you.

vs the text in the mockup:

Participate in giving everyone access to the world's knowledge by editing topics that matter most to you.

(2) In the mockup the header "Your impact" has a bigger font size (16px) than the text "Participate in giving..." - 13px. The current header/text font sizes on mobile are of the same size; it's true for other modules not only for the Impact.

mockupimplemented
Screen Shot 2021-03-05 at 6.02.21 PM.png (331×466 px, 40 KB)
Screen Shot 2021-03-05 at 6.19.48 PM.png (362×403 px, 37 KB)

(3) The heart icon has much more contrast in the mockup - see the screenshots above.

RHo moved this task from Design Review to In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.Mar 8 2021, 10:22 PM

Thanks @Etonkovidova - items (1) and (2) are the Figma being incorrect which I've now fixed, but (3) the heart illustration is because we used the original svg and shrunk it down to smaller size, so some line definitions are less distinct. Wondering if @mewoph it could be a simple minor improvement to add the following drop shadow filter to the image class .growthexperiments-homepage-module-impact-unactivated-mobile-summary-image?:

-webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .2)); 
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .25));
Without drop-shadow filter:
image.png (482×698 px, 52 KB)
With drop-shadow filter:
image.png (476×690 px, 56 KB)
In T274820#6888436, @Etonkovidova wrote:

For Design review - the specs seem to be in place. However, please review the following

(1) the text is different between figma mockup and what is in the task description.

The text from the task description (that was implemented):

Help extend free knowledge to the world by editing topics that matter most to you.

vs the text in the mockup:

Participate in giving everyone access to the world's knowledge by editing topics that matter most to you.

(2) In the mockup the header "Your impact" has a bigger font size (16px) than the text "Participate in giving..." - 13px. The current header/text font sizes on mobile are of the same size; it's true for other modules not only for the Impact.

mockupimplemented
Screen Shot 2021-03-05 at 6.02.21 PM.png (331×466 px, 40 KB)
Screen Shot 2021-03-05 at 6.19.48 PM.png (362×403 px, 37 KB)

(3) The heart icon has much more contrast in the mockup - see the screenshots above.

gerritbot added a comment.Mar 9 2021, 10:49 PM

Change 670314 had a related patch set uploaded (by MewOphaswongse; owner: MewOphaswongse):
[mediawiki/extensions/GrowthExperiments@master] Add drop shadow on heart image for mobile summary view of Impact module

https://gerrit.wikimedia.org/r/670314

gerritbot added a project: Patch-For-Review.Mar 9 2021, 10:49 PM
• mewoph added a comment.EditedMar 9 2021, 10:50 PM

Added drop shadow

impact_module_unactivated_mobilesummary.png (422×964 px, 77 KB)

• mewoph moved this task from In Progress to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.Mar 9 2021, 10:51 PM
kostajh moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Mar 10 2021, 10:06 PM
gerritbot added a comment.Mar 10 2021, 10:46 PM

Change 670314 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Add drop shadow on heart image for mobile summary view of Impact module

https://gerrit.wikimedia.org/r/670314

ReleaseTaggerBot added a project: MW-1.36-notes (1.36.0-wmf.35; 2021-03-16).Mar 10 2021, 11:00 PM
Maintenance_bot removed a project: Patch-For-Review.Mar 10 2021, 11:11 PM
Etonkovidova moved this task from QA to Design Review on the Growth-Team (Sprint 0 (Growth Team)) board.Mar 11 2021, 12:55 AM

For @RHo quick review:
filter: drop-shadow(0 0 2px rgba(0,0,0,0.25)); is added.

betalabs (with drop-shadow)testwiki wmf.34
Screen Shot 2021-03-10 at 4.38.36 PM.png (368×409 px, 44 KB)
Screen Shot 2021-03-10 at 4.46.09 PM.png (359×412 px, 42 KB)
Screen Shot 2021-03-10 at 4.38.51 PM.png (431×422 px, 66 KB)
Screen Shot 2021-03-10 at 4.48.32 PM.png (444×427 px, 62 KB)

Note: there is no drop-shadow on Special:Homepage#/homepage/impact (when you click on the Impact module on mobile) - I guess the change is not needed there?

Screen Shot 2021-03-10 at 4.39.03 PM.png (388×414 px, 65 KB)
RHo moved this task from Design Review to Needs PM Review on the Growth-Team (Sprint 0 (Growth Team)) board.Mar 12 2021, 10:14 AM

Brilliant, thanks @Etonkovidova and @mewoph, 👍🏻 LGTM

In T274820#6903141, @Etonkovidova wrote:

For @RHo quick review:
filter: drop-shadow(0 0 2px rgba(0,0,0,0.25)); is added.

betalabs (with drop-shadow)testwiki wmf.34
Screen Shot 2021-03-10 at 4.38.36 PM.png (368×409 px, 44 KB)
Screen Shot 2021-03-10 at 4.46.09 PM.png (359×412 px, 42 KB)
Screen Shot 2021-03-10 at 4.38.51 PM.png (431×422 px, 66 KB)
Screen Shot 2021-03-10 at 4.48.32 PM.png (444×427 px, 62 KB)

Note: there is no drop-shadow on Special:Homepage#/homepage/impact (when you click on the Impact module on mobile) - I guess the change is not needed there?

Screen Shot 2021-03-10 at 4.39.03 PM.png (388×414 px, 65 KB)
• Rileych closed this task as Resolved.Mar 19 2021, 8:34 PM
• mewoph mentioned this in T302546: Suggested edits: grammatically incorrect string shown in the suggested edits module when the user has made a single edit/day.Mar 10 2022, 4:26 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL