The Magic Wand Makeover

Erin Kennedy
nCino Design
Published in
4 min readMar 6, 2021

How nCino’s Product Design Team Responds to Customer Feedback

Most nCino users are likely familiar with the “Magic Wand” button. It’s the often tiny, unrecognizable icon that appears in the top bar next to “Continue” and triggers the dropdown of the Tools & Actions menu.

Original Magic Wand Icon

The feelings users had toward the appearance of this button ranged from mild ambivalence to serious frustration. Despite being one of the most powerful buttons on the page, it was one of the smallest and most difficult to find.

We heard the feedback, had noticed the issue ourselves, and were equally impressed and frustrated that such a small element could cause so much difficulty.

Gathering Feedback

A core tenant of agile software development and design is that software is never truly finished and can never be perfect. There’s always something that can be improved upon, but the only way you find out what those things are is to build and release software and then wait to see how people end up using it. We collect data and feedback on how the software holds up “in the wild,” and then we use that information to iterate and create a better version to release next time.

All the work that went into the update of the Magic Wand icon is a perfect example of this process at work. It’s been part of the product ever since our initial UI overhaul, and we’ve received ample feedback since then about how our users feel like they need to play “Where’s Waldo” just to find this tiny icon on the page.

We’ve learned from talking with our customers that there’s a good amount of confusion and frustration with what should be a helpful and straightforward part of the product.

Photo by Agence Olloweb on Unsplash

We could have alleviated the size and discoverability concerns by simply making the magic wand larger or replacing it with a more substantial icon.

But in addition to the size complaints, we also heard stories from our customer about office culture and inside jokes sparked by this contentious little icon. Some users don’t think it looks like a wand at all and refer to it lovingly as the “magic toothbrush” instead. Others get a reputation at work for voicing their frustrations with the wand every time someone mentions putting an action inside the wand’s dropdown menu. One user in particular was gifted a giant, light-up wizard’s wand during his office’s Secret Santa exchange so that he would finally be able to find where the wand was.

Wands and Wand-Shaped Cookies Celebrated by nCino Users

Although it was born out of a frustrating experience, we love hearing these stories of our users engaging with the product in such fun and playful ways. There is a risk that the banking and software fields can be perceived as dry and serious, so working a little “magic” into the product lends a bit of personality to the software that hopefully enhances and enriches the experience.

Redesigning an Icon

Our challenge was to solve the wand sizing issues, but in a way that maintained its quirkiness and our users’ connections to it, rather than simply replacing it with a completely new icon that didn’t have the same personality and playfulness.

Playful Shapes, New Gradients, and Smooth Transitions Keep the “Magic” in the Wand

Our wand redesign included turning the icon into a button, with a background and border to help make it discoverable and obviously-clickable. The icon itself is entirely new, redesigned to exaggerate its magical qualities.

It’s one of the most powerful buttons in the UI — it allows users to take multiple actions and launch complex tools — so giving it special treatment is fitting for its important role. And, as something that users interact with regularly, it is prime real estate to add some delightful details that engage users when they encounter it.

In addition to the background color transitions and the wand changing colors when you hover and click the button, we have some fun, sparkly animations that we plan to incorporate in the future. We hope that these updates not only solve the sizing issues with the wand but that they also introduce a some excitement and magic into our users’ nCino-powered work day.

Base Button and Hover State

--

--

Erin Kennedy
nCino Design

Senior User Experience Strategist at nCino, designing software that's innovating the banking industry— http://erinaissance.com