Accessible Sign Up Form

💡 Project Overview

For this project, I designed a sign-up page for a SaaS platform using Figma. I focused on creating an accessible, user-friendly, and visually engaging experience in a desktop version.

🔐 Design Details

Form Fields & Interactivity

• The email field is interactive:
  • On focus, it displays a pre-filled email to simulate a user typing.
  • On the next click, the error state is triggered, with a clear red message and visual cue that complies with WCAG color contrast standards.
  • A final click takes you to the success state, indicated by a green message and success icon — again, fully accessible.
• The password field follows a similar interaction flow:
  • Error messages are clear, specific, and WCAG-compliant, including both format and strength indicators.
  • I also prototyped show/hide password functionality, with a dynamic icon that toggles visibility for better usability and inclusion.

♿ Accessibility Compliance

This design was crafted to align with WCAG 2.1 AA standards, including:

• High contrast ratios for text and background.
• Visible focus indicators for keyboard navigation.
• Error messages with both color and text cues, avoiding reliance on color alone.

🎯 Usability

The form is designed to guide the user effortlessly through sign-up:

• Progressive field feedback helps reduce user errors and frustration.
• Consistent iconography and messaging keep things predictable.
• The show/hide password toggle improves privacy without sacrificing usability.
• Minimalist design keeps the cognitive load low while still being functional.

🎨 Visual Design

• The layout uses a clean, modern aesthetic with strategic use of whitespace.
• Typography is legible and hierarchical, making it easy to scan.
• Colors and iconography support feedback states (neutral → error → success).

📁 Presentation & Interactivity

• All screens were designed and prototyped in Figma.
• I made the fields interactive to simulate a realistic user journey through various states.
• The entire sign-up experience is presented cleanly with clear annotations and flows.