Accessible sign up form for Interaction design foundation

I've chosen to assess the UX learning platform: Interaction Design Foundation. It has good learning resources, but requires improvement to it's own user experience. As a UX designer and experience of using this service, I wanted to make the site more accessible for all users.

Empathise

• Colour contrast: Insufficient contrast on the primary button colour. Also the secondary grey button colour doesn't convey clickable
• Sense of control: No way backward once I entered the sign up journey other than the logo to home.
• Challenge: Lack of visibility of the other membership types for Student or Business. You have to scroll to the bottom of the feature comparison page to see the options.
• Anxiety: Too many steps. The site is too formal, users have to pay and accept terms before having visibility of service. Inform messages appear too often and on every page. 

Define

To design a sign up page that is accessible to all users I had these immediate thoughts:

• Improve information: Avoid a large feature table and hidden options. Ensure good visibility of benefits making information more visible to all users
• Conventional layout: Build on familiarity to increase user confidence. Good layout will improve focus given appropriate sectioning of the page/contents
• Free trial: Provide an open and inviting experience to users of all types. By opening the platform up so users can try before they buy we improve the value proposition and allow anyone to assess if the contents within are also accessible to them!

Ideate

To gather my ideas I've looked for patterns and inspiration from big brand websites. I also considered sites I use in my day-to-day

• Accessibility: Define sections of the page (header, sign up form and reasons to use). This makes the page easier to digest and navigate. Add a hidden but accessible label for the membership type. Form controls would use the primary blue colour. I've updated the colour to achieve AAA compliance and to focus the users attention. Note I've added a secondary style on the Sign in button. The form is keyboard navigable. A heading and sentence convey the proposition to all reading levels. I've applied this principle to writing the reasons to sign up too.
• Usability:  By reducing the number of steps we can perform a sign up with ease. Page load would be fast. Cognitive load is low. I referred to the eBay Create account page and used a group to select between membership types. The form and terms update according to type. To start a trial of any site an email address feels all that's required. The field doesn't use a placeholder as these can be misunderstood for filled in contents.
• Visual design: I wanted to make the design recognisable. Common sign up layouts share a form with some reasoning. The reasoning is often conveyed through imagery, video or text. Because the IDF site already has key selling points throughout, but dotted around. I've focused these in an appropriate section to promote the positive reasons to the user.
• Presentation: Netflix and eBay websites amongst others include a top header . This element provides a reference for navigation and a route for existing users to log in. The sign up form is set in a container that would also work for mobile. Responsive design allowing designers to stack the list of reasons and sign up form.

Prototype and Test

To test the concept I produced a rough wireframe in Miro. This way I could see how each of the steps would transition. The user begins by pressing "Join the community".

• Membership type: There should be a clear focus state as the user makes a selection. It should always be clear whenever a keyboard user navigates between elements.
• Errors: The states of errors to use a semantic red, iconography and concise messaging. For example, "Enter your email" is concise and indicates an empty field error to the user.

The redesigned sign up form would need to be user tested, but here's how it would look: