Redesign

Figma link :

bip.so

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FGnTU0ZKYqXSLx7bNwm3ei0%2Fbip.so%3Fnode-id%3D0%253A1

First Fold

This is the most important area of the website as if we capture the user here they will consider scrolling beyond. On an average a user stays for less than 5-7 seconds on this frame. Making it very crucial to grab their attention

Before

1. The copy is very vague and doesn't highlight the value prop.
2. No product is demonstrated. Plus there is a lot of wasted weight-space
3. The main value prop that is you can login via discord or slack is hidden behind the get started button and takes 2 clicks to realise. Someone might not know this exists
4. The company logos are too colorful and are grabbing attention more than the headline + main logo
5. The top header is far left and not aligned to the grid. Also if a user scrolls down there is no sticky CTA
6. The headline font is the same as the logo making it standout even less.

After

1. Positioned the page in a left-to-right sequence because that's how people read.
2. The visual on the left demonstrates that a document is being contributed by several people in a git mechanism.
3. Continue with Discord / Slack are one click away — increasing visibility and making the signups more efficient
4. Headline is focused towards build in public. For a lot of users they might not be aware what BIP means and need to be made aware hence a recall helps.
5. Added subtext to give more context on the idea.
6. Used multiple font hierarchies and clean sans-serif typography to make the fonts standout.
7. Used several geo-metric shapes to float around to add a little depth to the frame.
8. Made the company logos monochrome so all of them merge and look more balanced.

Other Issues

1. The copy is very vague and doesn't make sense to a first time user.
2. The screenshots are very small and nobody can make sense what exactly is going on.

Fixes

Structured the page in a way that each section demonstrates maximum product

1. There is no pattern interrupt to make the pages exciting.
2. Page ends abruptly.

First fold → Git Documents → Channels → Discord/Slack Integration → Leaderboard → Social Features → Who is this for → Wall of love → CTA → Footer.

<aside> 💡 Created well spaced and grid aligned layouts with interesting multi column elements to arrange information in a fun way

</aside>

<aside> 💡 Instead of full screenshots, I zoomed into the most important feature that was being demonstrated about and just focused on that

</aside>

<aside> 💡 Changed the background to break pattern. Added many interesting layouts section to keep the user interested

</aside>

<aside> 💡 Added a big CTA towards the end and a nice footer.

Also added a geometric pattern everywhere to have depth in the website.

</aside>