Redesign feature release modal component

The content was fine. The format was losing them.

What's new

Feature 01

Body text — 14px. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit egestas dui.

Role

Product Designer

Team

Product Manager

Duration

4 weeks

Tools

Figma, WalkMe, HTML, CSS

TL;DR

I noticed a 75–80% drop-off from the first carousel card to the second while reviewing release analytics — before anyone had flagged it as a problem. The PM read the pattern as weak content; my read was that the format was failing, not the message.

A carousel structurally buries anything past position one, forcing a sequence most users won't finish. I replaced it with a tab-based system that gives every feature equal visibility at launch — and it became the new standard for release announcements.

Impact

Measured against a 20% CTR baseline.

5%increase in click-through rate
25%average CTR, up from 20%
1new component — retired the carousel entirely

The Signal

The drop-off was sitting in the release analytics; no one had connected it to the modal yet.

What the data showed

Only about one in five users reached the second card; another quarter dropped before the third. In a feature-release context, that means most announcements were never seen — the reach problem was hiding in plain sight in the analytics.

Reading the signal

A carousel makes a silent editorial call: position one matters, everything after it is optional. With most users never advancing past it, the bulk of each release was effectively unpublished — not because the features were minor or the copy weak, but because the format decided what got seen.

Design

The fix wasn't copy or content — it was changing the mental model from “guided tour” to “at-a-glance overview.”

Changing the mental model

A carousel asks users to commit to a sequence. A tab-based system asks nothing — every feature is visible at launch, and users choose what to explore. The interaction model shifted from “slideshow” to “menu,” and that shift alone resolved the visibility problem without changing a word of copy.

User in control

All feature tabs visible at a glance. Users choose what's relevant to them — no sequence required.

What's new

Feature 01
Feature 02
Feature 03
Feature 04

Feature 01

Body text — 14px. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit egestas dui.

Added real estate

Each tab keeps the same content real estate as the carousel card — plus room for a contextual CTA.

Front-end engineering

WalkMe's out-of-the-box modal didn't support tab navigation. I led the front-end development — writing the HTML and CSS to restructure the component and implement the tab interaction from scratch inside WalkMe.

.walkme-custome-balloon-outer-div,
.walkme-custome-balloon-mid-div,
.walkme-custome-balloon-inner-div {
min-width: 400 !important;
padding: 12px 24px;
margin: 0px !important;
}
 
.walkme-custome-balloon-inner-div {
display: flex !important;
flex-direction: row;
font-family: 'Gilroy','Helvetica', sans-serif;
font-weight: 400 !important;
padding: 12px 24px;
}
 
.walkme-custome-balloon-title {
display: flex !important;
flex-direction: row;
font-family: 'Gilroy','Helvetica', sans-serif;
font-weight: 400 !important;
padding: 32px;
}
.walkme-custome-balloon-normal-button {
height: 40px !important;
font-family: 'Gilroy','Helvetica', sans-serif;
font-weight: 400 !important;
color: #000 !important;
}
 
.walkme-custome-balloon-normal-button:hover {
background-color: #62D84E !important;
}
 
.walkme-custome-balloon-weak-button {
height: 40px !important;
font-family: 'Gilroy','Helvetica', sans-serif;
font-weight: 400 !important;
color: #000 !important;
border: 1px solid #000 !important;
}
 
.walkme-custome-balloon-weak-button:hover {
background-color: #EFEFEF !important;
}

Shipped to the system

The tab-based modal wasn't a one-off fix — it was introduced to the design system and fully replaced the carousel as the standard for all future feature release announcements. Every product announcement now lands with equal visibility for every feature, regardless of position.

What's new

Feature 01

One feature visible at a time. Users had to commit to the sequence to see everything — and most didn't make it past card one.

/Feature Release Modal