Accessible Signup Form for Docusign

Overview

After browsing for Saas platforms to design for, I landed on docusign when I realized there were some pain points as I tried it out. This was an opportunity to revamp it a little and boost the accessibility and overall experience for the sign up page. After identifying the pain points, I came up with a redesign that enhances the accessibility for all types of users.

Pain Points & Issues

Summary of Key Issues

• Lack of information on free trial and product
• Helpful information not disclosed upfront before signing up
• Inconsistent form field width and column count
• Label sizing and placement not optimal
• Signup allowed even with incomplete form
• Untimely error state messages
• Error state field boundaries insufficient contrast
• Error messages not clear enough

Solution

Please see my slide deck for detailed solutions and embedded interactive prototype! As a summary, here is what I did:

• Improved layout and put crucial information upfront for users to make informed decisions

• Introduced more enhanced states for the text fields by using better color and style contrasts for clarity
• Optimized button states and text field states that are better suited for current user action to enhance user flow and prevent user error

Final Thoughts

This was my first project when I placed the most focus on accessibility and it was a learning curve. Previously, accessibility came as a second thought after the designs were sketched out, so it was refreshing to put it as a priority this time. I had a lot of fun learning about WCAG standards, analyzing the sign up page, and applying them in the redesign.

This is my first project here on Uxcel so please be gentle, but I'm looking forward to everyone's feedback and comments മ◡മ

Note: edited based on feedback received after submission