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.

My Role

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.


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.


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.


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.



"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."




"The answer selector should be off the scale until the respondent answers, to avoid leading the response."




"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."



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.


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.


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.


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.

Usability guidelines for conforming to modern digital standards.
Accessibility guidelines for meeting user needs and providing value.