Design challenge submission

Hi John,

I have taken a look at the requirements and have a few suggestions on how you could tweak the form design to fit in better with what you are looking for, please see below.

If you have any questions or if anything needs clarifying please do not hesitate in letting me know. My email is jnomada@outlook.com. Cheers.

The project manager already confirmed the client requires every field on this form. We can't cut down the questions at all.
I am attempting to adapt this to mobile and it's unusable.

I believe that dividing the form into three sections, each on its own separate page, will help with the responsiveness and will also make the form feel less daunting for the user when filling it out.

The header and description of the form could be on it’s own page before the three sections come into play.

I am trying to figure out how to best handle error states. Example: the email used to sign up must be unique. Handling this validation with the complexity of the form is difficult. This user experience is frustrating, do you have any thoughts on how to improve it?

Each field can be validated on the fly using basic html ‘required’ fields or Bootstrap which check that the correct formats have been used and that the necessary characters have been included. Example: email must contain @ symbol, telephone must be numeric, all fields are required and cannot be left blank, etc.

What about aesthetics? How do you think this form looks? Is there anything we can do to make it feel more complete and polished?

Once the form is broken up into the 3 sections, and each section appears on it’s own page it will make the form look and feel spacious.

The background image can stay on desktop versions and can be removed on mobile devices using media queries or even create a layer of transparency on the form which will show the image behind without affecting readability.

Text size, margins and padding will also need to be adjusted for the mobile version of the form using media queries as well.

A progress bar is also a good idea to give the user an idea of how many steps are left.

For long forms we can also have a ‘save progress for later’ kind of button which saves all of the fields that the user has filled out up until now and can resume the process at a later time when it is more convenient.

Can you outline an action plan to improve this form?

I would start by breaking the form down into the sections mentioned, then I would make sure that all fields contain the ‘required’ parameter for validation purposes.

Next I would fix the responsiveness of the form, adjusting margins, padding, text-size, and background using media queries.

After that I would add some color to the form itself, maybe to the headings of each of the fields to ‘liven’ it up a bit. We could also change the text input boxes for just simple underlines which declutters the page even more.

I would probably change the ‘Save info’ to ‘Submit’ and on submission give out a message informing the user that their data has been added to the system/database or similar.

Bonus points if there's sample mockups or sketches although not required.

Mokups can be provided on request.

Johnsalzarulo / design-challenge

Design challenge submission #4