Role: Concepts, Designs, Graphics, UI/UX, HTML, CSS, SASS
The main goal of updating the survey experience was to create a mobile first approach. Then any user could take a survey comfortably at anytime on any device that was convenient for them. The idea was we would have more potential users since they would no longer be tethered to taking a survey on just a desktop computer. We wanted users to feel they could answer a question quickly, efficiently and be able to go on to the next question.
A multiple choice question is an easy enough experience to figure out on mobile, tap your selection, hit continue, move on to the next question. However, certain questions were a good experience on desktop, did not mean they would be a good experience on mobile. A type of survey questions that comes to mind are the ones we would get that required a rating slider, but the values were far to large for mobile to implement an effective slider. We would solve this problem by having a desktop version still be sliders, while the mobile version of the question would act more as a ‘tap button’ to increase or decrease the value you were looking for.
Another challenge that required solving, is clients would submit a survey question with these large grids, with multiple choice, sometimes images, sometimes requiring ‘other’ fields to be filled out, headers, sub-headers, etc. They didn’t always want to break these questions up, so we would have to figure out a better experience on desktop and mobile. We did not want to show a large grid on mobile, because why. Why would you do that. We decided to break each selection into a grand overview, with each selection or choice to show up in a popup so you were focused on just 1 part of the grid at any one time.
There was even a survey request from a client to do recordings to answer a question to capture inflection and to hear the users thoughts instead of reading it.
Showing proper survey on-page validation proved tricky at times with all the different moving parts of a survey between data, question sets, etc. We opted to always give a header display of the issues with a survey question as well as highlight the area. If we could, and in best case scenerio, we’d also show the error message near the question/answer.
Many question types had to be figured out. What worked on desktop would not necessarily work on mobile when it comes to the user experience. Below are just some of the concepts of what a user should experience as far as look & feel for desktop and mobile.
This project is one of the ones I’m most proud of as well as our CEO and our development guys who were crucial and building these solutions. At the time of updating and building the survey system to be mobile first, we had seen some OK solutions out there and a lot of bad ones. We would go on to iterate, update and change our survey system and questions to this day.