Page MenuHomePhabricator

Convey beta mode through site branding
Closed, ResolvedPublic2 Estimated Story Points

Description

When user is on Wikipedia beta, convey that in the header using a [beta] tag by replacing the whole logo with W[Beta]

Mock

Header - Signed - Beta.png (1×750 px, 582 KB)

  • user has beta turned on sees the Beta logo next to the wordmark or the label
  • the search placeholder should just say "Search <wikiname>" and not "Search <wikiname> Beta"

Asset

Event Timeline

ovasileva set the point value for this task to 2.Dec 7 2016, 5:11 PM
ovasileva moved this task from Incoming to Upcoming on the Web-Team-Backlog board.

Change 330359 had a related patch set uploaded (by Jdlrobson):
Brand beta differently

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

ovasileva raised the priority of this task from Medium to High.Jan 5 2017, 4:36 PM
MBinder_WMF changed the point value for this task from 2 to 3.Jan 18 2017, 6:42 PM

@Nirzar this task will be significantly simpler if we use the same logo for stable and beta. Is that possible? Otherwise I want to bump this to a 5 or 8.

@Jdlrobson will it be easier to add something on top of the logo if it is beta?

something like this?

Header - Signed - Beta.png (1×750 px, 582 KB)

Yes. Should be much easier that way.

just hide/show badge with .beta will it reduce the work to 1point :P

updated the description. should we re-estimate it?

Jdlrobson removed the point value for this task.Jan 27 2017, 1:45 AM

Change 330359 abandoned by Jdlrobson:
WIP: Brand beta differently

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

@Nirzar - do you think the icon would be appropriate? I'm not sure how users would know that it means "beta"

MBinder_WMF set the point value for this task to 2.Feb 2 2017, 5:24 PM
MBinder_WMF moved this task from 2016-17 Q3 to Design on the Web-Team-Backlog board.
MBinder_WMF edited projects, added Web-Team-Backlog (Design); removed Web-Team-Backlog.

I agree, what is blue star?

Why not something like:

Header - Signed - Beta.png (1×750 px, 584 KB)

Summarising my talk with Nirzar:

  • Wikipedia app uses star so this would be consistent
  • Using an icon avoids i18n issues that text would have and makes implementation easier (trade off for getting new branding out the door quicker)
  • We can revisit the icon later - the main purpose right now is to differentiate it from stable.

lol so we wanted to brand our beta mode. and Jared and May had come up with this star as Beta. unfortunately it's not being used in many places and does have recognition issues. The reason for not using "beta" is only space constraints (thus removing entire wordmark and using only W) but then the effort is 4 points higher for that. plus i18n issues.

Our audience for beta is very small, I agree that this is not a good solution, but this is how we prioritize our work. impact should match effort. if you think we can do the first proposal of W [Beta] in an easy way which is not more than 1-2 points, we should do that. if you say it takes 5-8 points for just writing W [beta] in header then I can give that up looking at context of audience and use.

Change 335706 had a related patch set uploaded (by Bmansurov):
Convey beta mode through site branding

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

Hey @Nirzar, I wanted to get your opinion on the following cases.

  1. On iPhone 5 there is not enough space to display the beta logo as it has 1em margin on both sides, so that it does not touch left or right elements bordering it. Below is a screenshot. Let me know how I should hand this case.

Screen Shot 2017-02-03 at 10.02.39 AM.png (280×820 px, 32 KB)

  1. On bigger screen phones than iPhone 5, things seem to look OK. Jon mentioned the shift in the logo and I'm working on fixing that. Other than that things seem to look ok. Here is a screenshot. Let me know if it's not what you expected.

Screen Shot 2017-02-03 at 10.02.56 AM.png (292×940 px, 32 KB)

  1. On tablets we have a similar situation to the case 1. Here is a screenshot.

Screen Shot 2017-02-03 at 10.03.09 AM.png (266×1 px, 39 KB)

Hey @Nirzar, I wanted to get your opinion on the following cases.

  1. On iPhone 5 there is not enough space to display the beta logo as it has 1em margin on both sides, so that it does not touch left or right elements bordering it. Below is a screenshot. Let me know how I should hand this case.

@Nirzar Maybe we can apply a max-width to the logo at this banner? e.g. shrink it?
We can always merge the code as is without a fix to this and address it in a follow up. (yay dev branches)

Screen Shot 2017-02-03 at 10.02.39 AM.png (280×820 px, 32 KB)

  1. On bigger screen phones than iPhone 5, things seem to look OK. Jon mentioned the shift in the logo and I'm working on fixing that. Other than that things seem to look ok. Here is a screenshot. Let me know if it's not what you expected.

Screen Shot 2017-02-03 at 10.02.56 AM.png (292×940 px, 32 KB)

  1. On tablets we have a similar situation to the case 1. Here is a screenshot.

Screen Shot 2017-02-03 at 10.03.09 AM.png (266×1 px, 39 KB)

FYI, I had a chat with @Nirzar and we decided to use the text "β" rather than an SVG.

Change 335915 had a related patch set uploaded (by Bmansurov):
Fix test scenario names

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

Change 335706 merged by jenkins-bot:
Convey beta mode through site branding

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

Change 335915 merged by jenkins-bot:
Fix test scenario names

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