The Company: Evergage, (now SaleForce Interaction Studio) was a cloud based B2B personalization and customer data platform that used data and machine learning to provide cross channel (web, mobile, email, and third party) personalized business solutions to their clients.
Context - The personalized business solutions mentioned were called campaigns. Each campaign contained 3 levels of rules, campaign level, experience level, and message level. I redesigned all levels and this project is focused on the message level.
Problems:
These problems caused user pain and frustration, made it more difficult for the Customer Success to onboard new users, caused users to send in more support tickets asking about the rules, and created potentially dangerous workarounds.
Goal: To make the rules more intuitive, discoverable, and logical.
Impact: Very successful. New and existing users had an easier time discovering rules, reduced the number of unncessesary work-arounds, the Customer Success team was able to more successfully onboard new users, and there were less support tickets about rules.
My Role
Product Designer, Project Lead
The Team
Myself, CTO, 2 Engineers, Support Team, Customer Success Team
Methods
Interaction design, information architecture, usability testing, collaboration, visual design
Tools
Photoshop, White board, YouTrack, Google Docs
To start the project my CTO and I brainstormed and defined the project. We went through the rules and identified the main issues, what we needed to change, and next steps. The rest would be defined as the project went on. I created a doc of the inventory of all the rules across message, experience, and campaign levels and their options.
For example:
Target Pages
Known Changes
This project hit home for me because I was a previous power user of the platform and felt the pain. I had deep product knowledge and empathy for the user. To start my research I talked to our internal users, the Support and Customer Success Teams. We discussed common/uncommon use cases, where users got confused, and any other pain points and thoughts.
I sketched out the use cases, common rules, and thought through the logic. These designs were focused on the information hierarchy and the logic behind the rules. I focused on making the rules more intuitive and discoverable.
The CEO was invested in this project and had ideas of how to solve it. When I got this project, our CEO wanted us to change the rule groups to be - Who, what, where, and when so the rules would read like a sentence and hit the major groups. I did a logic test and the method didn’t match with all the rules.
I tested out my design and the CEO’s idea on our internal users aka members of the Customer Success Team and Support team. They gave great feedback on arrears that were confusing and exposed blindspots. I discovered that the CEO’s approach didn’t work because the terms could have different meanings, like where could be location or where on the page and those didn’t work to be grouped together across all rule levels.
I discussed the findings with the CTO, made edits to the information architecture, and then designed my first iteration.
As I was designing, I kept in mind how changes to the message level rules would affect the other levels. I determined when to be consistent vs different. I also kept in mind how the changes to the UI components would affect other places in the platform.
Once the information architecture was more intuitive I focused on the individual rules and how to consolidate so they were less unnecessary steps and more discoverable.
BEFORE
AFTER
BEFORE
AFTER
BEFORE
AFTER
When the logic and regrouping was at a good point I designed the interface and worked closely with the engineers to work through the technical restraints of the library they had to use. Throughout the design process I had meetings with our CTO, where we brainstormed and challenged the logic and designs.
I identified all the different elements and color coded the doc by the type element. For example radio buttons were blue, dropdowns were green. I documented all the element types and their purpose. Worked with the engineers to make the UI consistent.
Inconsistent styles
Messy UI
I went through each rule and grouped similar UI patterns and then went through and QA’ed each rule variation to make sure everything was lined up. One of the things I checked was the dropdowns. For each of the dropdowns, I looked at the longest option and made the width that length, because there were so many variations, some of the combinations didn’t look ideal, but they looked good enough.