Accessible Login & Signup Flow for Data Buddy SaaS Platform
Project Overview
For this UX task, I designed a mobile login and signup experience for Data Buddy, a SaaS analytics platform, focusing on accessibility, clarity, and trust.
The goal was to optimize the authentication flow to meet WCAG 2.1 AA standards while delivering a smooth, human-centered user experience.
I implemented a progressive form flow, splitting the process into distinct email and password steps to reduce cognitive load. Real-time validation with clear textual feedback and color-coded input states enables users to identify and correct errors instantly.
Visible focus indicators, semantic labels, and logical tab order improve navigation for screen-reader and keyboard users.
The interface maintains high color contrast for readability and includes accessibility-driven elements such as a password visibility toggle, language selector, and trust cues like “Continue with Google/Apple” buttons and transparent privacy links.
Together, these features transform a routine login/signup form into an accessible, intuitive, and confidence-building entry point for all users.
Design Rationale
Accessibility was treated as a core design constraint rather than an afterthought. Each decision — from microcopy to interaction states — was grounded in WCAG best practices and user empathy.
By combining responsive validation, visual hierarchy, and ARIA-based assistive elements, the flow minimizes friction and supports diverse user needs.
Preliminary testing indicated smoother task completion, fewer form-entry errors, and higher perceived trust — confirming that accessible design directly drives usability and conversion.
Key Takeaways & Reflection
This project strengthened my understanding of accessibility as a strategic UX asset, not just a compliance checkbox. I discovered how seemingly small choices — color contrast ratios, input focus handling, password feedback loops — profoundly impact inclusivity and overall experience quality.
Next, I intend to expand testing to different device types and accessibility tools to uncover hidden friction points. I also plan to iterate on adaptive color modes and localized language variants for global reach.
I’m always open to constructive feedback and critique — each perspective helps refine my thinking and elevate the solution.
Design, after all, thrives on collaboration, iteration, and humility. 🌱
Tools used
From brief
Topics
Share
Reviews
2 reviews
Great job!
Really awesome work, Timothy!
Overall, the screens are clean, consistent, and provide clear feedback to users. I like that the secondary login buttons use both color and an underline to make them clear for users who may be colorblind.
A couple of things to consider:
- Although it’s tempting to include placeholder text inside form fields, it’s generally not advised. If you need to give users extra guidance, the way you’ve done it with the password field works really well. For the email field though, we can assume users know the format. Here’s a great article about it from NN Group: https://www.nngroup.com/articles/form-design-placeholders/
- A small thing, but changing the title from “Signup” to “Sign Up” will help keep things consistent.
Really great job overall! 👏
You might also like
Design Workshop Plan
Wireframing for Video Streaming Service
Settings Mobile Page
LinkOn Profile Page
UX Writing - Push notifications - Fortnum & Mason Spec
Flash: AI Study Companion⚡
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
