OnSurvey 2.0
Re-launching a digital survey solution as a responsive application for capturing interactive feedback across devices
Case Study
Role UX/UI
Platform Web/Responsive
Audience B2C
Timeline8 months
Collecting New Types of Customer Feedback
As mobile devices and touch interfaces became increasingly popular in the digital landscape, customer experience consulting firm ONR faced growing demand for collecting new types of customer feedback.
Brands looking to adapt to shifting audience preferences were seeking new insights into user behaviours and mobile experiences, but they needed to reach out to their customers in new ways.
To offer brands these new insights, ONR needed to strategically evolve its digital research solutions.
Project Goals
Responsive Interface
Reduce barriers to survey participation by creating a device-responsive user interface
Touch Interaction
Increase survey engagement rates by capturing responses from touch and gestural interactions
Usable Navigation
Enhance survey experience by adding navigation controls based on business rules
Capturing Interactive Feedback with a Device-Responsive Interface
The solution focused on re-designing ONR's primary data collection solution, OnSurvey. This included creating an engaging user interface that aligned with modern design standards, and updating the product's functionality to capture behavioural data like first-impression sentiments, visual hotspots, interaction sequences, and time-based tasks.
UX/UI Designer
As the sole designer collaborating in a team of 3, I lead the user experience, user interface and front-end development efforts for OnSurvey's re-design, focusing on business requirements, competitor research, design accessibility and developer experience.
My Team
Project Manager
UX/UI Designer
Back-End Engineer
My Tools
Expression Design
Photoshop
Visual Studio
Azure DevOps
My Tasks
Requirement Definition
Competitor Analysis
Task Flows
Wireframes
Mockups
Front-end Development
Designing from Continuous Feedback
The design process for OnSurvey followed a comprehensive and user-centric approach, starting with a thorough analysis of existing survey solutions and business requirements, followed by an exploration of different interface designs for standard question types with a focus on responsiveness and accessibility.
Throughout the process, I relied on continuous design reviews and feedback, to ensure that insights gained from research and testing were actively incorporated into the evolving design.
Market Analysis
Since digital questionnaires were common and many solutions already existed, I started the design process with an exploration of survey interfaces and design patterns used by top brands. This ongoing market analysis informed product design throughout the entire project.
ONR's competitors included marketing research firms like Medallia, InMoment, Qualtrics, Foresee and Opinion Lab, as well as popular online survey tools like Zoho Survey and Survey Monkey.
User Feedback
Since OnSurvey was intended for use by a general audience, creating end-user personas was not very useful in this case. But analyzing user feedback from survey participants revealed key details about common usability issues with the current survey design, and general barriers to survey participation. This gave me a good starting point for the design ideation process.
Diary Studies
While general goals for OnSurvey's interface design were clear, it was also important to understand the questionnaire design process. I conducted informal interviews with ONR's research staff and examined self-reported diary studies about their typical workflow for a research study. This revealed important considerations about content flow, question types and business rules.
Technical Requirements
To plan appropriate in-survey navigation, I collaborated closely with the Back-End Engineer to understand the logic flow for a typical survey, including skip logic options that created a custom experience path through the survey based on a respondent's answers.
Sketches
Initial specifications provided to me by the Back-End Engineer identified the standard question types required for basic functionality of OnSurvey. I iterated on how the new interface for these question types might look by combining common UI elements for data input with the business rules identified during the research phase.
Wireframes
Following the priorities set by the Project Manager, the first wireframes addressed closed-ended question types with basic answer selection options, like single choice, multiple choice and matrix. I focused on responsive layout and accessibility.
Next, I wireframed open-ended question types like text, number and percentage. Here I focused on interactive controls that allowed respondents to enter data using touch and gestures.
To make the technical development of OnSurvey more efficient, it was also important to consider the developer experience. I proposed a sidebar feature that aimed to improve the product testing workflow by allowing the Quality Assurance Engineer to visualize database information while interacting with the survey interface.
Prototypes
Wireframes and roughly coded prototypes were shared with the internal research team for usability feedback throughout the design process. I collected feedback and made design improvements based on evolving priorities for the project.
Learnings revealed that content sequence, default answer selection and predetermined interactions can all have a measurable impact on survey experience and response quality.
Feedback
Accessibility
"The selection button is way too small. It's hard to see what I've selected. The entire box should be highlighted if an answer is selected."
Before
After
Neutrality
"The answer selector should be off the scale until the respondent answers, to avoid leading the response."
Before
After
Usability
"If slider automatically [snaps to values], then respondents may not actually put in the right number they wish to use because it's too much work."
"Entering the number would be easier for choice quantity type of questions, sliding would be more time consuming."
Before
After
Style Guide
Recognizing the business need for a neutral approach in collecting customer feedback, it was important for OnSurvey to offer a baseline option for a professional appearance. Using ONR's own branding, I created a style guide to define this appearance.
Mockups
OnSurvey also needed to have a flexible look & feel, allowing ONR's engineers to customize surveys according to specific branding needs for each client. High-fidelity mockups helped to demonstrate OnSurvey's colour theming flexibility.
Environment
I developed OnSurvey's front-end using Visual Studio as the primary development environment. I created responsive HTML layouts styled with the Bootstrap CSS framework, and added interface logic and behaviours using custom JS and several pre-built plug-ins, including the D3.js library which allowed certain question types to display visual feedback in response to user interactions.
Deliverables
Templates for survey forms and input components
Style themes and client branding
Responsive layouts grids with Bootstrap
Dynamic charting with D3.js
jQuery behaviour and DOM manipulation
ASP.Net controls for server-generated content
Identifying Opportunities for Future Improvement
As OnSurvey continued to evolve in order to meet new project requests and branding needs, so did the design process. This provided ongoing opportunities to improve the product.
To help evaluate OnSurvey's interface for ease of use and accessibility, I created a set of criteria using Nielsen's usability heuristics and W3C's accessibility guidelines. I used these criteria regularly, to identify missed opportunities and to suggest usability improvements for future re-designs.
