You know the feeling.
User data suggests that you should tweak the onboarding flow a little. Your invite user screen definitely needs improvement. And you’re downright embarrassed about that stats section you designed 3 years ago. Not to worry—you got this. You can easily push an update to fix this, right?
But if it’s in the nascent stages, your product is probably evolving rapidly to meet market demands and changing conditions, your engineering team is resource-stressed, and your sales team is rallying everyone to improve the numbers. In the middle of all this, it’s understandable if improving UX isn’t always on the top of your stakeholders’ minds.
“Treated unwisely, modal windows can frustrate users.”
Any idea to improve design is weighed for its cost against its apparent impact (sales, more users—mostly sales). And your passionate monologue of the real cost of bad UX fails to impress.
It’s a matter of prioritizing—do we ship critical features or fix minor annoyances for users? We’ve all been there.
But then it’s the designer’s job to find creative ways to fix any small issues before they bubble up into something serious.
“Wait, they said minor annoyance, right?”
When the design team here at Chargebee faced something similar, we knew we had to find creative ways to convince them.
Chargebee’s web app is sophisticated, to say the least. You have thousands of users interacting with several aspects of the app on a daily basis. With multiple engineering sprints happening at the same time, it’s not often we get a chance to sneak in improvements. What would be the one thing that we could do to make the biggest impact on the user experience with the least strain on engineering?
Enter modal windows
Yeah, modals. Ta-da!
“Yeah, yeah. Change the plan, but what a nice-looking popup.” –Everyone
We wondered if an adaptive, flexible, all-in-one modal design that can be easily re-used throughout the app would have a chance to improve a big part of the user experience. This might seem a little anti-climatic. We thought this was a random idea at first, too.
Why modal windows?
I know the notoriety modal windows get. Treated unwisely, modal windows can frustrate users. I was one of those designers who avoided using modals windows as much as possible. But I’ve since mellowed my position. Modal windows carry context to the parent screen and we can use a consistent pattern for similar actions. And with modern tools like Flex, we can create a flexible design that adapts to different types of content.
Both of these are from the same modal framework.
We also designed the modal to be responsive, keeping in mind Luke Wroblewski’s now accepted standard on one-handed mobile interactions.
We set out to study all kinds of existing interactions and input areas — anything that can be pulled out of the interface and pushed to our new modal. This gave us an opportunity to provide a familiar experience for our users while fixing a lot of those tiny issues.
To make our case stronger, we hacked together a prototype showing how easy it would be for developers to build new modal windows with just a few clicks and very little code. We hoped that the adaptive design along with quicker turnarounds for engineers would make it easier for us to convince stakeholders. It can easily make a big impact while keeping costs low.
Quick prototype showing the possibilities of the modal window system.
And it worked! The stakeholders could visualize how versatile the modal was and the developers loved it because it was easy to feed in parameters, which helped us get a buy-in.
In the next stages, the engineering team created and pushed new interactions to the modal in record time, and from a design perspective, we were able to fix a lot of ungainly interactions in the app. A win for everyone.
Of systems
I‘ve always been aware of designer bias, and I know that being a better designer is to consider the limitations of other functions and understand the real needs of the product at a given point. But then, these limitations force you to be more thoughtful, and they drive you to present the best possible version of your solution. And chasing a random idea proved to be fruitful.
Rather than designing modal boxes with narrow use cases, we ended up building an entire system of modals. And systems are cost effective. They force you to be considerate of deployment and other functions, and they’re just a better bang for your buck.
“Systems force you to be considerate of deployment.”
When you own user experience, you also own a part of the product. As a product-owner, your prime motive is to maximize the value of your product. And I’ve learned that designing versatile systems is one of the ways you can do just that.
How are you learning to be a better designer? What was your modal window? Tell us on Twitter: @InVisionApp.
This post was originally published on Medium.
from InVision Blog http://blog.invisionapp.com/modal-window/