Fixing a Frustrating Modal

Timeline

3 Days

Role

UX Designer

Tools

Figma, SurveyMonkey

While working on the MTV project at Innovative Systems this summer, I kept running into the same frustrating modal.

My Review

Every day for two months, I’d try to exit a page, and this modal would pop up asking if I wanted to “remain on the current screen.” I’d click "Yes" instantly, thinking, “Yes, I want to leave,” only to get stuck on the page. I’d have to slow down, read it properly, and click "No." Half the time, I ended up forgetting what I was about to do in the first place.

Thankfully, I wasn’t alone. A fellow intern felt the same way. During one mentoring session, a senior designer saw me stumble on that modal so many times he finally asked, "Have you thought about exploring how to change it?"

I have never been so happy to work on a modal in my life.

The Constraints

My immediate thought was, "Let's just add a 'Save and Exit' button and call it a day." I even wondered how veteran designers hadn't thought of it...

Then, I learned about the constraints. A developer explained that this was a global modal, meaning the same pop-up was used everywhere in this massive enterprise software. Adding a "Save" function would mean custom-coding it for dozens of different scenarios. On the word of an intern? Probably not going to happen.

The challenge became much clearer: could I fix this frustrating user experience just by changing the words?

My Process

Having learned a few things during my internship by now, I knew not to just jump into Figma. I started with some groundwork.

Figuring out why it was so frustrating.

It broke a cardinal rule of UX: it made you stop and think. The "Yes" and "No" buttons didn't label the action the user wanted to take; they answered a question. My first goal was to fix that.

Looking for best practices.

I did a quick check to see how other products handle this. I particularly liked Outlook's approach when deleting an email. The solution was obvious: use buttons that simply say what they do.

Sketching and Ideation.

Armed with this insight, I sketched out a bunch of new options, playing with different headers, body copy, and button labels. I eventually narrowed it down to three. But this was going to impact thousands of users who have decades of muscle memory with this modal. Surely they wouldn't let me change this just because I asked?

Sketches of different modal designs — Exploring different wording and button layouts.

Quick Testing.

I knew a budget for a massive usability test was unlikely, so I did the next best thing: I put my top three designs into a survey and sent it to over a dozen colleagues. I knew it wasn’t perfect science, but I needed data that wasn't just my own opinion.

Sketches of the final three selected designers. — The Final Three.

Results and Handoff.

The results came back quickly: the “Stay and Leave” option was the clear winner. The "Yes/No" option, even with a clearer question, came in last.

Bar graph showing survey results — Survey results showing the winning option.

The Solution

With that data in hand, I presented my findings during the UX-GUI meeting. After getting approval, I wrote a Jira ticket for the engineering team, outlining my problem, process, test results, and the recommended copy. The day was saved.

Key Takeaways

Balancing Convention and Clarity

A designer has to walk the line between preserving convention for veteran users and making things right for everyone. A valid concern that was brought up was the impact on experienced users. It's a tough balance, but clarity and intuitiveness should ultimately win out.

Small Changes, Big Impact

Small changes can have a huge impact. UX isn’t always about large-scale redesigns. Sometimes, finding and removing those small pebbles from a user's shoe can bring the most meaningful change.