Page MenuHomePhabricator

Convey beta mode through site branding
Closed, ResolvedPublic2 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

  • 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

Nirzar created this task.Dec 6 2016, 7:49 PM
Nirzar updated the task description. (Show Details)Dec 6 2016, 7:53 PM
ovasileva set the point value for this task to 2.Dec 7 2016, 5:11 PM
ovasileva moved this task from To Triage to Upcoming on the Readers-Web-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 Normal to High.Jan 5 2017, 4:36 PM
Jhernandez updated the task description. (Show Details)Jan 18 2017, 6:37 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?

Yes. Should be much easier that way.

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

Nirzar updated the task description. (Show Details)Jan 27 2017, 1:23 AM

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 Readers-Web-Backlog board.

I agree, what is blue star?

Why not something like:

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.
Nirzar added a comment.Feb 2 2017, 5:57 PM

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.

Nirzar updated the task description. (Show Details)Feb 2 2017, 7:33 PM
Nirzar updated the task description. (Show Details)
bmansurov claimed this task.Feb 2 2017, 8:33 PM
bmansurov moved this task from To Do to Doing on the Reading-Web-Sprint-91-๐Ÿ”๐Ÿ” board.

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.

  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.

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

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)

  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.

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

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

@Jdlrobson one more patch to review ^.

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

Signed off from design

Nirzar closed this task as Resolved.Feb 3 2017, 10:47 PM