Role: Concepts, Designs, Graphics, UI/UX, HTML, CSS, SASS
Project Goal
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.

Sketches exploring survey questions and possible mobile solutions

Project Challenges
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.

Left: Old non-mobile survey design. Right: Mobile first approach to new survey designs.

Enlarged rating slider on desktop and its tap version on mobile.

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.

Exploring what a grid/table survey question could look like on mobile.


Table / Grid example to show how fonts should resize, how columns should adjust and when the mobile version should kick in.



Example of a grid based question and answer on desktop.


Example of a grid based question and answer on mobile.

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.

Example mobile voice recorder concept

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.

Examples of validation in survey questions on desktop and mobile.

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.
Rank in order on desktop and mobile
Disable columns in grid on desktop
Grid based question on mobile
sticky header and footer on desktop
Sticky headers on mobile
sticky headers on desktop
Sliders equal 100% on desktop
Tap to rank on mobile
Conclusion
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.
Back to Top