My submission for the design challenge

[reserivera]

Hi!

The following are the insights that I have from analyzing the original screen:

1. Some fields are not user friendly and would be difficult for the developer to process. Example is the question wherein the user has to list down his/her medication. If the user made a mistake or delimited their answers differently, it would be difficult for the developer to clean. Other examples are the questions that can either be a yes or no answer. For those questions, it may be ideal to make them radio buttons instead.
2. High cognitive load for the user since the fields are overwhelming. So much fields are given to the user right away. Moreover, the flow of the user would be disrupted if, for example, the user lost internet connection. If the user was to submit the form, the form would not submit properly and the user would have to type everything all over again. It would really be frustrating == bad UX.
3. There are some information that are not grouped properly. I believe that it would be easier for the user if there was a clearer grouping of the information. Example is the question “Are you a smoker?”. Currently, it is in the basic information, but it would make more sense if it was placed in the current habits.
4. The form lacks in consistency. For the Basic info section, there are 2 columns, the next section had only one, and the last section was mixed. I think it would be very confusing for the user to change the way he/she would navigate through the form because of the inconsistency.
5. Some fields are not consistent. For example, the select fields in the Health History section is different from the select fields in the Current Habits section. This would be a problem since the inconsistency may disrupt the user's flow.
6. The negative space on the form does not allow the elements to breathe. Aesthetically speaking, negative space is needed to show hierarchy in between the elements and also does not make the user feel that everything is compact.

With these said, here are my suggestions:

1. The form should be broken down into sections so it would not be overwhelming for the user.
   For my suggestion the flow is Introduction -> Basic Information -> Health History -> Lifestyle (was current habits before) -> Program Confirmation
2. A progress tracker could show the progress and motivate the user to finish the form
3. A clear way to go back and forward should be shown in order to avoid confusion
4. Rearranged the information/questions so that it would have a smoother flow. Moreover, since lesser information is shown to the user, it would be less confusing for them and they could focus on the task at hand. I also changed the phrasing of the questions.
5. Made the input fields more consistent.
   A. yes/no questions have radio buttons
   B. List questions are in tags
   C. Feeling questions are represented as emotions
   D. Choose questions are in dropdown
6. Made the elements look more aesthetic
   A. Rounded input fields
   B. Colors are more pleasing to the eye
   C. Minimalistic which allows the user to focus at the task at hand

A red outline on the input fields and a tooltip can be utilized to show the user that he/she has made an error. Moreover, the suggested design is minimalistic and can be usable in mobile + is responsive.

To better visualize my suggestions, I have some mockups here:
Note that I was not able to put hints within the fields (sorry about that), just assume that there are

[Johnsalzarulo]

Wow, you make some really great observations. The mockups look great! Thank you so much for taking the time to put together such a thorough submission.

[reserivera]

Thanks @Johnsalzarulo 😄