Accessible Signup Form for Discord

Hello! This is my first submission on UXCEL, but I hope I get some insightful feedback that will guide me on my journey toward UX/UI (:

You can view my design and prototype here

Instructions on prototype functions will be listed in the description!

Introduction

I've decided to redesign the Discord desktop sign-up and login page because it is a platform that I frequent regularly; however, I usually use the desktop app form.

Discord is a communication platform that allows for text, video or voice calls. A special feature of Discord is creating servers dedicated to a specific topic, and within these servers are channels where users of that server can communicate.

While redesigning the sign-up/ login page, I wanted to reflect the overall theme of Discord. The colours used in the new version use colours from the Discord website and the fun emoji in the login represents Discord as a communication platform. Additionally, the hashtag is used in Discord to differentiate between different channels, and I thought it would be suitable to treat the login and register tabs as their own 'channels'.

Problem

Some problems that I found within the login and sign-up page of Discord are as follows:

1. Passwords are always hidden
2. Typos in creating a password during account creation can lead to account recoveries
3. Difficulty switching between login and registering
4. Users have to click on 'Register' or 'Already have an account' to navigate to either form
5. Password requirement is nonexistent
6. Passwords are essential in protecting the integrity of a user's data. Communication platforms need to have password requirements to prevent data breaches.
7. Colours in the input fields have low contrast, according to WCAG standards

Solution

1. I decided to make passwords viewable by clicking on the 'eye' icon when the user begins to type in their password. This decision replaces the need for another field for password confirmation and reduces the likelihood for users to make typos
2. Instead of having to click to access either form, I converted the forms into tabs so they could access either tab and all contents of the form with just a keyboard.
3. Inclusion of a password requirement and real-time validation were included in my design because they promote security and help users in creating a secure password. Having a password requirement can hint to users who have forgotten their passwords what their passwords could have been!
4. The colours used in my design satisfy the WCAG guidelines, which have been checked for each colour pairing.

Final Thoughts

I tried my best to explain the rationale behind each decision, but if there are any other questions regarding my design, I'm open to explaining myself. My main goal while redesigning the page was to increase efficiency and accessibility while keeping the feel of Discord. As a heads up, ideally, I'd like to have users navigate the form with just the tab and enter keys, but that is not reflected in the prototype.

Thank you for reviewing my design and I hope you like it! (:

EDIT: I have reviewed the prototype and some frames were missing from the flow. I have updated it so that all screens are viewable now.