More Sign up and Login UI Templates

[fungc-io]

Messaging

Authgear provides prebuilt signup and login pages that are designed for frictionless user experience. Save time to build sign up pages that look great and achieve high conversion rate.

Objectives

To test different signup page designs for us. And to offer more customization options in terms of UI design to our users.

User Stories/Requirements

• As an app developer, I can choose among 3 signup/login page designs from the portal, and customize the colors and copywriting according to my needs.
• There should be 2 additional designs. The designs should accommodate all the login methods and interactions in AuthUI, except the /settings pages, which include forgot password, change password, OTP setup, logout, error page, verify email, etc. (Ref: List of UI templates - #1200 )
• The design should be responsive and works on desktop, tablet and mobile devices.

User flow

1. Portal > UI Settings > Theme
2. Select Theme for signup and login page
3. Customization on color and copywriting
4. Live Preview
5. Press “Save” to change the settings and all end-users will see the new UI.

Design reference

1. Design 1 - include a space for headline and benefit on the side. e.g. https://identity.getpostman.com/signup

2. Design 2 - a clean and modern design e.g. https://admin.typeform.com/signup

Appetite

2 weeks

Implementation Note

The implementation should fix #1689 . I.e. the email and passwords are filled together with 1 click when using password manager apps.

Todo

• [ ] #1900
• [ ] #1901

[koskosm]

@fungc-io two more templates drafted with minimal changes for current teamplate: https://www.figma.com/file/msiE4O5imHONAG5EjhZeiZ/Authgear-UI?node-id=6045%3A83040

Two more fields for each new template, tablet / desktop banner, and small mobile banner.

See if the proposed design feasible / any comments?