Last minute Better Design Challenge submission

[mattesarmusic]

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

• Then...ah well. Let's just work with that first. The PM did all he/she could (to that, I say thank you).

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

• Let's try breaking it up into several pages. Display only one or two related fields per page to make it less overwhelming.

• I've uploaded a screen recording of my phone

• GIF of the first 3 questions on desktop:

  

• This small-wins style gets them to take action and get into momentum quicker - meaning it should get good completion rates.

• I did something like this before with 21 questions (multiple options, though), we achieved 92% completion rate (~50,000 completed to date).

• I've counted and the fields would be broken up into about 15 seperate pages. See below - red rectangles (sorry it's kinda messy)

  

• Let's add some interstitial pages that say "Great! Let's move on the next section" - so the total pages should be 18. These interstitial pages give users short breaks to prevent form fatigue.

  

• Light gamification helps with engagement. Display some sort of progress indicator(s). I'm just using 3 square icons for sections, and a normal progress bar for total questions.

  

I am trying to figure out how to best handle error states.

• This is another advantage of the multiple pages style. After the user fills out their email, check the email field POST value against your database. If it's a duplicate, display the error. Else, move on to the next page.
• I have included a gif below.

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

• Maybe tone it down . I'm guessing that for this kind of use case, users aren't really in the enthusiastic state of mind (as opposed to something for a video game or movie) so just keep it as simple as possible. Minimalistic, as you will. I'm just using a white background with a darkened header image.
• For the multiple select field, let's use Facebook-style select like so (I'm using the jQuery Select2 library):

Note: For the date of birth field, it's tempting to use a datepicker like Flatpickr and such to make it look more polished. However, I tested this with non-technical people and they just got confused (and angry...we don't want users to get angry).

Can you outline an action plan to improve this form?

1. Identify which sections to break up.
2. Identify 'steps' to further break down each section
3. Review accessibility and implementation plan. For example, single-page application using Javascript feels more responsive, but maybe we should seperate pages for each step instead? What about no-JS people, screen readers? Is JS worth the extra effort?
4. ROUGHLY prototype the design (in prototyping app or even HTML). Don't spend too much time.
5. Do user testing. We need some data, eg maybe the progress/button color needed some work?
6. Iterate/improve, do user testing, repeat as needed.
7. Do finishing touches to the design, form code, etc based on test data

Bonus points if there's sample mockups or sketches although not required.

• I have coded up a rough interactive HTML prototype. See it for yourself.
• Use "duplicate@email.com" to see the duplicate email error.
• Due to time constraints, I'm just using spaghetti jQuery + Bulma CSS lifted from a similar-ish personal project (mental health self-test questionnaires). I am familiar with Bootstrap as well.