Chudo Loo

Product and Visual Design

Engagio Product Unification

Problem

Engagio’s ABM Platform started as an Analytics product for marketers and salespeople. Soon after, we launched PlayMaker, which was built on a new engineering stack and had an updated user experience and interface.

As the two products were being built in parallel, the amount of technical debt and duplicate work increased. The products needed unification in both engineering and design without alienating the existing user base.

Company:
Engagio

Year:
2018

Audience

Engagio's customer base was split between users who accessed only the Analytics product, only the PlayMaker product, and users who accessed both products depending on their role and task. To maintain customer satisfaction and retention, our target audience was the slight majority of users who accessed the Analytics product most of the time.

Role

I led this project from end to end working alongside the product and engineering teams. I conducted the user research, mocked up the user flows, produced the visual and interaction designs, built the prototypes, and delivered designs and specifications to the engineers while assisting with CSS.

Approach

To ensure we were unifying two experiences while improving the overall experience of the combined product, I broke down the differences of the two products into key areas to test each variable separately:

  • Navigation
  • Colors
  • Date Range Selector and Filters

To gather feedback, I interviewed several customers as well as internal users. I built prototypes of multiple options of each key area using Invision and Figma and asked participants to go through basic flows for areas that required user interaction. I then asked them to rank their preferences and provide feedback regarding the various options.

Design

Navigation

I tested a few navigation options — two would be familiar to existing users and two were variations of other established navigation patterns.

Prototype:
View in Invision 

Color

Although color is highly subjective in terms of user testing, the feedback helped me choose a palette that sat well with most users and still maintained meaningful visual cues.

Date Range Selector and Filters

The Analytics product allowed users to view their data within a date range, and users could also filter their view with filter criteria sets. This view control would need to be adapted to work in the PlayMaker experience. I tested three options — a side bar solution, a top bar solution, and a pop-over solution.

Prototype:
View in Figma 

 

Date range selector and filter in Analytics experience.

Date range selector and filter in PlayMaker experience.

Outcome

The final designs reflect the users’ feedback and unifies both the data consumption interactions of the Analytics product while maintaining the multi-columnar, task-oriented experience of the PlayMaker orchestration product. At the time of this writing, the engineering team is building out the new unified design and experience.

Colophon

This portfolio website was designed and hand coded by Chudo Loo on a MacBook Pro in San Jose, California, July, 2015. (Last updated March, 2018.) The HTML and CSS has been enhanced with: