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
Analtyics (left), PlayMaker (right).
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 ⇗
Clockwise from top left: Icon Strip, Hamburger Menu, Icon Strip with Toggle, Tabbed Sub Navigation.
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.
Color studies.
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 Figma prototype.
Filters Figma prototype.
Filter solutions: Side bar, top bar, pop-over.
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.
Analytics: Before and after unification.
