Iteration on the Uxcel signup page with accessible-first approach

Uxcel is a leading platform in the software design education space. I assume you might already know that 😄

I love my experience so far and the accessibility lesson is a true gem, but the platform’s signup page has a few issues that could be improved. I will propose a new version as a part of the design brief on form accessibility.

Let’s drill down into it.

General UX

To start with the positives, the signup page is simple, clear and straightforward. No clutter, no distractions, very conversion oriented and well fitting with the platforms’ simple visual aesthetic. I like that.

Still there is a few minor things I would improve:

• Add the full logo. The page is obviously used by new users, so the brand should be better established.
• Solidify the value proposition one last time. Just a sentence to remind users why they should fill this form.
• Open the email sign up for by default. As the most common way to sign up for a platform it should have a more primary position. This also means to add an H2 to that section.
• Offer a way back. The page should not be a dead end without any links back to the website.
• Make it more clear what to expect next. After the form is filled Uxcel offers an unskippable survey to get to know the customer better and offer a more targeted experience. That's a great idea, but this is a friction point that's not really communicated before that.

Form accessibility

On the accessibility side I think there is plenty of good foundation, like the good copy contrast, blue links, CTA contrast and so on, but I can still improve a few things:

• Add labels to the email and password fields. Currently the form uses only placeholders to communicate the fields' purpose, which is a big no-no from accessibility point of view.
• Currently the page is not tab-navigatable. This is a must do improvement for users with screen readers.
• Improve the sign-up form validation. Color blind users would have a hard time understanding they made a mistake as Uxcel currently only rely on color to communicate the error state.
• Make the buttons stand out a bit more by increasing the borders contrast.
• Make the password requirements clear. Currently there is no indication of what password format the user should follow.

The redesigned version

The error handling also needs an improvement to make sure:

• We use an icon to communicate the error state. Color alone is not enough.
• Give a better explanation of why the password did not work.

Conclusion

This is what the page looks like after the redesign. There is a lot more elements to it, which could increase cognitive load, pageload time and effect conversion.

As a next step I would recommend running series of experiments and AB tests to figure out which improvements actually make sense for Uxcel's real world users and improve the performance of the page in a measurable way.

PS. I used the Uxcel UI kit for this. Awesome work, guys.