Design Task - Form Creation
Problem
For this design task I had to create a form used to customise a bicycle that a user would like to buy. The form needed to gather the following information from the user.
Name
Email address
Frame colour (choose one from a given set of choices)
Wheel size: 28" or 29" (same price)
If the bike should be equipped with fixed lighting (hub dynamo, front and back light) for an additional cost of EUR 250
Option to extend the base warranty of 2 years by an additional 6 to 24 months. Only whole months can be selected. Each month costs an additional EUR 10 (e.g. a warranty extension by 6 months costs EUR 60).
Additional Information
I did not need to show the total price or visualise the bicycle. Payment was not part of the form. and there was also no basket or other shop functionality. This is simply an information gathering form. I needed to create a mobile and web version of the form.
Design Process
Research
When I received this task the first thing I did was write out exactly what the user needs were for this task. I then began researching similar forms online by looking at other bike shops and the options that they had available. The first thing I noticed is that most of these online shops visualised the bicycle when showing the customisation options which was not asked within the task. I had to find an interesting way to show the other options that were available to the users.
After researching this for awhile I began sketching and thinking through each step that the user would need to go through to complete this form to make sure I was not missing anything. I took note of all of the choices that would need to be available for the user and at what stage of the form they would need to input this choice.
Prototyping
For this form design I began simply by designing a basic form and spacing out each part of it correctly in Adobe XD. I wanted to make sure that I had everything I needed on screen.
From here I began to add the details like headings, text shapes and fonts to each section. I also began to research colour combinations that I liked and noted them down in my colour palette.
When I was happy with my selections I began adding the fine details. I included colours, icons, rounded corners, a navigation menu on top of both desktop and mobile (just for show) and added scrolling to the mockup.
From here I firstly designed an empty state for the form. This would be where the user would start the form from. When I had perfected this on both mobile and desktop, I then started to create the interactions and add them to the mock-ups. I included an error state, some animation examples on selections and showed a completed form.