Johnsalzarulo / design-challenge

This is just a sample design challenge for Better.
2 stars 4 forks source link

Submission #5

Open wallopain opened 5 years ago

wallopain commented 5 years ago

Hello

I have taken a look at the requirements and I 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 anything needs clarifying please do not hesitate in letting me know. My email is onifadewale33@yahoo.com.

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

I believe the best method to sway the project manager is through practical use of the design. I would suggest if time permits user testing is performed to point out why having fewer questions is the best practice.

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?

From the first look of the form, it feels too overwhelming and clustered, Hence will discourage users from filling. I would suggest the form be broken into several sectors to slowing ease the user. A progress tracker on top of the form could show the progress and motivate the user to finish the form.

Made the input fields more consistent.

  1. Yes/ No questions have radio buttons
  2. Instead of having both First and Last name, we could just have Full Name.
  3. Height can be in cms so as to have just one input state.
  4. The input fields should have placeholders for better User Experience.
  5. The date of birth can be a calendar select instead of a dropdown for ease.

Breaking the form into section could further solve the error state Because the error handling could be done section-by-section, for example, have validation for email so it must end in @gmail.com prompts up a red border on the input fill when the user tries to go to the next section.

Arranging the Form in the section with 2 inputs per line solves the problem of mobile responsiveness because the form fill can just stark on each other in mobile.

To better visualize my suggestions, I have some mockups here: Personal Info

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

The suggested design is minimalistic so has not to distract the users from the form. I would prefer if the image can be removed and more use of white space makes the form stand out. Better use of the background color. The text size, color, font weight also should be considered. If it's essential for an image to be included in the form a better view of it would be like the one shown below:

Form 2

Can you outline an action plan to improve this form?

Test the existing form to point out noticeable errors made by the user and try to point out the importance of reducing the questions. If it's possible to adapt the solution, A/B Testing of the two forms be carried out.

Thanks for the challenge, Its was fun carrying it out.