Social Login Flow Submission #2 - (Refinement)

samgawaran commented 1 year ago

Summary

Based on the comment given at the first iteration: https://github.com/colonistio/design/issues/175#issuecomment-1256951268 I adjusted and polished the designs that were promising, and looked how I could improve the naming of the CTA better.

research was done on the previous iteration as well.

CTA Adjustment

Simplified the social login CTA layout. Remove the lines and made the button smaller

Overlay

Feel free to adjust the copy on this popup

Studies

B1 - Login/Signup

Taken directly from Demi's feedback, removed the spacing for the initial design B

B2 - Login

Based on my research the term Login is more widely used compared to Sign in / Signup

B3 - Login Now

based on this article adding the word Now adds urgency.

C1 - Login Now

same with B3 but uses a Green CTA. I made the CTA smaller so it's not that visually intrusive compared to the prev. iteration

C2 - Login + Animation

C2 - Social Login

Animation is for sample only. I think using the Shining animation that was ABtested before could work better here.
Adding an animation would attract players in that section of the website which could lead them to login

F - White Outline

Added a new study that uses a white outline instead. Some websites like Linkedin and Reddit does this to highlight their particular button.
Cons for this is that we're adding a new CTA style solely for the Login CTA

Related Submission

https://github.com/colonistio/design/issues/175

Submission Checklist

[x] This submission abides by Des-lvl-1, Des-lvl-2 & Des-lvl-3

Reviewer

@demiculus

samgawaran commented 1 year ago

Let me know if I can go with one of the studies here so I can create an ABtest implementation issue

demiculus commented 1 year ago

https://github.com/colonistio/katan/issues/8402

demiculus commented 1 year ago

We'll do these stuff once we have facebook login. That might take a while..

colonistio / design