One of the hot topics in the UX space has the Dribbblisation of design. Dribbblisation, as defined by Paul Adams is the process of creating "things that look great but don't work well. Perfect pixel executions of flat design, but they don't address real business goals, solve real problems people have every day, or take a full business ecosystem into consideration". After I read the article, I started looking at design examples with a more critical eye, and I came to the realization that while he was right. However, I also noticed another unwelcome trend where designers would comment on usability issues, but would not take the time to create mockups to show how the design could be improved. After reading this article, I thought it would be a good design exercise to not only comment on the inherent usability issues, but to also redesign the form in a way that would increase its usability.
After looking at the first few examples that were given, there were a few usability issues that immediately stood out. These issues were:
The first issue I decided to tackle was the inability to view answers. I decided that there needed to be a dedicated area where questions could be displayed. In order to do this, I created an area below the form that shows the individual questions, the answers to the question, and a collapsible textbox that informs users as to how they could modify their answers.
Creating an area where the user can see their answers to the previous question.
I then chose to focus on resolving the inability of the user to go back and edit the answers to the previous question. In order to do this, I introduced logic into the prototype so that if the user clicked on a previously answered question, the form would display the submitted answer for that question, and the question number and title would also update. I also modified the progress bar so that when the user edits a question, the top layer moves to the location that corresponds to the selected question while the bottom layer indicates how far in the form the user has progressed. I also made sure that the user would have a smooth transition if they wanted to change an answer before submitting their answers.
Editing a previously filled out answer.
Going to a previously filled out answer right before the submit button is pressed.
I also implemented the ability for users to skip forward to an unanswered question. This was an issue that I hadn't foreseen initially, but when testing my prototypes I found that without that functionality, it was a hassle to go through questions all over again just to get to a question that you haven't answered. I also made sure to remove the auto-submit feature, and instead added a submit button that would allow the user to preview and revise their answers before submitting them.
Skipping forward to an unlocked question after going back to edit a previous answer.
Submitting the survey.
I really enjoyed doing this project, as I haven't done a redesign of an existing interface in a long time. I also liked this project because it forced me to stop giving critical feedback and instead take the time to think about constructive feedback. Going back to Axure and developing the logic that was required in order to create all of the interactions that are shown in the videos above was a challenge, but I think it was worth it as it forced me to gain experience with complicated logic sets and multiple use cases. I would definitely do a project similar to this one in the future.