Jan 21 Signup page design updates

[paolodamico]

Related to #2822 & https://github.com/PostHog/retention/issues/8, we're updating the signup screen to make the experience more seamless and prioritize social logins which speed things up. This issue is to share the design proposals and get feedback on them before we implement them.

Option A (Based on @corywatilo's new design, PostHog/posthog.com#810)

Option B

[lottiecoxon]

Option A for sure! I love it -it's colourful and visually split between features and sign up - the icons need doing (that's on me) but aside from that I like a lot!

[corywatilo]

For the time being, until we get the finalized design pinned down, let's keep it consistent with the app and go with B.

Love the idea to do something with this page! But I just think we should flesh out more of the new design first.

[lottiecoxon]

That is very true + sensible- go with B

[paolodamico]

Sounds good, going with Option B for now. Feel free to propose an improvement at any time. Closing this then.

[paolodamico]

Reopening this to now request comments for the team invite signup pages. Figma design.

[lottiecoxon]

I personally would restructure this a tad so that one side is the info for the hogflix, possibly with a gradient background behind it, and then sectioned off to the side (with a white background) have the two options for creating an account

[lottiecoxon]

[corywatilo]

In the not-too-distant future, it will make sense to bring the design of the create account flow inline with the new website style. Since it looks like it will use the same template as the accept invite screen, we can probably kill two birds with one stone when we get there - and these screens will act as a nice transitionary style between the website and the app, as they will always look somewhat different from each other (nature of SaaS vs marketing websites, especially once as intense as ours).

I don't disagree the new user accept invite screen would be good as a vertical, stacked form - we just need to have content to fill the left side. This also goes for the signup form we originally discussed here, since these appear to basically be the same forms. (Because we didn't have the content fully designed when this thread started for the create account flow, that's why I suggested sticking with the simple, side-by-side flow, with the idea being we should be able to stack it with minimal effort, once we have content that can fill the left column.)

I don't have any problem with the existing user accept invite screen since it's part of the app and is sort of a different use case for an existing user. (We don't have to teach the user about PostHog since they already have an account.) Some cool visuals would be nice there at some point, but since it's in-app, I'd probably also punt on this until we have a broader plan to tackle bringing some visuals into the app.

I'll put some more thought into bringing the create account/accept invite screens a little higher into the queue, now that we have a solid visual style defined. After all, it would be nice to have a fully-designed path for new visitors: Homepage -> Choose edition -> Create account

[paolodamico]

Thank you so much @lottiecoxon for the super quick turnaround on this, your mockups have been super helpful, implementing them right now!

Agreed @corywatilo on using this design for the normal login and signup! It does make for a nice, smooth transition between website and app.

Can you clarify if you mean that the form (inputs, buttons) & actionable items should be on the left side of the screen and the visual background on the right?

[corywatilo]

Marketing stuff on left, forms on right 👍

(Eyes naturally move right, so in theory better for conversion)

[paolodamico]

This has been fully addressed and implemented, closing