B2B Platform: Campaign Troubleshoot
role: ux designer
TOOL: SKETCH, INVISION
DEVICE: DESKTOP
TIMELINE: 3 SPRINTS
Background:
When we talked to users, we learned that traders - that’s our main persona, the person who is on the platform day to day, spend a lot of time troubleshooting. That is, trying to identify where there is a problem in their campaign, and why the problem is occurring. This is one of the biggest pain points during the user journey for campaign management.
Our platform doesn’t offer a trader many tools to help solve these problems so Traders spend a lot of their time finding out why their campaigns are not spending. We understand surfacing information about this will be extremely helpful for the traders and will help them solve the problem quicker.
Our goal is to reduce the steps of troubleshooting by 30% and for users to identify a problem in less than 25 seconds.
Problems:
First, we reviewed support tickets and identified the most frequent issue types for no spend behavior. These issues can be grouped into 3 categories:
A single issue that can cause multiple campaigns to not spend
A single issue that can cause a single campaign to not spend
A single issue that can cause a single line item under a campaign to not spend
So here is the design challenge: How to surface issues at different levels?
With our design principles in mind(straightforward workflow, empower with insights, be transparent, keep user informed), my design goal is to expose enough information for users to identify issue, and also give them easy access to the secondary information they need to fix the issues.
Brainstorm & Ideas
I facilitated a design studio invited a cross function team including product managers, engineers and other designers to brainstorm a workflow that surface the issues at different levels.
We saw a lot of ideas around different display of the alert and notifications.
Design Studio Sketches
V1
The team is in the process of building a design system. We have some direction but nothing set in stone. During the discovery phase, I’m trying to build a pattern that could work for many cases.
The idea here is to have a big notification on top of the campaigns, using the design pattern that already exists. While I’m creating the design, I realize this is not going to be scalable. Because the campaign has multiple issues, how would that display? Show one at a time or stack the notifications on top of on each other?
This is too much information to stack together; during usability tests, users missed the top level issues and focused on the red warning icon.
This design also failed to deliver the insights here, which against our design principle: Empower with insights
V2
Based on past research, we know that users want to know what’s broken, why it’s broken and how can they fix it. Having the design principle Straightforward the workflow in mind, I want to find a pattern that can contain all the information above.
I picked card to display the issues because as an information container, cards hold most of the elements such as text, pictures, links and so on. Based on the content, it can adapt its size to different devices and screens. Also it is a mainstream modern pattern that users are familiar with.
Using a card pattern to display the top level issue types on top of campaigns is to encourage users to solve these first.
Adding the health check icon in the table will help users quickly identify which campaigns have spend issues. The red color will drive attention and the different shape of the icons can serve people who has color deficiency as well.
Once you click on the icon, it triggers a modal pop up that displays a single campaign health checklist.
We wanted to get some feedback from users to test ideas. So we set up 6 user sessions.
They understood the hierarchy of the issue types.
Most of the users first noticed the health checklist icons rather than the cards.
They like the cards, but they thought it’s a summary rather than an actionable item.
So how can we guide users to notice the cards first? What is the visual hierarchy that we can do here? And how can we make the card looks more actionable?
V3
In this version, I:
Added a header for the cards to inform users what information are they looking at.
Added the red warning icon in the card to catch the users attention.
Made the link more obvious, so that user would more likely to click on it.
Made the background color of the cards a little dark to make the card section stand out more.
Users did notice the cards first, and by clicking the blue link instead of going to the health check icon individually. However, we learned from the users’ feedback that deals and other issue types can have really long names, so this pattern does not solve for scenario.
The long name was something that I haven’t considered into the card pattern before. I asked the PM to help me pull out the average length and longest names in the system, so I can try it on the card pattern. The longest name did break the pattern.
V4
The idea is for users to quickly identify the issues at the top level, but also making it scalable to fit across issue types. So I took a step back to think about what are the key information to surface first. Displaying that big trunk of information on the card is definitely not ideal. Users usually don’t read long block of text and they won’t associate this long text to their deal or creative names. So I surfaced the “where is problem occurring” first, and then once you expand the card, you will get full information.
Users immediately identified the top issues by seeing the warning icon and 2 issues next to it. They clicked on the carat to open the card. Once the additional information is expanded, they pointed out that the blue link could take them to the page to fix issues.
This pattern can take any length of the names, and it’s intuitive. All 5 users identified where there is a problem, and why the problem is occurring in less than 25 seconds. This is ready for delivery.
Project Challenge - A real life “ Chutes and Ladders”
This project is full of challenge. A lots of decision pivoting, missing product requirements, stakeholders involved at different times, paused the project to on boarding 3rd party consultant and so on. It takes a long time for everyone to be on the same page.
Next Step
The next step for me is to think about if traders are not in the platform, how can we notify them there is an issue and also think about how can we help them actually solve the issues rather than just surface it, maybe by providing recommendations or automation.