Active Listening
InMoment - Survey Builder Software

The InMoment Active Listening product is a comment and sentiment survey builder that uses machine learning to prompt users to provide rich, meaningful feedback.

The Team
Executive Team, Product Managers, Designers, Software Engineers, Framer Developers, Data Scientists
My Role
I was the lead designer for the Active Listening product redesign.
2 different screens displaying the Active Listening app.

Who

In this case study, there are two primary users. There are users of the InMoment Active Listening platform (who I will refer to as clients), and the users who will be taking their survey (who I will refer to as customers).

Problem

The legacy Active Listening product needed to be reimagined because customers were leaving vague survey responses that led to meaningless data. Also, clients were requesting their own branded version of the survey, and this was being implemented internally by hand-coding CSS into each survey, making the product difficult to maintain, especially for the technical success team.

Solution

Design a question and sentiment survey builder, that uses machine learning to prompt customers to expand on what they are typing in real-time. We believe this will lead to insightful comments from customers, so clients will get better data to make business decisions.

Discovery

We gathered information from the executive, data science, and technical success teams to learn how clients and customers were using the current Active Listening product.
Findings:
  • The technical success team has been creating the designs with hand-coded CSS for each client.
  • The original prototype had a word bubble that prompted the customer. After testing, customers thought it was someone literally responding to their comments and thought it was creepy.
  • This is an impactful product and a big selling point.

Competitive Analysis

We looked at the survey, email, and website builders for competitive analysis. They were solving similar issues, but on a much larger scale than us. We wanted a more scaled-back solution and avoid building an entire platform to solve this problem.
Competitors:
Wix logoSquarespace logoMailchimp logoGoogle Forums logo

Ideation

I started by gathering notes, brainstorming with the design team, sketching ideas and designing the first round of mockups.
Whiteboards with notes.Sketches with notes.Sketches with notes.

Ideation

Feedback from stakeholders, design, development, as well as some user testing in this project, led to quite a few iterations.
3 iterations of the landing page.
App Landing Page
Clients will now see different services we offer as apps. We went through a few iterations to make each app feel different enough, but cohesive to the whole platform.
3 screens of UI iterations.
Feature Removal
The design team felt that there were too many feature requests that led to over complexity. For example, there were a lot of requests for customization around animations, that did not lead to a better experience or help the functionality of the product.

Design Deliverables

Below are design mockups after receiving feedback and many iterations.
Landing page screen
App Landing Page
After many iterations and collaborating with other designers to get a cohesive experience for each separate app, we landed on a design pattern. The left sidebar has the branding for the individual app while the right tiles keep every app consistent in style and functionality.
Landing screen with annotations.
1. Color Status Bars
As we were designing the other apps on the platform, we noticed they all had statuses. We started this color bar design pattern to visually indicate the status, along with text to make sure we’re ADA compliant. In Active Listening, the blue color represents if it’s active, and the grey represents when it’s inactive.
2. Preview Thumbnails
We found that it would be helpful for clients to see a preview of the active listening bot. This way they can also have a quick visual cue as well as a title.
3. Embed Code Button
One assumption was that clients will be coming to this page primarily to get the embed code for an active listening bot, so we added the “Get Embed Code” button for a quick way for them to copy the code to their clipboard.
3 iterations of preview iterations
Previewing Modal
After testing, we noticed users were clicking on the preview thumbnail to see a larger version, so we added this functionality after.
Survey creation page
1. Survey Builder Preview
As I started designing the UI of the customer-facing survey, I wanted it to look appealing but generic enough to fit on any platform, with some minor color, font, and image changes. The data science team also gave feedback that they wanted a sentiment score to be added.
2. URL Color Grabber
The development team had the idea of the URL color palette builder. It gets all the colors from a URL and creates color swatches for the client to use to make sure their survey is branded properly without having to worry about hex codes.
Animation selection screen
1. Progress Icon Animations
We selected a few progress icon animations for our clients to choose from to keep the customization process as simple as possible. If they wanted their own icon, we included an upload section for static images. The colors of the icons will adjust with the color grabber, so they still keep branding consistency for the client.

Prototype Demo:

I worked with our Framer X developer to create a prototype. This was built before design elements were finalized, but it does display the core functionality of the app.

Conclusion

Once the new platform is released, we’ll be following how our clients are using the active listening builder and how customers are interacting with the surveys. We are also pushed to implement our own active listening survey on the new platform to get feedback from our own clients.
Measurement of success:
  • The technical success team spending fewer hours building and designing active listening surveys.
  • Higher survey completion rates from customers.
  • More clients designing surveys than our technical success team.
  • Richer data from customers to give clients better insights.
Let's Collaborate
Contact Me