edX Sign-Up Page Redesign
Overview
This project focused on improving the accessibility and user experience of the edX sign-up page.
The original design had usability and accessibility issues that made the registration process less clear and less efficient for users.
Key Issues
Accessibility issues:
The form did not fully meet accessibility standards, with low contrast, unclear labels, and weak focus states.
Weak visual hierarchy:
The layout made it difficult to scan important elements like inputs, CTA, and social login options.
Low visibility of social sign-in:
Alternative sign-up methods were not emphasized enough.
Unnecessary distractions:
Some elements reduced focus on the main goal, which is creating an account.
Implemented Solutions
Improved accessibility:
- Replaced unclear or floating labels with fixed labels
- Increased contrast of text and input fields
- Improved focus and error states
Enhanced user experience:
- Simplified the form structure and reduced distractions
- Applied consistent spacing and alignment using Auto Layout
- Improved layout to highlight the main CTA
- Organized social login options for better visibility
Additional Considerations
User clarity and trust:
Clear structure and visible requirements help reduce confusion and improve user confidence during sign-up.
Reduced cognitive load:
Simplifying the layout and removing unnecessary elements makes the process faster and easier.
Conclusion
This project highlights the importance of accessibility and clear design in form experiences.
Reviews
1 review
It’s a strong decision to prioritize the registration form. It reduces cognitive load by removing the need for users to choose between "Login" and "Sign Up" when they are ready to join. I also like that you used persistent labels above the fields; it’s much better for accessibility and helps users remember what they are filling in.
What could be improved:
- While making the "Terms & Privacy Policy" explicit is ethical, adding a mandatory checkbox creates an additional interaction step. In the "Before" version, users weren't forced to check a box to agree to terms (it was only for marketing). You might consider a passive agreement string like "By creating an account, you agree to..." to reduce friction. If you keep the checkbox, it's a good idea to disable the "Create account" button until all required fields are filled and the box is checked.
- Nowadays, SSO (Single Sign-On) is the most popular way to join. Google, Facebook, Apple, and Microsoft are key players. I wonder why you decided to remove Microsoft? Unless research shows it’s unused by edX users, removing a login method can prevent existing users from accessing their accounts.
- You removed the Country/Region dropdown. While this shortens the form, the company often needs this for legal compliance or localized pricing. If it's being handled via IP detection, it’s worth noting that in your design rationale.
- In the "Before" version, social login buttons were full-width, which is much better for mobile touch targets. The new small icons look stylish but might be harder to tap accurately on small screens.
- Create account button is with the color of edX, don't you think it may lose some of the company's style? You button looks clear, but it's still different.
Great job, keep creating!
Ahmed Oraby
You might also like
Beautify Login page WCAG principles
Design Prioritization Workshop
Sanyahawa - Personal Portifolio_login page
eWallet App Development Project
Uxcel Halloween Icon Pack
Design a 404 Error Page
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
