Trello Sign Up Accessible Page

In this project, I chose Trello as SaaS platform and analyzed its Sign Up page. My redesign focused on both the visual design and the accessibility of texts, inputs, and buttons. Additionally, I aimed to make this page more useful, as it usually presents only the form in an empty space lacking personality.

Trello is a web-based project management and collaboration tool that helps individuals and teams organize tasks, projects, and workflows visually. Users can create boards to represent projects, lists within boards to represent stages or categories, and cards within lists to represent tasks. Cards can include checklists, due dates, attachments, labels, comments, and other metadata, making it easy to track progress and collaborate. Trello is especially popular for its flexibility, simplicity, and visual “Kanban-style” interface.

Trello uses an Atlassian account, the same account system used for other Atlassian products like Jira, Confluence, Bitbucket, and more. This allows users to access multiple tools with a single login, share information seamlessly across products, and leverage integrations within the Atlassian ecosystem. For example, you can link Trello cards to Jira issues or Confluence pages to centralize project documentation and development workflows.

In the image above, the points where I identified issues are listed:

1. Missing checkbox: It is always better to include a checkbox for accepting the Terms and Privacy Policy.
2. Small and insignificant title: Since this is an Atlassian account, it would be better to indicate it immediately. Additionally, the title should be larger as it should be the first in the page’s hierarchy.
3. Missing label: It is good practice to always have a fixed label that communicates the purpose of the related input, also for accessibility reasons, especially since the placeholder has too low contrast.
4. All choices look the same: When adding other sign-in options through common services like Google, Microsoft, Apple, etc., the most commonly used ones should be visually prioritized to avoid choice overload.
5. Unnecessary shadow: Every visual element has a purpose. In this case, the shadow is unnecessary because it does not signify anything other than grouping information. Usually, this type of shadow is used to indicate a clickable element, which this is clearly not.
6. Unnecessary decorative elements: Using illustrations without text or titles that indicate their meaning serves only as filler and could be done better.

The new Sign Up page is structured with a layout that balances the form on the right with a feature discovery section on the left, and The functions scroll automatically over time. The title, texts, and images were taken from the official landing page. In addition to addressing the issues mentioned earlier, I increased the contrast for inputs and buttons to 3:1, while small text now has a contrast above 4.5:1. I reduced the prominence of the logo by using only the pictogram, while giving more importance to the title, making it clear that this is an Atlassian account. I chose to place the email sign-up first before other services, as this is likely Atlassian’s intended flow, and the title references sign-up via email. Finally, the text in the checkbox was also simplified to make it understandable for everyone.