ISSUE-19611: PIP-249: Pulsar website redesign

[sijie]

Original Issue: apache#19611

---

Motivation

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)

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

Apache Pulsar

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

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

Proposal
Make a clear achromatic distinction between main and secondary action

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

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

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

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.

Proposal: Work Sans

• Different weights that give more personality to the website and versatility to create information hierarchy: https://fonts.google.com/specimen/Work+Sans
• Works Sans was created and optimized for screen reading, but the different weights make it also a great use case for headings and highlights (https://fonts.google.com/specimen/Work+Sans/about)
• Works sans is also an opens source font which conceptually also fits the Pulsar spirit

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

As you scroll, you lose the news banner

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

Home page

Then after you scroll, the news banner is still there

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.

Proposal
Create a new section highlighting different testimonials about pulsar

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/

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

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

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

(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