Message Settings Redesign

EVERGAGE

Collaboration + Communication | Leadership + Initiative | Strategic Impact | User Centered UX Design 

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: 

1. Poor logic - Users, especially new ones, had difficulty understanding the rule structure and logic. 
   
2. Poor discoverability - Users couldn't find rules or didn't know rules existed.
   
3. Poor UI - the elements and styles were inconsistent and looked broken which caused our users to lose trust in the functionality of the rules.

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

The Story

1. Define + Empathize

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

• CSS/JQuery Selector
  • Contains
    
  • Does not contain

Known Changes

1. Refresh the UI to be more consistent, cleaner, and elevate the style
   
2. Rename the groups and restructure the information architecture so setting up the rules are more discoverable and intuitive
   
3. Make the bounce rule more discoverable and intuitive

2. Discovery Research 

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.

3. Wireframes + Paper Mockups

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.

4. Usability Test 

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. 

5. Designs in Photoshop/Axure

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. 

1. The top level rules were hidden in a dropdown, the before image shows all the categories out to display them, yet by default, device type = web is selected and that’s it. The user needs to click on “new rule” and then a drop down appears. This adds a layer of discoverability. 
   
2. Solution pulled out the top level rules into headers to make those categories visible and also allowed the users to understand the main types of rules that they choose from. 
   
3. Regrouped and renamed the rules to make sense. 

Reorganized and renamed

BEFORE

AFTER

Example of Improving UI and Usability
Adding a CSS Selector

BEFORE

1. Click “Add rule”, Select “Target pages” 
   
2. A dropdown appears, select “CSS Selector Rule”  
   
3. "CSS Selector Rule" radio buttons with input appear. User inputs the code into the input, or selects the other radio button and inputs the code

AFTER

1. Select CSS/JQuery Selector from the dropdown
   
2. Input the code or select the other radio button and input the code.

Redesigned the Bounce Feature

BEFORE

1. Select User Behavior 
   
2. Select Inactivity…. User has been inactive on the page for __ seconds….appears
   
3. Click on second chance

AFTER

1. Select “Bounce” from On Page behavior.

6. Collaborated with Engineers 

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

• Drop downs - arrow sizes varied
  
• All elements
  • mixed of 6px rounded vs no round - changed all to 3px. 
    
  • Inner drop shadows
    
  • Border color / pixel was different

Messy UI 

• Rules weren’t aligned, spacing was inconsistent, extra white space near elements, hover on interactive elements weren’t correct.
  
• Bright blue hover color - changed to 10% darker. (not shown in mockup) 
  
• Padding in dropdown

7. QA

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.