Betterco Design Challenge Submission

[DannyW86]

Hi John,

I've gone over the design and first thing that stands out is obviously that this form is extremely long for a single page/screen.

The project manager already confirmed the client requires every field on this form. We can't cut down the questions at all.

With the above noted would it not make most sense for us to break this form up in to more manageable sections? not only would this allow us to make things more digestible for the user but it would give us the opportunity to tidy up the form fields from a layout perspective too.

E.g. In the basic information section the way the fields are currently aligned on desktop is a little frustrating (perhaps that's just me being OCD?), we go from 2 columns, to 3 and back to 2 which are not even aligned according to the rest of the form (input fields for height) resulting in a rather messy interface in that section alone but which carries right through to the end. Perhaps this could be improved upon by combining fields (e.g first and last name to full name) and using pre-populated dropdowns and date pickers etc (one for an A/B test perhaps?).

Also the fact the smoking question is here seems odd? This seems like something that belongs in the current habits section, is this a mistake/oversight in the current design?

I am attempting to adapt this to mobile and it's unusable.

Again the placement of individual questions is something we could look at if we move to a multiple step design which also should in turn help to make things more useable and manageable on mobile too as you have pointed out this current design isn't translating well to mobile in its current form.

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?

As with the above, breaking this form into sections makes everything a lot easier including input validation and error states. It hasn't been outlined but based on the nature of the form I'm assuming everything is required (although the last two question in the health history section seem like an N/A situation could apply?) so no need for required field markers or if not this is a simple first step in the process.

Using a simple error message at the end of each stage to point out exactly which inputs require attention along with a red outline on the corresponding input field provides the user with a clear set of directions for how to resolve any errors and continue to the next step.

As with anything of this nature, some usability testing is always the best route to take before implementing any large changes however I would be confident (in this scenario) in seeing some instant improvements taking the above in to consideration. This new design should make the transition to mobile much easier too as all fields would simply fall under one another to give one input field per row.

I look forward to hearing your thoughts on my suggestions.

Danny