Accessible Signup Form for Trello

Project Overview:

The project is based on redesigning the signup/login page of a SaaS platform for which I’ve chosen “Trello”.

The primary focus has been on optimizing the existing page and coming up with a more accessible and improved screen to meet the accessibility guidelines and follow the best practices.

Key Findings:

1. Accessibility Issues: There was missing label for the input field and representation of placeholder text wasn’t helping in a way to understand a user what/how needs to be enter.
2. Improper order of Action buttons: As per best practices on the signup/login page, both the action whether it’s signup or login should be placed in adjacent order to make it easy for user to take action as they want to. It was missing on the page.
3. Content & Space Management: There was some content that’s below the fold and gives the impression to the user that there’s more. It could be managed without any scrolling.

Possible Solutions:

1. Improved Accessibility: By adding a label on the input field with an example of what to add gives a clear message and better understanding and improves the accessibility of the overall form.
2. Proper order of Action buttons: Just below the headline of the page, added the login option for the user to right away decide whether they want to login if already have an account instead of going down the page and find it later. Also added a checkbox for terms & conditions acceptance.
3. Content & Space Management: To manage the content without any scroll, I decided to keep the social logins in a single row which gives enough space to add more information if needed.

Additional Implementations for enhancement:

1. To give a brief understanding about the platform and its usability, I decided to convert the screen in 1*2 layout grid. On the left side of the screen was a brief introduction about Trello and the basic pricing plan to encourage users that they can try the platform without any charges.
2. On the right side kept the Input Form keeping in mind the eye movement from left to right.
3. Removed the illustrations to keep the screen design minimal and giving a whitespace to process only the required information needed.