Enterprise Design System

In-App Survey Deep Dive

The Challenge

Create a reusable In-App Survey to track the usability, experience, and efficacy of Con Edison applications along with the ability to view survey metrics.

Requirements

  • Displayed within Digital Factory products on mobile, tablet, and desktop devices.

  • Triggered by the completion of a task within a product.

  • For rating-based questions display a follow-up open text field if a rating is at or below a 3 out of 5.

  • Run 1x per quarter and show to a user until they complete it.

  • Responses collected and analyzed per app. 

  • Product Owners can view responses for their products.

Approach

I decided to conduct a competitive analysis of top survey platforms, explore established UI patterns, and research best practices for designing In-App surveys. During the analysis I discovered the heavy use of emojis and most surveys displayed single questions at a time.

Competitive Analysis

Crazy 8s

I felt like I needed some inspiration so I enlisted help from my colleagues on the design team. I put together a quick crazy 8s workshop where we brainstormed some ideas together.

Prototypes

I selected three top ideas from our crazy 8s exercise and created three sets of functional prototypes based on known requirements and data collected during my competitive analysis.

Set One: Graphic Slider

Set Two: Conversational/Progress Bar

Set Three: Star Rating

Testing

I conducted usability testing sessions with product owners, designers, and end-users of existing applications. The results of the usability testing sessions were:

  • Our internal teams loved the graphic slider however, the end users of the applications felt the graphic slider was unprofessional and too cutesy.

  • End users overwhelmingly chose the Star Rating version of the In-App Survey. They liked the clean uncluttered design.

Component Build

I worked with the engineering team to build the component and ensured the following could be configurable within the In-App survey Component:​

​

  • Title​

  • Number of questions (10 Max)​

  • Questions​

  • Icons​

  • Icon Text​

  • Rules (comments and user response)​

  • How the survey is launched

Admin Dashboard

For Product Owners to view survey results I designed the In-App Survey Dashboard.
Here Product Owners can:

  • View survey results by Product and Quarter.

  • View the overall experience rating of a specific product, and total survey responses.

  • View at a glance the overall usability, experience, and efficacy scores.

  • Dive deeper into individual surveys and view responses on a granular level.

This dashboard displays vital data that can be used to identify usability issues and leverage data to drive product enhancements.

Web App

While overseeing the build of the component and dashboard I created mobile, desktop, and tablet symbols for the Sketch design library and dedicated pages for the Enterprise Design System web app.

Improvements

After the release of the MVP a usability issue was raised.

Usability Issue

If users were selecting a rating of 4 stars or higher, they tended to advance too quickly through the survey not realizing there was a total of three questions, unknowingly skipping the second question.

Solution

The team and I explored solutions, validated the options with users, and adjusted the In-App survey to have a Next button visible at all times to advance through the survey questions step-by-step, ensuring all questions were answered accurately.