From Good Enough to Perfection
--
Going back and looking at designs you created often leaves you unsatisfied, more so if the product-market-fit trials get you feedback from users about screens that leave them confused.
We had one such case in one of our products and decided to take a rather long cut to simplify it. I’m writing the result of that iterative processes here.
Our product requires an executive staff member to send treatment plans to patients that includes adding treatment-related information as well as details of how and how much the patient will pay over extended financing period.
The financing & payment plans come as templates already created — which the exec has to choose and co-relate with the treatment he’s sending the proposal for. And, for some reason, the end user keeps getting confused.
I guess here’s why —
When seen in hindsight, our design — what was intended to be minimalistic had ended up being without form and almost dissolving into invisible. The end-user could literally not see.
Second, the controls were not contained in a visually compact area and therefore had no flow of meaning for eyesight.
The fonts were too small, the titles and actual texts were not distinguished and single color variation was unable to create differentiation for the eyes.
So, before even we could proceed to understand the functional lack of clarity here was a visual lack of clarity that could be redesigned. We decided to call that The Aesthetic layer.
Every field in the form is supposed to convey some information so that the user knows what exactly has to entered as input. In our design, the dropdown had names of the plans which the user had to select. The user was not able to make a selection without knowing the underlying details associated with each options. This layer which had the functional lack of clarity was The Communication layer.
And so we formulated our design challenge.
The Design Challenge
The executive staff should be visually guided through the narrative of creating a treatment plan for a patient through various information blocks whose function was evident and where ever he has to make non-intuitive choices he should be able to preview and understand why he makes a particular choice.
Iteration — 1
The first iteration addressed the problems associated with the aesthetic layer. The old design was filled with text fields which increased the probability of typing errors made by the user. So we replaced them with sliders to reduce the chances of any user input errors. As the controls were now contained in the visually compact area, there was a flow of meaning.
Though the elements in the old design were grouped together, it did not bring to notice any clear distinction. Thus we logically grouped the form elements. Furthermore to deal with increasing form lengths we used accordions.
Iteration — 2
Though the output design from the first iteration looked cleaner and aesthetically pleasing we knew we had work cut out for us. Aesthetic redesigns could only help so much. The communication layer was the next thing up for modification. As discussed above, the users were unable to easily attach payment plans to the form. Post further brainstorming we realized — “While making a selection, the user needs to see a preview of what he is selecting”. That’s when we later started developing an interface that best suits our purpose. We added a browse button for the payment plan field which gave the user an option to preview his payment plans in a simple overlay. The further addition of a search option made the selection of a payment plan quite simple and efficient.
An improvement, but we weren’t done yet. We had introduced showing a preview at the cost of an increased number of clicks. The user had 3 clicks — one for the browse button, then payment plan preview, and lastly the payment plan selection. This took us back to the drawing board.
Iteration — 3
Browsing through our library of interactions led us to a solution. The addition of dropdown options when you hover on the search results simplifies the entire process. A preview can be loaded adjacently at the cost of no extra clicks!
Post further scrutiny and a little in-house testing, we were ready to call it a day and put down our pens.
