I'm an UX Designer/Product Designer based in NYC
QuickEdit.png

UX Project: Strategy Quick Edit

UX Project: Strategy Quick Edit

 
 

role: ux LEAD designer

TOOL: SKETCH, INVISION

Team members

Team members

In our platform, we have two separate tabs for seeing insights and taking actions. You can make edits in campaign’s module after analyzing the reports in another tab. The product team consider they are two separate actions while users consider it as one. The user behavior is to open a tab for the performance report, and then open a new tab for strategy editing. This action repeats at least 20 times a day. 

How can we help them to streamline the workflow? 

One of the constraints of this project is that the data is being pulled different services for the two tabs and we have a lot of tech debt in the platform. So it would have taken more than 6 months efforts to combine two tabs. It is not in the consideration for the time being so we were looking for a short-term solution.

Product Manager scoped this project as a small front-end improvement project. 

Regardless of the technical constraints, our goal was to increase the C-SAT score from 2 to 4 for this experience. 

Hypothesis

I set up some 1:1 interviews with users to better understand what information causes them to change the strategy settings, and what settings they were changing most frequently. I learned that users only touch 4 settings when switching tabs. The 4 settings are: Goal value, budget, min bid and max bid. 

So our hypothesis is if we provide the ability to let them edit this 4 basic settings on the reporting screen, they don’t need to leave the page. 

Design Studio Session

I worked with PM and engineer to brainstorm some ideas. How can we display the 4 settings on a crowded screen like this? 

Brainstorm Sketches

Brainstorm Sketches

V1

The first idea is to add the 4 inline edit fields in the table. The 4 fields are adding the burden to horizontal scroll. However, we have a column picker for users to customize the columns. Not a deal breaker. 

The feedback from engineer is that this requires backend efforts to pull the data in the table which takes a few more sprints than we targeted. I’m not particularly hanging on this idea because I think there are better ones.

V2

The second idea is that when you click on the strategy row in the table, the 4 fields show up on top of the table. Take some advantage of the only empty space on the page. But it can cause some usability issues, if user scroll down to the page, they can’t see the 4 fields on top any more, they have to scroll back to edit it. 

v2.png

V3

Then I thought about by clicking the row, it could bring up a modal with these fields. But how is that different from jumping a page to another. The key is to stay on the same page.

v3.png

V4

So a pop-over came to my mind, it won’t take too much space and also users can still access the performance information they need.

We had 5 1:1 user tests with the traders and we learned that users also want to see some of the campaign metadata as well, (campaign budget and spend) but that information doesn’t need to be editable. Users like the pop-over because it’s small and they can still see the information while they are editing. 

Icon Exploration

We also tested some icons with users. The users associated the pencil icon with editing, but they expected that when they clicked on it, it would take them to a new page — the same existing behavior. 

Users did not associate the next two icons with editing and were confused by them.

Users liked the last icon. They recognized the pencil icon as edit, flash icon as quick. In the experience, they can associate this icon with opening up a pop-over to edit strategy quickly. Since it’s a new icon, I added a tooltip when hover over. 

V5

In this version, I took the feedback and added the campaign metadata along with the strategy information.

I also considered error handling here. Since the platform could tell users what’s wrong in realtime, I selected an inline error pattern in order to give users realtime feedback that is also relevant to where the user is taking action.

For the first time users, we created a onboarding step by step tooltips for notifying the users the new feature.

Feature Feedback

After this feature get released, we got many positive feedback. Users are very satisfied with this change, and they are using it frequently. It is a small change in the UI, but brought big impact. 

  • It is a huge usage feature - 2200 clicks within a month

  • The CSAT score went up to 4

  • “This is really epic!”