Page MenuHomePhabricator

[EPIC] Improve site branding on Mobile website
Closed, ResolvedPublic

Description

Generative Research

New Reader's research tells us there is a lack of brand awareness in certain parts of wikipedia's audience.

Many casual Wikipedia readers had no knowledge that they had ever used the platform. As Wikipedia articles often feature in first-page search results, many people have used it without realizing it. [1]

FINDING 21: As a brand, Wikipedia is not widely recognized or understood. People are Wikipedia readers without realizing it. [2]

User story

  1. As a reader, I would like to know If i have come to Wikipedia; in a prominent way
  2. As an organization and content distributor, Wikipedia would like to make sure our readers are aware where the content is coming from

Goal

Brand awareness
We want to raise awareness among our readership about the fact that the content is coming from wikipedia and projects. This will in turn increase brand recall and in turn increasing retention and readership in long term.

Proposed solution

Add Wikipedia wordmark to mobile web header

Prototyping + Evaluative Research

Wikipedia's mobile frontend header is consumed with search box. though the search works better it leaves no room for adding wikipedia's wordmark. Design worked on two possible ways of adding the wordmark to the header.

  1. Keeping the search box open and increasing the height of the header
  2. adding wordmark and moving searchbox into a search icon

We built the prototypes and user tested both the version. both versions did not have usability issues around searching and menu functionality. [3]

Proposed solution

Using a grid to fit site level + article level iconography and other visual elements

Anonmyous user view

Signed in with notification

Tablet layout
We should keep search open on tablet layouts. we have more space on tablets to have branding + search + nav menus.


the search bar and search icon should both can be present in the html, you can hide one or the other based on the width.

All other use cases are presented here >
https://wikimedia.invisionapp.com/share/6Z9KIX3AD#/209393222_Header_-_Anon
press next to view all cases

Specifications

https://zpl.io/2ckgFh
or see all mocks tagged by this phab card
https://app.zeplin.io/project.html#pid=57a120dbaa97eeab3c8805ae&dashboard&tags=branding

everything is sliced and ready to be exported.

Changelog

  • Update icons to match wikimedia ui icons
  • align the search and bell icon to article action icons like watchlist and edit
  • keep the search bar in html as it is useful for tablets
  • Add fallback for other wikis using text
  • Search focus close is moved to right side
  • content casts a subtle shadow on the chrome
  • no change to footer
  • The new changes should be built in the feature branch called branding. We will merge to master when Nirzar has signed off all design changes

Acceptance Criteria

  1. Logged out users
    1. wikipedia logo appears, search icon appears
    2. selecting search navigates to search page
  2. Logged-in users with no notifications
    1. Wikipedia logo appears, search icon appears, notification icon appears
  3. Logged-in users with notifications
    1. Wikipedia logo appears, search icon appears, notification icon appears with number of notifications
  4. Logged-in users with beta
    1. shortened logo appears, beta icon appears, search icon appears, notification icon appears
  5. Tablet
    1. all of the above use cases, except with the full search bar open
  6. When merging the feature branch it should be confirmed that cached HTML with the old UI render as before.

[1] https://upload.wikimedia.org/wikipedia/commons/6/6a/Wikimedia_Foundation_and_Reboot_New_Readers_Research_-_Nigeria_&_India_Highlights_-_July_2016.pdf

[2] https://meta.wikimedia.org/wiki/Global_Reach/Brazil_survey#Awareness_of_Wikipedia

[3] https://www.mediawiki.org/wiki/Wikimedia_Research/Design_Research/Reading_Team_UX_Research/Top_Chrome_Usability

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
ovasileva changed the task status from Stalled to Open.Dec 2 2016, 12:08 PM
ovasileva raised the priority of this task from Normal to High.
Nirzar updated the task description. (Show Details)Dec 2 2016, 10:33 PM

Currently the logo we use in the footer is the same as that in the address bar. Do we want to keep that? If we want to keep it, would the logo change in beta?
What if there is no logo? E.g. MediaWiki.org

Should we ever fall back to the apple touch icon if nothing else is available (all sites seem to have one of those)?

@Jdlrobson all those cases are covered here > https://wikimedia.invisionapp.com/share/6Z9KIX3AD#/209393222_Header_-_Anon

Beta > https://wikimedia.invisionapp.com/share/6Z9KIX3AD#/screens/209393219
Generic header without wordmark > https://wikimedia.invisionapp.com/share/6Z9KIX3AD#/screens/209393218

The new wordmark will be provided. not to use the footer one. or maybe we can update the footer wordmakr with this

I'm not seeing any mocks for how the footer should look, so we can assume it's not impacted in any way? If so can you mention that in the task description?

To be clearer about the no image example - in current form only English Wikipedia would get branding. All others would have text. I guess my question is that something we want to minimise given we have static images such as https://mediawiki.org/static/images/project-logos/notifications/30px-Notification-icon-MediaWiki-logo.svg.png available.

I suppose the nearby page change is outside the scope of the task? Also, maybe a research was done this area too, but it feels wrong to not have the notification icon on all pages. Note that it's replaced by the refresh icon on Special:Nearby.

Nirzar renamed this task from Create new header for mobile web to Improve site branding on Mobile website.Dec 3 2016, 7:45 PM
Nirzar added a comment.Dec 3 2016, 7:47 PM

I suppose the nearby page change is outside the scope of the task

not really, this is the way current nearby works. it replaces the bell icon with reload location icon. and you are absolutely right, this is bad! but I would like to fix that as a follow up. that space on the header is not for contextual tools. it's for site level actions. like search, notifications, menu and not page level actions like watchlist, reload, change language, edit.

Nirzar updated the task description. (Show Details)Dec 3 2016, 7:50 PM
Nirzar added a comment.Dec 3 2016, 7:53 PM

I'm not seeing any mocks for how the footer should look, so we can assume it's not impacted in any way? If so can you mention that in the task description?

not for now. no change to footer. i will add that to description. thanks

To be clearer about the no image example - in current form only English Wikipedia would get branding. All others would have text. I guess my question is that something we want to minimise given we have static images such as https://mediawiki.org/static/images/project-logos/notifications/30px-Notification-icon-MediaWiki-logo.svg.png available.

yeah that does make sense but in reality, those logos are random and the logos itself suffer from recall problems. we need to establish labels about what to call something to a wider audience. i would like to keep thinking about this. but for now, we should do text labels.

in parallel design is working on wordmarks for all wikis in SVG format. it's a long task and taking time. but we can probably come up with a resource like wikipedia-wordmark-[lang-code].svg and if the svg doesn't exist, it should use text label. and keep populating these SVGs

Nirzar updated the task description. (Show Details)Dec 3 2016, 7:54 PM
Jdlrobson updated the task description. (Show Details)Dec 5 2016, 5:31 PM

Team estimated this as an 8. I was the lone 5.

I feel the change is predominately cosmetic but there were concerns about cached HTML, controlling the tablet mode experience, browser tests and suggestions this would be a good opportunity to add a grid system.

ovasileva updated the task description. (Show Details)Dec 5 2016, 7:25 PM
bmansurov updated the task description. (Show Details)Dec 5 2016, 9:57 PM

@Nirzar what do you mean by the following?

Search focus close is moved to right side

@ovasileva I've created subtasks and left this one as is (didn't change to an Epic because this task will deal with branding part of the work).

Nirzar added a comment.EditedDec 5 2016, 10:02 PM

@bmansurov

Search focus close is moved to right side

means when you are focused in on the search, we had a cross icon on left side. in the place of hamburger menu, it will moved to right side. > https://wikimedia.invisionapp.com/share/6Z9KIX3AD#/209554112_Header_-_Focus < like this

Nirzar updated the task description. (Show Details)Dec 6 2016, 12:29 AM
Nirzar updated the task description. (Show Details)Dec 6 2016, 9:17 PM
Nirzar updated the task description. (Show Details)Dec 6 2016, 9:21 PM

I might be pointing out the obvious, but a solution is preferable which can be applied for all Wikimedia projects and which follows MediaWiki core configuration.

For instance, of the options presented in F4964963, it's clearly easier to use the one-letter icon, because all (recent) Wikimedia logos have been chosen having in mind the usage as favicon, for instance https://commons.wikimedia.org/wiki/File:Wiktionary_small.svg and https://meta.wikimedia.org/wiki/File:Wikibooks-logo.svg .

Jdlrobson updated the task description. (Show Details)Jan 18 2017, 6:55 PM
Qgil added a subscriber: Qgil.Jan 24 2017, 6:18 PM

Old discussion, slightly related, applying to desktop and mobile, includes related link to more old discussions, which might be interesting to read when working on this feature: T53912: Make Wikipedia distinct by styling of a prominent UI feature differently than the default

@Qgil that's very useful and if i'm not wrong, this effort kinda speaks to the concerns mentioned in that description. we can even add that as a subtask?

ref

Traditionally the visual identity of individual projects has been asserted via the logo, but the logo is not prominently visible on the mobile site (and space constraints preclude it from being so) and it is not always visible on the desktop site (if you scroll past the top of the page, for example).

@Qgil that's very useful and if i'm not wrong, this effort kinda speaks to the concerns mentioned in that description. we can even add that as a subtask?

Yes, but this task would need a descriptive title.

Qgil removed a subscriber: Qgil.Jan 27 2017, 9:36 PM
Jdlrobson renamed this task from Improve site branding on Mobile website to [EPIC] Improve site branding on Mobile website.Feb 15 2017, 6:28 PM
Jdlrobson added a project: Epic.
Jdlrobson closed this task as Resolved.Apr 20 2017, 11:11 PM
Jdlrobson claimed this task.

cc @Nirzar and @ovasileva
All the work relating to branding is done.
Hurray!