Tips for Making a Simple Wizard Feel ALIVE!

Simple wizards don’t have to be boring.

Though I'm a fan of wizardry, when I say "wizard," I'm not talking about Merlin or Dumbledore.

There are plenty of cases when I might consider this guided flow, but at the core: you have a lot of information to gather from a user... So, how are you going to ensure they actually get it all to you? (And not bail in the middle!)

When might one create a simple wizard?

• Onboarding a new user into a product that requires some details from you first—think sign-up flow

• Marketing flows for opting into a service or a product—think giving your email for a newsletter

• Creating a personalization experience—think profile building for social media\

And, of course, here at Township, one of our favorite things to do is create a prototype for an idea that hasn't been made real yet!

When we are in the discovery phase of a new product, working to understand a client partner's ideas, we have a Township philosophy: Don't over-architect technical solutions before our partners feel confident there is a there-there. 

When playing with new ideas that follow a wizard-like flow, creating something that feels real can be very telling. Enter Figma for meaningful, high-fidelity prototyping without any code just yet. So what might something like this look like, you're asking yourself? Well, good news, we've made a fun visual example below paired with some design tips to illustrate how you might bring the small steps in a simple wizard to life in a big way.

Go beyond “if this, then that…” with PROGRESSION

Logic is critical to progression in a wizard, but it can also be made to feel active rather than simply functional. How?

TIP: Subtly change background color from step to step, gradually indicating a sense of progression from one step to the next.

TIP: Create a clear delineation of progression between the actual questionnaire flow and the resulting information by establishing clear visual cues between the two sections of the flow. 

TIP: Shift or transform background and secondary graphics to indicate a transition between steps—this could be as subtle as a slightly-moving background texture or as bold as playful illustrations.

Create movement with INTERACTION & ANIMATION

Movement and interaction can support the feeling of 'completion' for added value in a wizard. How?

TIP: Establish a sense of interaction throughout by creating subtle transitions and animations on elements you want a user to tap or click on, like buttons and cards. 

TIP: Connect the user's selection with the result in a transition that reinforces a user's choice.

TIP: Use animation to bring in supporting information like charts/graphs so they appear when relevant and catch your attention.

Develop a two-way conversation through CONTEXT

Language and knowledge of what a user might be feeling as they move through the wizard can catapult or halt an emotional connection to the experience. How?

TIP: Know your user and what language might make a question or input field feel more personalized and human rather than transactional.

TIP: Add additional help text or information for fields when it may not be totally obvious what you're asking.

TIP: Use text to illustrate the building of knowledge and value as they get further into the experience.

High-low fidelity

While the example above may look real, there was no code required. It's all a clickable Figma prototype. High-fidelity visuals and interactions with low, or even no, code help us validate ideas while spending a fraction of the time you might expect. While there are many tools and ways to approach a wizard, these tips often guide us in the right direction to create something both usable and delightful.