A better form experience
Creating a multi-step nomination form as part of the Kent Student Experience Awards.
Discovery
The form lets students nominate each other for a range of awards based on their impact in those fields.
The challenge: Create a better form experience that users can fill out on any device, and increase the number of complete nominations.
The solution: Creating a multistep, responsive, and accessible form that provides clear feedback and is intuitive to use.
Inspiration
During the discovery phase I looked at a number of different types of forms, choosing to emulate the checkout experience of large e-commerce websites for their directness, minimalist branding, and ease of use.
Experience and design
Nominations require the user to choose from a large number of categories and then provide supporting evidence as well as details about the nominee and themselves. Because of the level of detail needed, I focused on creating a flow where the user could concentrate on each section individually and go between them as needed before choosing to submit the whole.
Sketches and wireframes
The sketches showcase the complete user journey in as few screens as possible. Choose a category -> about the nominee -> evidence -> about you -> send nomination.
Code
Due to a short time frame, this project had to be completed quickly but not at the expense of accessibility or usability.
The Front-End
The front-end uses a customised version of Twitter’s bootstrap framework, over a PHP based template engine with Kent’s branding applied. Parsley.js is used to handle the form validation, with a regex based JavaScript function for the word counter. Finally, the form navigation and progress bar use jQuery to show/hide the current ‘step’.
Accessibility
A key requirement was to ensure the form was as accessible as possible. With this in mind the fields are all labelled according the W3C WAI-ARIA specification.
Final Results
