Accessible Sign-Up Flow for a Residential Management Platform
Accessible Sign-Up Flow for a Residential Management Platform
This project focused on creating an accessible three-step sign-up flow for a SaaS platform that helps residential compounds manage residents and operations.
The flow includes:
- Account creation (name, email, password)
- Organization setup (name and logo)
- Team invitations (optional and skippable)
Accessibility Decisions:
- Clear step structure and progress indicators to reduce cognitive load.
- Properly labeled input fields and keyboard-friendly navigation for assistive tech users.
- High color contrast and non-color error cues for visual accessibility.
- Accessible file upload with ARIA feedback for logo setup.
- Optional invitation step to minimize cognitive pressure.
- Real-time validation with screen reader announcements.
Result:
A simple, inclusive onboarding experience that improves completion rates and ensures all users — regardless of ability — can easily sign up and get started.
Tools used
From brief
Topics
Share
Reviews
1 review
Neat work, Manar, feels like a smooth move-in day already 🏡
A few notes from me:
- If you still have control over this, I think the logogram and logotype would appear better if vertically center-aligned. They’re in different shapes, so aligning them by baseline creates empty space above “Mojtama”
- To preserve legibility, I’d suggest slightly increasing the dark gradient overlay on the imagery to the right. It already works well, but edge cases could appear. For example, on the first page, the word “simplify” in purple over the brownish oud can be a bit hard to read.
- …or you could also tweak the copy so that colored words don’t overlap lighter backgrounds.
- For the border radius on Role/Admin, this might be one of those designer-only details 😄 but using consistent radii with the rest of the shapes would make it even cleaner.
Thank you so much for the thoughtful and detailed feedback — I truly
appreciate you taking the time to go through this so carefully! 🙏
Fortunately, the project is still in the design process, which means there’s room to polish and perfect. I’ll absolutely take a deep dive into your notes on alignment, readability, and consistency and refine each of those details so that everything feels even more balanced, clean,
and intentional.
Thank you again
5 Claps
Average 5.0 by 1 person
You might also like
Project
SS Fire Pits
The provided image is a detailed high-fidelity UI design for an e-commerce website, "SS Fire Pits." The project focuses on presenting a prem
Project
Swift: A mobile design system
Swift is the finalized design system built on the foundations of the TournaPro mobile app. It includes detailed documentation of the system'
Project
Cinemora - Ultimate Movie Companion (UIX Documentation)
Project SummaryFor this UXPilot project, I reimagined Cinemora, a movie companion app that helps users discover and organise films more inte
Project
Color System for Productivity App
I have previously done this brief once before but to be frank, i wasn’t completely satisfied with how it turns out. Hence why I decided to t
Project
Asana - Color System Redesign
I redesigned the color system for Asana, a digital work management platform, to create a calmer and more focused visual experience while kee
Project
Responsive Landing Page - petcare clinic
Responsive Landing Page - petcare clinic The main goal of the landing page is to build trust quickly and convey a sense of care and warmth t
Visual Design Courses
Course
UX Design Foundations
Learn the essentials of UX design to build a strong foundation in core principles. Gain practical skills to support product development and create better user experiences.
Course
Introduction to Figma
Learn essential Figma tools like layers, styling, typography, and images. Master the basics to create clean, user-friendly designs
Course
Design Terminology
Learn UX terminology and key UX/UI terms that boost collaboration between designers, developers, and stakeholders for smoother, clearer communication.