📋 Client wanted a story telling - Sign a manifesto website and provided me with a Notion file where all the thoughts, statements and ideas were written. Client completely trusted me to convert that document into a story telling website. I suggested we make it cinematic and epic with awesome scroll animations, visuals

🛠️ Execution

1. I always give high importance to the Hero section as its' the first thing a user sees when they land on the website and that determines the first impression we leave. And if that's well designed and planned, the high bounce rates can be reduced instantly. So here my goal was Unique design + Visual story telling + CTA and after many trial and errors I finally came up with a design

2. One requirement was to somehow display three titles on the hero which was tricky so I came up with an idea to cycle the 3 titles while the description stayed common. Then below it is a MacBook with a mockup of amazon that I designed from scratch. As we scroll down, the screen pops out of the laptop and transforms into a larger tilted version and 3 cursors appear, this delivers the message that with Multiplayer Web you can browse Amazon collaboratively as you would do designing on Figma with your friends/team. So this delivers a message that Multiplayer Web can make browsing collaborative, and that's why I choose to use Amazon's mockup as users are used to that interface and these set of cursors would awake excitement in users that how amazing would it be to use Amazon like Figma, Framer, Google docs etc.

3. The sections that follow after were written as plain text, statements, ideas and suggestions which I brought to a design form.

4. Like the section that follows says "The internet is the greatest collaborative medium" with a scroll animation of some famous collaborative apps.

5. Then a reality check that says "Yet your browser thinks you're alone" saying that at application level you may have multiplayer, but still no multiplayer at browser level

6. Then a comparison saying, "For documents we have Google Docs", "For design we have Figma", "Now time for the browser", again with the Amazon UI with multiple cursors showing as if 3 friends are shopping together.

7. A section that says that browsing alone is outdated, then a graph that animates on scroll showing how multiplayer trend is surpassing singleplayer.

8. Following that are the showcases of products that Client and his team are building that will implement the concept and idea of Multiplayer Web.

9. A few more formal sections and finally a "Sign a Manifesto" at the end.

Sign a manifesto is placed at the end so that users can first read, understand and then sign. But as a good UX, I have kept two button in the hero animation that gives the user two choices: "Read the manifesto" or "Sign the manifesto" directly. Apart from that, in the navbar there is a CTA to increase number of signs and a dropdown for reading thesis, signing manifesto, sharing manifesto

💻 Custom Codes

1. I've written a custom code for the multiplayer vs singleplayer comparison graph in the "The Contrarian Bet" section which scrub animates on scroll when it comes in view. We can customise the data points of both graphs to change the graph according to our needs and also customise their colors.

2. Client wanted that when a manifesto is signed the user should be shown a success message and options to share the manifesto on multiple platforms but when they share it, there should be 1 unique message that should be picked from a set of 11 messages the client provided me with. So I wrote a custom code component that enabled sharing feature on different platforms and it would randomly select one message from an array of predefined messages.