Progress Bars give you a sense of place, but in the survey taking experience progress bars can remind you how much longer that survey is going to be. To counter this potentially negative mindset, we repurposed progress bars for a number of clients to distract the survey taker.
Coca-Cola was my favorite theme to work on. We applied a base look and the branding guidelines of the company but we wanted to spice up the progress bar to better reflect the brand. What better than a Coca-Cola bottle filling up with Coca-Cola! We altered the code to fill the progress bar bottom-to-top instead of left-to-right. Using CSS animations and jQuery we also added in some bubbles that brought the bottle to life.
Caterpillar are well known for their earth machines. For the progress bar, we decided to use a bulldozer that would help push the progress bar long. We turned the progress bar into dirt, reversed how it loaded and had the bulldozer follow along.
Client Onboarding Theme
Our Onboarding team at Qualtrics wanted to change up the style of survey taking for new customers to the product. Instead of the basic top-to-bottom survey experience, we developed a left-to-right experience with the question on the left fourth of the screen and the answer options of the right three-fourths. This provided a strong look that was unique to any other theme.
Qualtrics Qflow auto-advance for survey takers helps guide the user through a survey by advancing them to the next question without scrolling. The goal of the Qflow feature is to increase response rates, yield higher quality data, and make for a better user experience.
Qflow and Typeform
A company in Spain named Typeform crossed my path one day and I loved the auto-advance experience they provided. People already hate taking surveys, and by removing the need for them to scroll or providing them more guidance in the survey experience, you could truly increase survey response rates. Answering with your keyboard was also a nice touch to anyone who wanted to get through a survey in double the time.
Though Typeform’s experience is unparalleled, they don’t have many of the question types that Qualtrics offers in its product. Qflow was built around accessibility and the advanced question types Qualtrics offers clients. With a focus on modularity, the majority of the question types were redesigned and recoded to better fit this new survey taking experience.
Matrix Question Problem
In survey design, it’s not just about designing for the experience of the user; you are also designing for another layer: data quality. Designing matrix question types is difficult, especially when you’re designing an experience that MUST be universal across all devices.
Matrix questions had been presented differently on desktop vs. mobile, due to the compression of text within a table on mobile. As a result, the matrix question on mobile would collapse and be displayed in an accordion format. This presented the issue of question continuity from mobile to desktop which had the potential to skew data.
With the breadth of digital devices available for respondents to take surveys on, matrix questions must be presented in the same fashion on all devices. This ensures higher data quality with a lower margin of error.
Users & Audience
The matrix questions needed to be redesigned for a number of users; from the stay at home mom, to the business man; from high school kids, to the not-so-tech-savvy grandma and grandpa.
Users needed a more intuitive and much quicker way to answer a question and move on to the next. The goal was to remove the need for scrolling that the accordion created on mobile, while also keeping the display of questions and answers the same on all devices. Additionally, we needed to innovate a more fluid way to contain answers if the answer option text became wider than the screen width.
Knowing the product team would have to build the final design, we worked at creating something that would be compatible across browsers and have a similar functionality for both mobile and desktop. This would make for a quicker build and integration into the product.
The design team had the task of not only sketching out possible design solutions, but they also were tasked to design for the future of the question type. The goal was a solution that would stand on its own for several years.
The client experience had to be just as important as the respondent experience. The question type needed to be easy to create and reflect the respondents view so the client knew faster how it would look to respondents.
One of the deepest areas of focus was on the experience of respondents. The question needed to be simple enough to understand, while making sure the respondent was able to see all the options. We also needed to prevent any bias in the survey to allow respondents to answer subjectively.
We started with the current design and broke it down into its various pieces; both mobile and desktop. We restructured the question with the basic elements that were needed in a matrix style question. The touch screen of mobile devices was utilized for the question input options. As text doesn’t squish together very well on matrix questions, we used a Facebook Reactions style slider to hide options until the respondent used the slider to select an answer.
Many iterations were created in order to find the most intuitive and simplistic style. We settled on a "Facebook Reactions" style interaction that allows users to press and hold to reveal answer options within a slider. The subquestions were broken down into individual accordions on both desktop and mobile to promote a more single answer look. This would ensure much higher data quality and remove any potential bias from answers being laid out side-by-side or stacked on top of one another.