Restyle "eyebrow" of docs.gitlab.com

Problem to solve

  • The eyebrow of our documentation site blends in with the rest of the page, making it difficult to easily scan.
  • Visual differentiation from the GitLab product makes it feel disconnected from the primary user experience and our brand.

Intended users

Users of the documentation site

Further details

Docs site Screen_Shot_2019-08-23_at_8.53.49_AM

Product site Screen_Shot_2019-08-23_at_8.54.09_AM

Proposal

  • Consider a high-contrast background for the eyebrow, similar to gitlab.com.
    • The eyebrow area has a white background, as does the main content area.
    • The left menu and right sidebar also have an extremely low-contrast gray background.
  • Change placeholder text of "Search" (search what? all of GitLab, since we have search there, too?) to "Search our docs" for clarity.
  • The "Choose version" selector in the eyebrow doesn't conform to Pajamas standards. The red border indicates an error, the border radius is overly rounded, and the left margin needs some space.

Permissions and Security

None

Documentation

None

Testing

These are aesthetic changes that should not require additional testing

What does success look like, and how can we measure that?

  • Docs site is better aligned visually with the GitLab brand and product
  • The scope of what's being searched is clear
Edited by Christie Lenneville