There's is my answers and proposals to the form issues:
The project manager already confirmed the client requires every field on this form. We can't cut down the questions at all.
OK, this is a little bummer. Do you think we could arrange some guerrilla usability testing for this, so you could show the videos to the client? (and also get more knowledge about users to do a really user-centered redesign?) There's always some field that's not really needed at first time, and perhaps we can propose a two or three step opt-in process: maybe asking just basic questions to register, and establish a workflow between validation emails and secondary web forms to complete the registration.
BUT, to advance with this, I think we can "virtually" cut down the questions by defining if there's any dependencies between them, showing only the fields that would really use; maybe you can help me by refining this with the client. For instance:
There's no questions about the sex or gender of the applicants; this could narrow the options on the previous diagnosis question and the presence of the pregnancy status question.
Previous diagnosis on family members could depend if the applicant is aware of the family health history.
Frequency and duration, distance or other means of measure of workouts depends if the applicant do any workouts and the type of them.
The same for travel and eat habits, the question about diet is not really self-explanatory, but probably we could narrow the questions on the basis if the applicant is a spartan eater or a sybarite.
Also, maybe we can ask to the client about the possibility of pull some personal data from social networks or another apps (health, workout and eating habits); it's not a complete solution, but for many users will be a good time savior (If they're in the target. Do you have any user personas to share?).
Finally, there's some usability issues to be aware on the redesign; for instance, Height and Weight questions has the measure unit fixed to Imperial; I don't know if this is because the form is only valid for US and/or UK, but, if is not, we can localize this based on the geographic location of the user (even getting the Zip Code on the same basis), and give an option to change it. Another thing to have in mind is that binary questions would be better presented by UI elements made specifically for that, like radio buttons or switches. Regarding to the birthday field, I prefer not to implement a calendar element over there, considering that searching a date far from today would be really more bothering for the user than just typing it.
I'm also thinking that maybe we can rearrange the questions so the users get better context on what they're answering. Here's an ideal proposal on that, considering optimized sections on the form and different ways to present some questions: Form Redesign (PDF, 66kb)
I am attempting to adapt this to mobile and it's unusable.
I think that with the improvements proposed, a responsive layout of the same form would work better; but, if we have the chance to know the context on how the users interact with the mobile version, we can work on a specific mobile experience, if it's needed.
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?
Again, I think if we narrow the fields used to ask for personal information we can take advantage on the same Bootstrap form validation states. But also, we need to improve the empty states, providing better hints on fields and maybe adding some helpers next to the fields labels. There is a picture to illustrate this matter:
What about aesthetics? How do you think this form looks? Is there anything we can do to make it feel more complete and polished?
We could use some embellishments on the form, or maybe switch to (or add) material design if there's any need to that (for example, if we face heavy mobile traffic), but without knowing who the users are, it's difficult to understand if a better aesthetic can give them a better experience. For example, senior people maybe would look for a little of skeuomorphisms (having a webform more similar to a paper form), but millennials would look for a more innovative experience. I need more data on this, I think for now it's better to take advantage of the proven usability of the Bootstrap framework, and only tweak it to match the brand guidelines.
Can you outline an action plan to improve this form?
Besides the tweaks I proposed now, I think we need to follow this action plan:
We need more data. And the objectives declaration from the client, we also need user profiling (we can use lean personas) and statistic data from web analytics and previous form submissions; this will be helpful to understand what to redesing and how we can do it.
Complement lean personas with brief interviews and user testing will be helpful, so we can drive original assumptions as research questions and get some primary knowledge about the users.
We need to rework the Information Architecture of the form, by establish the correct labels and copywriting according to the users (maybe card sorting?), so we can avoid potential errors. Also, with this we can determine the user flow and the real need of all questions.
At this point we can work on the interfaces proposals, as wireframes; I recommend here to do some extra usability testing to assure the experience of the new design.
With the wireframes and user flow proved, we can start working on the visual design; at this point, maybe we could work on a design system or UI kit, so we can work more fluently on next requirements.
Hi @Johnsalzarulo!
There's is my answers and proposals to the form issues:
OK, this is a little bummer. Do you think we could arrange some guerrilla usability testing for this, so you could show the videos to the client? (and also get more knowledge about users to do a really user-centered redesign?) There's always some field that's not really needed at first time, and perhaps we can propose a two or three step opt-in process: maybe asking just basic questions to register, and establish a workflow between validation emails and secondary web forms to complete the registration.
BUT, to advance with this, I think we can "virtually" cut down the questions by defining if there's any dependencies between them, showing only the fields that would really use; maybe you can help me by refining this with the client. For instance:
Also, maybe we can ask to the client about the possibility of pull some personal data from social networks or another apps (health, workout and eating habits); it's not a complete solution, but for many users will be a good time savior (If they're in the target. Do you have any user personas to share?).
Finally, there's some usability issues to be aware on the redesign; for instance, Height and Weight questions has the measure unit fixed to Imperial; I don't know if this is because the form is only valid for US and/or UK, but, if is not, we can localize this based on the geographic location of the user (even getting the Zip Code on the same basis), and give an option to change it. Another thing to have in mind is that binary questions would be better presented by UI elements made specifically for that, like radio buttons or switches. Regarding to the birthday field, I prefer not to implement a calendar element over there, considering that searching a date far from today would be really more bothering for the user than just typing it.
I'm also thinking that maybe we can rearrange the questions so the users get better context on what they're answering. Here's an ideal proposal on that, considering optimized sections on the form and different ways to present some questions: Form Redesign (PDF, 66kb)
I think that with the improvements proposed, a responsive layout of the same form would work better; but, if we have the chance to know the context on how the users interact with the mobile version, we can work on a specific mobile experience, if it's needed.
Again, I think if we narrow the fields used to ask for personal information we can take advantage on the same Bootstrap form validation states. But also, we need to improve the empty states, providing better hints on fields and maybe adding some helpers next to the fields labels. There is a picture to illustrate this matter:
We could use some embellishments on the form, or maybe switch to (or add) material design if there's any need to that (for example, if we face heavy mobile traffic), but without knowing who the users are, it's difficult to understand if a better aesthetic can give them a better experience. For example, senior people maybe would look for a little of skeuomorphisms (having a webform more similar to a paper form), but millennials would look for a more innovative experience. I need more data on this, I think for now it's better to take advantage of the proven usability of the Bootstrap framework, and only tweak it to match the brand guidelines.
Besides the tweaks I proposed now, I think we need to follow this action plan: