PIP-249: Pulsar website redesign

[asafm]

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

[Anonymitaet]

Hi @asafm and @emidio-cardeira thanks for your great work!

You've contributed new designs (with new colors/elements/... that have not been used) for Pulsar, which is a big step for the community.

Preiviously we've collected some rules at Pulsar Design Style Guide, which are used to create illustrations in docs.

If this new look is accepted, can you document the design rules/best practice used in website? They should be available in the Contribution Guide.

In this way, other contributors can follow and create designs in high quality and consistent style. Thanks!

[visortelle]

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

[visortelle]

While I find the proposed visual changes okay, I'm unsure about the homepage structure.

I'd add one obvious point to the Goal section that can be formulated differently, but eventually is:

• The goal is to get more companies to start using Pulsar.

In other words, the landing page should sell the project to potential users.

The defined scope of this PIP includes the "Homepage structure" point. I will try to express my thoughts on this.

Add "Trusted by" or "Used in production" section

One of the best hooks to attract new customers is to show that their peers or more prominent players use it.

This is why I think it's essential to show the list of companies that use Pulsar as closer to the page top, as possible.

Kafka in some form has this info on the first screen

Confluent has it on the second screen

StreamNative has it on the second screen

Redpanda has it on the second screen

The homepage structure proposed in the PIP doesn't have a list of the companies on the page itself. Instead, it has a testimonials list at the bottom of the page with a link to case studies.

Too much text on the second screen

Users don't like to read long texts on landing pages. They'll just skip it.
Show the same or similar text in a bullet-point-like style would be better.

The Pulsar Features section

Questions the potential user implicitly asks when they scroll the landing page sound like:

🤔 How can this project help me to solve my pain points?
🤔 Why should I "buy" this?

The answers to this question aren't limited to the technical features list.

The current PIP doesn't seem to answer these questions.

---

Alternative page structure proposal

🥑 Here it is: https://pulsar-site-three.vercel.app/

I would be happy to work with the designer if most users prefer the PIP's visual style.

My goal is not to compete here "just for fun". My company works on a product for Pulsar users, so I'm in some kind of dependent on a wider Pulsar adoption.

Thank you.

[asafm]

Answered @visortelle on the DEV mailing list thread

[tuteng]

@visortelle Are you interested in developing these pages based on the new design? cc @asafm

[visortelle]

@tuteng I'm excited to get started. 😄

Should I start by using the provided Figma template, or are there other inputs I should take into consideration?

[asafm]

@visortelle Let's coordinate our efforts in Pulsar Slack under #pip_249?

[visortelle]

@asafm Sure. Joined.

[github-actions]

The issue had no activity for 30 days, mark with Stale label.

[asafm]

This is issue is still being worked on

[visortelle]

The PR was merged.
@asafm should we close it?

[asafm]

Yes @visortelle. Closing.
Thank you all for this amazing effort and achievement. I'm really happy!

[asafm]

We officially completed the implementation of this PIP, and launched the site this week.