Social Login Flow Submission #1 - (Studies)

[samgawaran]

Summary

• Having different login methods will increase our guest-to-player conversion rate.

• Top comments in this feature suggestion said that they want to buy expansions and maps but don't want to create a google account just for it.

Designs made here are based on this report and research below

Research

Social Login UI

• Uses button for options. The button color is either monochromatic (black or white) or follows the brand colors of the social login

How other websites/games show social logins

• Most websites either go by Sign In or Log In
• If the website has several CTAs on the header. The Sign In button is the only one with BG/different color

Current Design

• design are on top of one another
• Sign In with google uses a different font size/style
• Shows a lot of options in the dropdown that the player cannot use unless logged in. Its better that if they click on the dropdown, they'll be directed to the login options for fewer clicks.

Studies

A. White CTA Login - Dropdown & Popup

• No Guest Details
• Most common social login layout
• Log In to Colonist will expand to show the options. This can be prototyped if this is selected
• White cta version - This reduce the number of colors seen at the dropdown

B. Login w/o containers - Popup w/ Perks

• Log In / Sign Up with Guest info at the bottom
• Login Popup showing features exclusive to signed players. something like these: https://prnt.sc/Fh1iN_WOEF6x

C. Green Main CTA button

• Subcopy on the button can be removed
• Uses dropdown colors
• Adds sub-copy on the popup depending on where the players click (if player click on store, show you need to login to access store)
• can also use circular icons like in E.

D. Login CTA w/ dropdown

• changed format of Guest info. Added a separate login button
• Can also show assorted cta color version

E. Login CTA - Circular Icons

• Can also show assorted cta color version
• Circular icons: this format is often used with one-form login.

---

• Design is moddable can use Login button from A with dropdown in E
• I'll add the mobile versions during the implementation issue. I'll copy how the websites I check show their popup options

Related links

• https://github.com/colonistio/design/issues/174
• https://github.com/colonistio/katan/issues/8318

Submission Checklist

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

Reviewer

@demiculus

[demiculus]

Todos

1. In the top right just have a button that says Login (do a few versions, green text with white background doesn't look good)
2. When clicking on the Login button have a popup in the middle of the page
3. Use this module https://i.imgur.com/jRFYrq2.png

ABTest Ideas

• Change the top right button name to Login/Signup or just Signup and see difference in conversions
• Abtest login popup: https://user-images.githubusercontent.com/90673012/191960960-029e171f-99e5-4137-9f55-d3c1f7511a73.png & https://user-images.githubusercontent.com/90673012/191961173-7e39d6ea-b72f-4957-a628-04970b9fe5a8.png