Solution and Designs
The membership form required a complete overhaul of the UI and UX. I introduced several new design elements and UI components:Split the form into segments and introduce a step tracker for users to clearly understand their progress. This was optimised to work responsively.
Grouped related information together and removed unnecessary fields to further break down the information and speed up the time it took users to complete the journey.
Designed a clearer grid system for better layout of elements as the previous design did not use one. This enabled me to keep all fields in 2/3 (left) of the screen and 1/3 (right) to be used for additional information where required.
Introduced a basket view into the form to help users remember their membership selection.
Designed new supporting graphics to be used across the form. I put together a mood board of reference images and then created the graphics using Photoshop.
Crafted new form elements, such as input fields (with specific padding), inline error messaging, clearer CTAs including Primary, secondary, tertiary and inline links and responsive tool tips.
All completed designs were created in Sketch and handed over to developers via Zeplin.
Worked closely with our external development agency to ensure designs were followed correctly and provided QA support during the process.