Login / Sign Up Page Conversion about design HOT 9 CLOSED

Hey @sirkotsky !

Here is what I've built based on your suggestions:

0. done, good idea
1. Where did you find #000 ? I tried to use Tailwind slate-900 mostly
2. Dimmed the colors and gave it some more padding, I totally see your point but this was my pareto solution :)
3. Done
4. Copy: I might be drawing too much from my own experience but I didnt read the all of the text on the example (GitStart), I just saw the GitHub logo and clicked. Thats what I liked so much about this page, it sucked me in. However, since the form behind "Email" wont work if people try to create an account on the login page, I updated it accordingly. On the sign up page we mostly funnel people who dont have an account yet and I like to keep it with "Continue"
5. Done

from design.

My research shows that typically, there are two elements:

• Social Proof
• Reassurance of key value prop or features

This is why I designed the screen containing both.

Happy to hear your thoughts! And suuuuper happy to get suggestions on how to redesign the testimonial, not really happy with it...

Cheers!

from design.

First version: formbricks/formbricks#288

from design.

How about having a gradient of green and white color in background? @jobenjada

And, lets consider mobile screens also.

from design.

@jobenjada great job handling this!

I do have a couple of tiny enhancements, we can quickly tweak it in production, but overall, great job!

from design.

Thanks!!

I just opened a PR for the quick fixes and things I agree on.

Re wording: I'd like to keep "Log in" as well as "Continue..." because the "Log in" is an indicator that this is the login page. But when people without an account dont read that and click on "Continue with GitHub" we check if there is an account and if not we create one. So the SSO Buttons work for both cases on both screens (login & signup)

For the overpowering, I couldnt find a quick fix.

from design.

@jobenjada I quickly put some ideas together to give you a better sense of what I mean (you can check the Penpot file, I left the artboard there):

0. Using a different background colour (something subtle) to bring the user's attention to a brighter block, and allocating more space to the form to avoid overpowering the actionable section with content;
1. Cleaning the spacing and (very important) avoid using pure black (#000)! Let's be gentle on our user's eyes!
2. The testimony might be a good and important block, but it doesn't have to drive all of the attention to itself. Still, let it breathe, give it some space, and enlarge it a bit. Consistent spacing, dim colours;
3. Use a proper logo. We can use the F instead of a full logotype, but we don't need to encircle it or anything;
4. Clean up the typography and the copy: if you separate login and registration, let's make it clear for the user what the buttons do (in this case, provide them with log in options);
5. Same with the registration link: give it some space, avoid making it look like a text block, and make it clear what it does.

Either way, I'm merely trying to do 2 things here: bring the attention to the form and avoid confusing the user, but I'm sure there's a lot we can improve further. Let me know what you think!

from design.

very good suggestions, will work on it this week :)

from design.

Sweet, thank you, @jobenjada :)

I would recommend brightening it up a bit (for the sake of contrast and readability). Aligned on the rest, let's close the issue & start monitoring the conversion here!

from design.