WalkMe Walk-Thrus editing

The mission: ‘Customize on Screen’ re-design due to issues with its intuitiveness and efficiency:

‘Customize on Screen’ screen
WalkMe is a guidance and engagement tools like pop-up balloons, notification bars and call to action buttons guide your users through processes until completion on your website or application.

The current layout in WalkMe editor is comprised of 3 modes of editing the walk-thrus steps:

  1. When creating a step (very limited)
  2. When selecting “edit” on a step in the list (all the options are available, but there is no view of the editing changes as a result of an overlay window and BG)
  3. When selecting “Customize on screen” within the edit mode I’ve previously selected (only relevant options that I can see the editing changes)

Upon reviewing my findings, I would like to share with you a quote from an editing book called “In the Blink of an Eye” by Walter Murch:

“when you go to a doctor and tell him that you have a pain in your elbow, it is the quack who takes out his scalpel and starts to operate on the elbow. Then you wind up with not only the original pain but probably a pain in your wrist and your shoulder as well. Whereas an experienced doctor studies you, takes an x-ray, and determines that the cause of the pain is probably a pinched nerve up in your shoulder — you just happen to feel it i your elbow. The pain in your shoulder has been “referred” to the elbow. Audience reactions are like that. When you ask the direct question, “What was your least favorite scene?” and 80% of the people are in agreement about one scene they do not like, the impulse is to “fix” the scene or cut it out. But the chances are that that scene is fine. Instead, the problem may be that the audience simply didn’t understand something that they needed to know for the scene to work. 
So instead of fixing the scene itself, you might need clarify some exposition that happens five min earlier. Don’t necessarily operate on the elbow: instead, discover if nerves are being pinched somewhere else. But the audience will never tell you that directly. They will simply tell you where the pain is, not the source of the pain.”

My first thought on how to approach the problem of intuitiveness and efficiency in ‘Customize on Screen’ is to inspect the flow before we reach that step. So I began thinking of possible solutions which combine the modes together, to allow the user to have all his options in one place and see the editing changes he makes.

My suggestions

From the existing list screen (afer creating steps):

User will click “edit” on a step and reach the combined 2+3 screens (‘Edit’+’Customize on screen’):

The same screen with the full range of options, without anything blocking the user’s view. This way, the user can see the changes they make in real-time.

Let’s dive into the panel

Those are the changes I made after glimpsing through the appearance panel, the same options that placed in the old ‘Customize on Screen’:

Left-New design, on the right-Old design

1. Combined “spotlight balloon” & “ highlighters”. 
I found the ‘spotlight’ name confusing. When I entered that option, I found out that it’s another way to highlight the element. Therefore, I decided to combine them under the same name, and inside, tell them as they are- “Frame” & “Overlay background”.

2. Originally, the non-active options are in grayed-out, i’ve decided to hide them in order to reduce the noise and confusion. The configurations will reveal after checking the toggle button of the related subject.

The old panel configurations looked and behaved the same (it’s only small selection but it’s consistent):

Old panel
New panel

3. Changed “Opacity” & “Weight” configuration from +/- buttons, to a scroll bar (Make adjustments to a value throughout a range of allowed value, also use for fine-grained control).

4. Divided position & size that were under the heading: ‘position’, as they are two different configurations.

5. Switched the toggle to a checkbox in the “Hide when hovering over element” option because in this interface I decided that toggle button reveals more configurations when checked, and this is not the case.

Old version: action buttons located at the entire length of the footers panel

6. Relocated the play button from the footer panel- to main heading of the panel, the play will function as a play to the entire sequences of steps. In the old version it played the current step only.

The user will want to select “play” on a specific step only regarding the animation he created, therefore, next to the configuration itself, where he adjust the animation, he will have a play button as well.

7. Moved the action buttons only under the step configurations, as it applies to it. Before that, it was stretched and referred to the entire layers of the panel- to the entire steps the user created.

By the way, I highly recommend you to watch this video talking about forms (the second half of the lecture in particular):

I really enjoyed working on this challenge! Since it was no more than 2–3 hours challenge, I needed to stop myself at some point. But of course there’s more to be done, UX wize & UI wize. As they say — Challenge accepted!(;

Best regards, Keren