Accessibility Sign Up form for Qonto
In this project, I designed the signup page for Qonto!, a SaaS platform that provides retirement, healthcare packages and more for you, and your employees or your customers all under one roof.
The primary goal was to create an accessible, user-friendly interface that adheres to WCAG 2.1 standards, ensuring a seamless experience for all users, regardless of their abilities.
WCAG Accessibility Compliance
The design adheres to WCAG 2.1 guidelines, focusing on accessibility and inclusivity:
- Text and Form Contrast: All text and buttons meet the required contrast ratio of 4.5:1 and clear and concise content for readability.
- Keyboard Navigation: Users can easily navigate the form using only their keyboard, ensuring accessibility for users with limited mobility.
- Descriptive Error Messages: Error states are clearly indicated and described, with relevant guidance to assist users in resolving issues.
- Responsive Design: The layout adjusts to different screen sizes, providing a consistent experience across desktop and mobile devices.
- Alt Text and ARIA Labels: All images and form elements have alt text and ARIA labels, ensuring compatibility with assistive technologies.
Rationale Behind Design Choices
The design prioritizes accessibility, usability, and visual clarity:
- Accessibility: The login/signup pages are fully accessible to screen readers, ensuring users with visual impairments can interact with the platform effortlessly.
- Usability: Simplified, well-labelled forms reduce cognitive load, allowing users to quickly complete tasks. The social login options offer a faster, less tedious login process.
- Visual Design: The use of high-contrast colors, clean typography, and ample white space ensures a modern, professional interface that reflects Quonto’s brand while enhancing readability.
This project demonstrates a thoughtful approach to accessibility and user-centered design, ensuring that every interaction on the Quonto platform is simple, efficient, and inclusive.
Tools used
From brief
Topics
Share
Reviews
7 reviews
Sarath, great job! You've done really well, from the idea to the way you’ve organized everything in your Figma file. It all feels carefully planned and executed. My only suggestion would be to add a working prototype so people can see how it functions, and maybe show a responsive design to see how it works on different devices. Other than that, it’s a solid piece of work. Well done!
Very clean and clear design. The features are nicely highlighted.
Love the interaction in the prototype! Looks pretty smooth. The helper text below the inputs seem a bit small, check it. Some tweaks on the right side of the page are possible, where the text alignment could be better. A solid color background would also give the text better legibility. The feature card section (where it lists 'Global benefits' and others) could fit the container better for a cleaner look. Overall, a well thought out design, with a few adjustments, it will be even more polished!
Great job! The design is great, easy to navigate and it's very clear. Good job on the animations too!!
Nice work on enhancing the signup page for the SaaS platform! I appreciated your meticulous attention to detail, particularly with the clear focus states and smooth autofill functionality, which significantly boost the form’s usability.
Your design is beautiful and tidy; I like the animation you created. You’ve clearly outlined the WCAG Accessibility Compliance and explained the rationale behind your design choices very well.
There’s just one small point. I feel the font size for the placeholder, error message, and password guidelines is a bit too small for me.
The other things are so perfect. Love it.
This is awesome helping me to memorize the content from the Design Accessibility. Well done 👍
The sign-up screen design for the SaaS product is clean and functional, though adding a bit more personality and refinement could elevate the overall user experience.
You might also like
Samyoung Chemical
Roof Recovery – Local Roofing Contractor
Trello - New color palette
Gaming Gear 404 Page
Brandastics – Bold & Modern Website Design
User Experience for Resetting a Password
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
