== 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
[[ http://reading.wmflabs.org | We built the prototypes ]] and user tested both the version. both versions did not have usability issues around searching and menu functionality.[link to usability report]
== Proposed solution
{F4945890}
Using a grid to fit site level + article level iconography and other visual elements
{F4945941}
Anonmyous user view
{F4945902}
Signed in with notification
{F4945909}
**Tablet layout**
We should keep search open on tablet layouts. we have more space on tablets to have branding + search + nav menus.
{F4964963}
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
* zeplin coming soon *
== 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 a feature branch. We will merge to master when Nirzar has signed off all design changes
== Accenptance 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
[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