Johnsalzarulo / design-challenge

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

WithBetter Design Challenge Submission - Rishabh Sonker #25

Open rishabhsonker opened 5 years ago

rishabhsonker commented 5 years ago

Hey John!

I considered all the challenges you’ve faced as a developer & came up with a few possible solutions to improve the user experience.

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

Although we can eliminate a couple of questions by tweaking the form, I’ll abstain from doing it in my designs, citing specific client requirements.

However, if it comes to implementing a user-centered design process in a real sense, I’d love to mention a few things -



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

Considering the limited screen real estate we have on mobile phones, adapting a form of this size and complexity, as it is, will ruin the user experience.

One of the proposed solutions by several participants is to break it down into digestible chunks. Ideally three - Basic Information, Health History & Current Habits. It works, but there’s a more efficient way.

I propose to break down the form at its core level - Questions.

Without any significant increase in the number of clicks, this approach offers a plethora of benefits like increased focus, ease of use & increase in speed. To further improve the user experience & speed up user action, we need to eliminate dropdowns, excessive scrolling and add visual/logical cues at points of data input.

Example - Showing DD/MM/YYYY where a user needs to enter his birth date in a single text field.



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?

Let’s talk about error prevention.

Users can unknowingly make errors, no matter how hard we try & there’s only so much we can do about it. Our best approach will be to try preventing users from making errors by providing proper signifiers & validation messages.

In case of an error, there should be a carefully designed error message in place to notify the user & aid him in his attempt to fix the error.



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 aesthetics can definitely be improved, considering they have a significant impact on users.

As of now, the form looks challenging to understand at a glance, with too many elements of distraction. For users with lesser attention span, this form can be especially frustrating, making them give up on it altogether.

As I’ve previously discussed in my approach towards this form, breaking it down could greatly simplify it, focusing on one question at a time.

To further strengthen the user experience, we can add a progress bar to keep the user informed about his progress through the form.



Can you outline an action plan to improve this form?

I would start with bringing an actual user to test this form & his feedback will lay the groundwork to the form’s redesign.

Why bring in an actual user? It dramatically increases empathy towards the users, the core of the user-centered design process.

I’ll rework the Information Architecture & divide the form into smaller, more meaningful sections. With an improved IA, we can move to wireframes & further an aesthetically pleasing visual design.

I made a prototype on Adobe Xd. View Prototype.



I would love to thank @Johnsalzarulo for this incredible opportunity, I enjoyed completing this design challenge.