Design Challenge Submission

[OreziO]

My thoughts and solution to some of the challenges

• The project manager has said that the client requires all fields, I'm assuming that this is after
  having conversations about how necessary they are.

  *Therefore I suggest that some fields be made one, such as
  i) Date of birth; this can be one field that pops out a calendar to select the date, instead of
  the separate fields that it is right now (day, month, year)
  ii) Also same goes for the height field, it can be merged into one and be an input field with
  the unit of measurement being cm (commonly used in health study) and a placeholder
  showing an example.
  iii) Questions with two answers only (yes or no) should be radio buttons instead of dropdown
  menus to make the process faster and easier

• Adapting to mobile
  My solution will be to create separate pages for each section so that it can reduce cognitive
  load, and errors will be easier to handle. (see example https://www.figma.com/file/Mmnx3uWO4c11eng32KimkTuG/Design-Challenge?node-id=0%3A1

• Handling error states?
  i) Error messages should be short and concise
  ii) Immediate effect; ie the error should pop up immediately after that field is filled so that it is
  a lot easier for the user to correct at once.
  iii) Inline validation; each field should have its error message and not generally at the top, I'm
  going to suggest two methods and you can pick the one that works best; it can be a text
  beneath the form field or it can be a message pop-up (see example https://www.figma.com/file/Mmnx3uWO4c11eng32KimkTuG/Design-Challenge?node-id=0%3A1

• Aesthetics
  i) The fields are not properly aligned. Aligning them will make a huge difference.
  ii) Spacing between sections can be increased
  iii) The Heading text for each section should be reduced (text size & text style)
  iv) The application text at the top of the form should show higher heirarchy (text style and
  size)
  v) The green fill or color of the form should be removed except that field is being currently
  filled
  vi) Increase padding on sides of the form

Action Plan To Improve The Form

1. Make adjustments as listed above
2. The multiple selection dropdown should both be scrollable and searchable and display selected items as pills in put fields
3. Labels are currently not consistent, some are sentences(questions) while some are statements. The designer should decide on a style and stick to it. (I would suggest short and descriptive such as "zipcode" not "what is your zipcode?"
4. Necessary fields should be indicated.
5. Padding (the space between the field and the edge of the form) needs to be increased.
6. The button should say "Submit" and and save info for clear understanding.
7. The agreeing to terms and conditions text should be above the submit button.

*Please see my figma link for the idea I have https://www.figma.com/file/Mmnx3uWO4c11eng32KimkTuG/Design-Challenge?node-id=0%3A1

https://www.figma.com/file/Mmnx3uWO4c11eng32KimkTuG/Design-Challenge