PIP-249: Pulsar website redesign

Apache Pulsar is a unique, modern, cutting edge messaging platform in its category (Messaging/Streaming systems). Yet, its website doesn't reflect that, and relays a completely different message. People can be mistaken thinking Pulsar is old, unmaintained technology.

Pulsar, although donated to ASF in June 2017 (and actually created in 2012), is still considered to be in the Early Adopter stage (See Adoption Curve stages). I believe everybody in the community working on Pulsar or working with it, would like to see it move to the next stage. In my opinion, this can't happen without the website reflecting a modern look and feel.

Goal

Make pulsar website have a modern look and feel (i.e. theme), that would:

  1. Reflect how modern and cutting edge Pulsar is.
  2. “Invite” people to look and stay longer on the site, to learn more.
  3. “Feel good” when browsing the documentation to learn more or solve a problem.

Design Details

Designer

The brilliant designer making this design is @emidio-cardeira

Scope

In general there are many elements on the website that needs changing, yet making a very big change is hard for everyone involved, hence this PIP has a very constrained scope:

  • Visual branding
  • Accessibility
  • Typography
  • Homepage structure

Screenshots

The following are screenshots of the design, featuring the landing page. The work done towards this proposal is the design work (using Figma). If approved, it will be converted to an actual site changes (using proper PRs).

Entire top-to-bottom screenshot (updated March 9th: improved footer based on comments) image

You can look at the entire home page via this public link.

Changes

Visual branding

Language

Current

  • The visuals seem a bit outdated and old, contradicting the actual technology.
  • We want to attract more people to pulsar.
  • Visuals look a bit cold.

Proposal

  • Increase the color spectrum to look more modern and contemporary.
  • Add more visual richness and allow visual expansion of the branding elements.
  • Make Pulsar and its website more approachable and friendly.

Pulsar compared to other players

Current

  • There’s no a clear distinction between Pulsar and other similar technology which blocks Pulsar to stand on its own
  • Makes the branding less identity and distinct

Apache Kafka image

Apache Pulsar image

Proposal Create a new and unique language with meaning that also improves Pulsar branding and identity

image

Accessibility

Buttons

Current Good accessibility practices advise distinguishing UI elements not only with colors (specially if the tone is too close) but also the way they are represented

image

Proposal Make a clear achromatic distinction between main and secondary action

image

Background

Current

  • Background color creates some legibility, accessibility and contrast issues with other colors (see green vs background blue in the image)
  • Background has too much presence for something that should be more neutral

image

Proposal Make the background a more neutral color to avoid contrast issues on all website and increase functionality.

image

Dark theme

Current Graphics, text colors, actions are not optimized for a dark theme creating legibility and accessibility issues

Examples:

  • Text is not readable on dark background
  • Logo doesn’t have enough contrast on dark background
  • Contrast issues with Information banner green background color

image

image

Proposal

  • Make a v1 iteration only in Light theme
  • (In the future) Have a v2 with components optimized for the dark theme

Typography

Current: Arial

  • Very limited weights (only bold, regular and Italic)
  • Making the website more bland
  • Website looses versatility in information hierarchy
  • Arial is more suited for body text and doesn’t work very well in larger titles.

image

Proposal: Work Sans

image

Homepage structure

News banner

Current

  • The news banner gets lost in the homepage and visitors need to scroll to see it.
  • Returning users, who just want to go to Docs and don’t scroll, miss the important news about Pulsar.

First section image

As you scroll, you lose the news banner image

Proposal Move the banner to the top of the page, to a more prominent position where users can see it without scrolling.

Home page image

Then after you scroll, the news banner is still there image

Testimonials

Current We show a single testimonial, and users need to refresh the page to see a new one, which is not very user-friendly, and it’s an obstacle for visitors to discover other opinions about Pulsar.

image

Proposal Create a new section highlighting different testimonials about pulsar

image

Menu

Current

  • Navigation is one of the most critical components of a website
  • Considering the amount of information, the menu should be always present, so that it’s easier for the visitor/user to navigate and not get lost.
  • Research study confirms that sticky menus are 22% quicker to navigate and users do prefer to have a sticky menu https://www.smashingmagazine.com/2012/09/sticky-menus-are-quicker-to-navigate/

image

Proposal

  • Make the menu sticky to the top.
  • Since it’s always visible design a more neutral menu, so it doesn't compete visually with the content

image

Footer

Current

  • The current footer has only links for Apache foundation, damaging the discoverability of the Apache Pulsar website.
  • No links for GitHub or Slack

image

Proposal Follow up-to-date standards, by using a fat footer, where visitor can easily have a glimpse of the whole website structure/content with links to social media

image (updated March 9th: footer updated based on discussion comments)

Links

Dev mailing list discussion thread: https://lists.apache.org/thread/3of7dfhn4qk033hqlqpvbc8so6bcolz4 Dev mailing list voting thread: https://lists.apache.org/thread/ph25f3p405ky78w91r08hd8f0jmkdwh0