<?xml version="1.0" encoding="utf-8"?>
Open full project

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:

  1. Account creation (name, email, password)
  2. Organization setup (name and logo)
  3. 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.

Share your insights — leave a project review and help others grow their skills

Reviews

4 reviews


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

Great job!


Congratulations on the project, Manar!

I noticed that among your accessibility decisions, you mentioned reducing cognitive load with a clear step structure. I’d love for you to think about two specific points related to that.

Since you already have a progress bar for the account creation steps, do you think it would be helpful for users to know how many total steps there are? It’s often good practice to give users a sense of progress and control. It might also be useful to let them go back to a previous step, which would make the flow feel even smoother and more user friendly.

The second point is about the image on the right side. It feels like it draws too much attention away from the form, making the form appear secondary even though it’s the user’s main focus. How might you shift the visual focus back to the form so it becomes the primary element?

On the sign up screen, you have a section labeled “Seamless experience” with a few avatars. What’s the purpose of that element and the message it’s meant to convey? Consider whether it’s adding value or if the layout could be cleaner without it.

Good job overall!


Good work on your project Manar. Well thought out and implemented accessibility decisions. To make this even better, here are some of my thoughts:

  • Different eye icon for showing/hiding password depending on user choice.
  • Add persistent password requirements. Show a checklist under the input field telling users requirements upfront and how close they are to achieving them with real-time validation using checkmarks.
  • Include clear and visual error messages for both email and password.
  • Provide success feedback on the click of buttons to let users know their information is being processed by the system when they login/signup.

You have a great start but these would make your project outstanding.

(edited)

18 Claps
Average 4.5 by 4 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>