A better form experience

Etienne Donzelot
2 min readJun 30, 2016

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.

Screenshot of the old form

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.

An example of a minimalist checkout experience
An example of a minimalist checkout experience

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.

Wireframe sketches of the user journey

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

Screenshot of the finished user journey

--

--

Etienne Donzelot

French User Experience Designer based in Kent, UK | He/him