n this application potential participants are signing up for a health improvement program. I attached a screenshot of the current prototype below. I outlined some of my challenges below and I would love your thoughts on it.
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 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?
What about aesthetics? How do you think this form looks? Is there anything we can do to make it feel more complete and polished?
Can you outline an action plan to improve this form?
Bonus points if there's sample mockups or sketches although not required.
Issues uncovered
Overall, this form will appear overwhelming and difficult to read at times to the user.
There are multiple number of different columns of field, few less efficient design pattern choices for fields and the form is somewhat visually unappealing.
The privacy clause should be given more prominence. In this form, it might just be overlooked.
Multi-column layout is best avoided. It strains the user eye’s and the form appears overwhelming. The form also becomes more prone to misinterpretation. Read here.
Date should be ideally be just 1 field, and a date picker can be used.
The heading for each field in some sections (esp. health history) are too verbose. They need to be short and should be understood at a glance. More information can be provided to the user in the placeholders.
In the fields for current habits section, the user input options should be within 3-4 options. A tabbed selection works better in comparison to two clicks to open dropdown and select one. Similarly a numeric counter can be used for some of the following fields where a count is asked.
There is no way to verify if the promo code is valid or not.
Solution prototypes
The prototypes for both mobile and desktop were designed. The tool used was Figma. Please find the links to them below.
The form is updated with single column layout for most of the fields for better readability.
The information is broken down into digestible pieces and delivered to the user in steps and a more structured manner.
The long verbose headings of the fields are replaced by easily understandable and short headings. (Esp in health history)
The form is given a refreshed visual treatment and made more aesthetically appealing.
The form is adapted to mobile and updated for desktop.
Errors and warnings are handled gracefully by visual indicators and accompanying text.
A mobile prototype is created for 2 structures: Step by step form, and a long single page form.
The desktop prototype is created for just the step by step version; although the single page form can also be designed. It is skipped in the interest of time.
Update: Note that the email field was moved right up to the beginning of the form. Once the user enters the email correctly, he can proceed to the fill the rest of the fields.
Dissecting the problem
n this application potential participants are signing up for a health improvement program. I attached a screenshot of the current prototype below. I outlined some of my challenges below and I would love your thoughts on it.
Issues uncovered
Overall, this form will appear overwhelming and difficult to read at times to the user.
There are multiple number of different columns of field, few less efficient design pattern choices for fields and the form is somewhat visually unappealing.
The privacy clause should be given more prominence. In this form, it might just be overlooked.
Multi-column layout is best avoided. It strains the user eye’s and the form appears overwhelming. The form also becomes more prone to misinterpretation. Read here.
Date should be ideally be just 1 field, and a date picker can be used.
The heading for each field in some sections (esp. health history) are too verbose. They need to be short and should be understood at a glance. More information can be provided to the user in the placeholders.
In the fields for current habits section, the user input options should be within 3-4 options. A tabbed selection works better in comparison to two clicks to open dropdown and select one. Similarly a numeric counter can be used for some of the following fields where a count is asked.
There is no way to verify if the promo code is valid or not.
Solution prototypes
The prototypes for both mobile and desktop were designed. The tool used was Figma. Please find the links to them below.
Link to live mobile prototype
Link to live desktop prototype
Updates and improvements at a glance
Please refer to the attached deck for a walkthrough with screenshots and explore the prototypes for a deep dive into the solution. Design_Challenge_solution_by_AnkitKejriwal.pdf