Rework the landing page of matrix.org

[thibaultamartin]

Who are we talking to

This is the single point of entry on matrix.org. This is where everyone should be able to know they can find what they're looking for, and where.

The target population is:

• Everyday people who want to use Matrix for instant messaging with family and friends. They are not tech savvy and just want simple steps to follow, and something that "just works™". They don't particularly care about Matrix. They could use WhatsApp or Signal.
• Community managers who want to find a platform for their community to talk on. They could use Slack or Discord.
• Developers who want to create clients, servers, bridges or bots. They are tech literate and are interested in how things work from a technical perspective. They are already convinced Matrix is useful and want either to create toys for it, or Matrix-based tools for production.
• Entrepreneurs who were told about Matrix and who need to see how it can bring value to them to create products based on Matrix.

Goal of the page

1. Make a first good impression, with a polished, simple, up to date website
2. Make all the target population want to try Matrix
3. Make it clear where to find the information the target populations are looking for

Content

The front page consists of the nav bar, and a series of sections that take the whole viewport (minus the navbar). There is snap scrolling between each section (think of it like a vertical slideshow).

1. The hero section like we have today, but polished. Replace the "Learn more" button with a downwards facing arrow
2. A section showing a dummy conversation between two people on different Matrix clients. A one liner says "Matrix can be used to chat with your family, friends, or organisation" with a button inviting people to browse the user docs. There's still a downwards facing arrow.
3. A section showing Spaces, and a list of communities (and companies?) using Matrix for their instant messaging. A one liner says "Build your own community on Matrix" and a button invites people to browse the community docs. There's still a downwards facing arrow.
4. A section showing several clients connected to different homeservers, and sending events to one another. A one liner say "Open, decentralised, secure communications". A button with the label "How it works" points to the developer documentation. Another with "The Ecosystem" points to... the ecosystem! There's still a downwards facing arrow.
5. A section with the list of sponsors of the Matrix.org Foundation

[imbev]

I've personally found that snap scrolling harms UX. Could the site be tested with and without snap scrolling?

[thibaultamartin]

I agree that hard snap scrolling can make navigation really painful. Note that we don't want to make the snap scrolling mandatory, but proximity based.

It means you can scroll freely, but if a section is almost at the border of your screen, your browser is going to smoothly scroll the few missing pixels to make it fit perfectly. See https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type#try_it for a live demo.

[imbev]

The iframe on that page wasn't working, but I found a working comparison at https://codepen.io/anon/embed/ZjrOpx?height=450&theme-id=1&slug-hash=ZjrOpx&default-tab=result#result-box

I found that proximity snap scrolling was a pleasant experience.

[thibaultamartin]

Closed by #1554