This project is about improving brand identity of our Wikimedia sites when viewed on mobile devices via the web. Currently, the MediaWiki MobileFontend UI does not contain obvious clues for identifying the name of the project being accessed. For instance, if you are viewing the mobile-formatted German Wikipedia article on Demut, the only indication you are on Wikipedia is the light gray placeholder text in the search box and a single reference in the page footer. This project intends to inform the readers that content is coming from Wikipedia.
Generative Research
Research from the New Reader program 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
- As a reader, I would like to know If I have come to Wikipedia; in a prominent way
- As an open project 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.
Distinguishing projects
On mobile website for projects, it's very difficult to distinguish projects just by looking at an article. Having the name of the project on top would help users distinguish between which projects they are on.
Design
These are some upcoming changes to the header UI on MobileFrontend
The header will show the name of the project and a logo if provided by the Wiki.
Tablets
Tablets will feature open search bar as we have more space on tablets.
Other projects and languages
There will be graceful handling of other projects. To start with we will have some premade logos for selected projects, but this is an optional parameter for wikis. If logo is not provided the name will be written in a regular type in the header.
Usability study
We build prototypes and conducted user research sessions to find out if this change is harming search and menu items. we also asked questions around solving our Goal #1.
Changelog
- Search field translated to search icon on small devices
- On focus of search field, the close button moved to right so user does not need to move finger
- Added project wordmark in the header