Page MenuHomePhabricator

Implement banner design for WMDE's Aug 2018 editor recruitment campaign
Closed, ResolvedPublic5 Estimate Story Points

Description

For the upcoming editor recruitment campaign we need to implement two banners, which will slightly differ in text. The campaign start date is planned for Aug 1st.

Acceptance criteria

  • The banner is implemented as per design (see images below).
  • Except for the small 320px-599px version, the banners use different background colors for the area left and right of the center image.
  • The campaign parameter passed to the target page matches the banner page title on the meta-wiki.
  • Clicking anywhere on the banner (not only on the button) leads users to the landing page.
  • A sample of 1% of the close button clicks is tracked using Extension:EventLogging. The schema's field bannerName contains the banner page title (as defined below).
Banner Page TitleBanner Headline (in capital letters)Banner TextButton TextTarget Link
WMDE_neweditors_summer2018_1Häufige Frage Nr. 2Wer darf bei Wikipedia mitschreiben?Blick hinter die Kulissen von Wikipediahttps://de.wikipedia.org/wiki/Wikipedia:Wikimedia_Deutschland/Neue_Ehrenamtliche/FAQ?campaign=WMDE_neweditors_summer2018_1#Wer-darf-schreiben
WMDE_neweditors_summer2018_2Häufige Frage Nr. 5Gibt es eigentlich ein Wikipedia-Büro?Blick hinter die Kulissen von Wikipediahttps://de.wikipedia.org/wiki/Wikipedia:Wikimedia_Deutschland/Neue_Ehrenamtliche/FAQ?campaign=WMDE_neweditors_summer2018_2#Wikipedia-Buero
WMDE_neweditors_summer2018_3Häufige Frage Nr. 11Wie schützt sich Wikipedia vor Missbrauch?Blick hinter die Kulissen von Wikipediahttps://de.wikipedia.org/wiki/Wikipedia:Wikimedia_Deutschland/Neue_Ehrenamtliche/FAQ?campaign=WMDE_neweditors_summer2018_3#Schutz-vor-Missbrauch

Notes

  • For this year's spring campaign, we introduced a repository for hosting the code.
  • In the previous campaign, the banner name was not passed to the web analytics software when tracking close button clicks, which should be fixed.

Image Resources

https://commons.wikimedia.org/wiki/File:320-WIKI-FAQ-Banner_Icon.png
https://commons.wikimedia.org/wiki/File:600-WIKI-FAQ-Banner_Icon.png
https://commons.wikimedia.org/wiki/File:1200-WIKI-FAQ-Banner_Icon.png

Styling

Colors

Left part background: #0d6798
Right part background: #105277
Button label text: #105277
Text Headline: #0d4260
Text Question: #ffffff

Button Border Radius

45px

Button Drop Shadow

2px 2px 10px rgba( 0, 0, 0, 0.25 )

Banner Border

#E6E6E6 solid 1px

Design

SizeDesign
320px
600px
1200px

Related Objects

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 13 2018, 2:31 PM
kai.nissen renamed this task from Implement banner design to Implement banner design for WMDE's Aug 2018 editor recruitment campaign.Jul 13 2018, 2:32 PM
kai.nissen triaged this task as Medium priority.
kai.nissen updated the task description. (Show Details)
kai.nissen updated the task description. (Show Details)Jul 13 2018, 2:38 PM
kai.nissen updated the task description. (Show Details)Jul 16 2018, 9:40 AM
kai.nissen set the point value for this task to 5.
kai.nissen updated the task description. (Show Details)Jul 16 2018, 5:02 PM

After we got feedback from the pretests, our design agency had to update the banner design, because the old one was received rather badly.

These are our new design options now:

Option A) with curtains
Option B) with question mark

We are yet undecided which one to take.

From your technical point of view, is there one design that would be better / worse to work with?

Follow up from the last call: Option B is preferred.

kai.nissen updated the task description. (Show Details)Jul 18 2018, 2:18 PM
kai.nissen updated the task description. (Show Details)

@GoranSMilovanovic We will use Schema:WMDEBannerEvents for tracking banner close button clicks and (as stated in the description) track a sample of 1%. Poke me, if you have questions regarding the schema.

@sonkiki As already discussed earlier today, getting some specifications from the agency would help during implementation:

  • color codes of the left and right background
  • color codes for the text elements (button label, headline, question)
  • drop shadow of the button
  • border radius of the button

We also need an image file for each version of the banner. The image files should be cropped and should also contain the white background.

I attached the final designs in the zip file above.
This zip file includes a file with the information requested above ("color codes etc.rtf"), but I will copy & paste it here, too.

I hope you have all you need to start working. Thanks a lot, @kai.nissen!


Color Codes etc.

color codes of the left and right background
#0D6798 (left) #105277 (right)

color codes for the text elements (button label, headline, question)
button label: #105277
headline: #0D4260
question: #ffffff

drop shadow of the button
transparency: 25 %
x-offset: 2 px
y-offset: 2 px
Soften: 10 px
color: #000000

border radius of the button
45 px

The whole banner should have a border which should be in the banner file already. Please check:
border color: #E6E6E6
border size: 1 px

The zip file only contains the design for wide screens. In the previous campaigns, we had three versions (320px, 600px, 1200px). The images that are displayed in the center should be cropped to their actual size (there shouldn't be any margin) and should also have a white background.

@sonkiki Can you ask the designer for this?

@kai.nissen @sonkiki
I just wrote the designers a mail with your request. Just to have it all done quickly. I'll get back, as soon as I have more information.

@kai.nissen

In this file everything should be allright now. The designers said, that the icons were allright anyway. Could you specify you wishes if it's not covered in this file?

Thank you, @Stefan_Schneider_WMDE!
Right, the background color is correct. The image that is meant to be in the wide banners has an unnecessary margin, though:

kai.nissen updated the task description. (Show Details)Jul 23 2018, 2:17 PM
sonkiki added a comment.EditedJul 23 2018, 4:00 PM

Hi @Stefan_Schneider_WMDE thx a lot for getting this done.
@kai.nissen, thx for pointing out the inconveniences/ flaws of the design. Is this something we need to get fixed by the agency, or can you work with it?

kai.nissen updated the task description. (Show Details)Jul 23 2018, 4:15 PM

Okay, I cropped the image myself. Should be fine.

Tim_WMDE moved this task from Todo to Doing on the WMDE-FUN-Sprint-2018-07-23 board.
kai.nissen added a comment.EditedJul 28 2018, 9:14 AM

@Tim_WMDE I already created the campaign as defined in T199691. Please add the banners to that campaign.

Tim_WMDE added a comment.EditedJul 30 2018, 12:01 AM

https://github.com/wmde/author-campaign-banner/pull/2

Banners still have to be added to CentralNotice after local testing.

Tim_WMDE removed Tim_WMDE as the assignee of this task.Jul 30 2018, 12:01 AM
Tim_WMDE claimed this task.
Tim_WMDE moved this task from Doing to Review on the WMDE-FUN-Sprint-2018-07-23 board.
Tim_WMDE added a subscriber: Tim_WMDE.

Hi guys,

Is there already something done, that I could test today? That would be awesome, because tomorrow would be the only day to correct things and I want to be sure, that everything is in place.

Hey @Stefan_Schneider_WMDE, after reviewing the banner again, I will still make some changes to it. Especially the distances between texts and font scaling does not look completely right to me. However, feel free to provide additional feedback:

https://de.wikipedia.org/wiki/Wikipedia:Hauptseite?banner=B18WMDE_authors_02_180801_1&force=1
https://de.wikipedia.org/wiki/Wikipedia:Hauptseite?banner=B18WMDE_authors_02_180801_2&force=1
https://de.wikipedia.org/wiki/Wikipedia:Hauptseite?banner=B18WMDE_authors_02_180801_3&force=1

@Stefan_Schneider_WMDE We're done with our internal review now and the latest version of the banners has just been pushed to CentralNotice, let me know if you find any issues or if they're good to go.

Hi @Tim_WMDE, thx for the implementation! Looks good :)
If I may add a minor thing about the graphics in the middle, they look a tiny bit pixelated. The outline of the circle, the logo-ball and the question mark is quite not as crisp as the graphics in the 1200px banner that the agency sent over.

Or is this something you're still working on? If so, then forget what I said, and thanks!
Looking forward to meeting you tomorrow! :)

Hey @sonkiki, I also saw that the image was a bit blurry for mid-sized devices but the problem seemed to be the mid-sized image which I was supplied with. I have now changed it so that the high-res desktop image is also used for tablets and up, it looks much better to me now but please let me know if you think it should be improved further.

Hey, thanks - would you be up for a quick IRL meeting today around 15:45, if I just quickly came up to you to the 3rd floor, to say hi? Maybe quicker to do it in person :)

@sonkiki sure thing, I was also thinking a quick meetup would speed things up. I am also free now but if you prefer 15:45 then that would be fine with me too, see you in a bit!

Hey, I was working from home and now have a meeting right away, so will be with you at 15:45 - thx for being so spontaneous. Laters!

Hey @sonkiki, I have uploaded the high-res version of the image and it's now used by the banner:

https://commons.wikimedia.org/wiki/File:1200-WIKI-FAQ-Banner_Icon_1@4x.png

I have tested this on a Macbook with Retina display connected to a "normal display" and it seems to be an issue with how Mac OS scales images on these high-res screens since it also looks alright on a Mac connected to a "regular resolution" screen. Either way, let me know if it's alright now. I want to note though that the high-resolution version is 65 KB in size compared to the previous 19 KB, I am not sure if this increase in size is too much considering that most users will never be able to tell the difference (but then again, it's 2018 and not 1998).

Hey!

Wow, it looks crispy as a bag of chips now on my Mac.

Regarding the 65 KB in size: thanks for pointing that out! I would argue in favor of the high-res design anyways, here's why:

  • this is still a v low size compared to other websites
  • since we only play it out on desktop, people are more likely to have a solid connection (with it being 2018 and all).

See ya soon!

Hey @sonkiki,

thanks again for the release party, I did not see that coming! I have quickly implemented the changes we have discussed to the banners:

  1. They do not show up on the target URL anymore, (Wikipedia:Wikimedia_Deutschland/Neue_Ehrenamtliche/FAQ)
  2. The banners are now position at the top of the page rather than the top of the browser window.

Let me know if you see anything else that is not behaving as expected or if anything is wrong with my latest fixes.

Tim_WMDE removed Tim_WMDE as the assignee of this task.Aug 1 2018, 1:06 PM
Tim_WMDE moved this task from Doing to Done on the WMDE-FUN-Sprint-2018-07-23 board.

Looks good, thank you very much for getting this fixed so quickly. Until next time! 🎉

@Stefan_Schneider_WMDE I have updated the banners so that they are now also not shown on Wikipedia:Wikimedia_Deutschland/LerneWikipedia (second page of the user story). For future banners we should put the collection of all "excluded URLs" in the list of requirements of the banner, I will also try to keep this in mind on my end! Let me know if the update I just pushed introduced any problems, but I have tested it and it should be good.

Thx! I’ll keep that in mind.

Tim_WMDE <no-reply@phabricator.wikimedia.org> schrieb am Fr. 3. Aug. 2018
um 16:35:

Tim_WMDE added a comment.
@Stefan_Schneider_WMDE
https://phabricator.wikimedia.org/p/Stefan_Schneider_WMDE/ I have
updated the banners so that they are now also not shown on
Wikipedia:Wikimedia_Deutschland/LerneWikipedia (second page of the user
story). For future banners we should put the collection of all "excluded
URLs" in the list of requirements of the banner, I will also try to keep
this in mind on my end! Let me know if the update I just pushed introduced
any problems, but I have tested it and it should be good.
*TASK DETAIL*
https://phabricator.wikimedia.org/T199542
*EMAIL PREFERENCES*
https://phabricator.wikimedia.org/settings/panel/emailpreferences/
*To: *Tim_WMDE
*Cc: *Tim_WMDE, sonkiki, Stefan_Schneider_WMDE, GoranSMilovanovic,
kai.nissen, Aklapper, Verena, Cirdan, JeroenDeDauw

@Stefan_Schneider_WMDE

Hey, just an update on the multi-page user story tracking issue you brought up on Friday. We talked to Adam and the best solution is likely the simplest from a technical point of view since MediaWiki is rather limited in this regard:

Each different banner version should have its own landing page with the exact same content. In the current campaign, the first user story page would need to be created three times, one time for each banner. All pages should be exactly the same with the only difference being that the button to the second user story page would have a different URL with the respective banner ID hard-coded into it as a GET parameter. That way, you can directly associated a specific banner with users reaching the last user story page.

The solution is a bit dirty since it produces redundancy in the pages as any changes made to the text would need to be re-applied to all three pages which can be somewhat error-prone. Since the campaign is almost over I probably would not apply this now anymore but this could be prepared for the next campaign.

@Tim_WMDE Big Thanks to you for following up that issue. Indeed, it is too much effort and quite error-prone. Also, because we have discussions on that first landing page and potential changes from the community, that we could not perfectly match to the other pages. Now we know a solution and we will use the data we have so far. Thanks again!

kai.nissen closed this task as Resolved.Aug 15 2018, 11:16 AM