First Time Wizard

Introducing a "give-to-get" and low-tech "zoom" for the benefit of the user

A note: this complex project had to address numerous situations, problems, and contingencies. I will only be discussing two approaches here. Most of the details have been removed for clarity, but please feel free to ask me about it!

The Project

Company B runs award programs based on employee surveys to recognize organizations for being good places to work. They want to institute a new first-time wizard flow.  The goal of the new wizard flow is to show participating organizations the available regional awards and help them determine if they are eligible.

Background

This design is part of a first-time user experience flow for organizations that want to participate in regional awards.
Award eligibility is location-dependent, and participating organizations can only win an award if they have locations within the bounds of a given award program.
There are over 50 regional awards, most of which are bound by a subset of counties within a state or across two states

Current Wizard

The current process asks users (representatives from a participating organization) to:

Enter at least one location address for their organization
Pick from a list of all the awards

Location addresses are mapped to eligible awards which are then presented as recommended.
Any award from the list can be selected.

Most participating organizations (80%) only participated in a single regional award. Enrolling in the single familiar award was simple and relatively painless. The company predicts more organizations will be multi-award participants in the future.

Current Wizard Issues

Any award can be selected

Users sometimes don’t realize that their organization isn’t eligible and get disqualified

The “wall of awards”

Users whose organizations have a lot of locations are expected to read through or reach for each award to see what awards might apply
Seeing all the awards was supposed to induce discovery, using brand recognition and locales to get the user to participate in as many awards as they could
In practice, users would select a slew of awards without understanding the eligibility requirements

Award bounds are generally arbitrary

If each award were an entire state or just one city, it would be easier for a user to understand and find what awards suit them
Instead, the bounds of each award are an arbitrary grouping of counties.
Participating organizations may have multiple locations within an award, but that’s not necessarily how they think about or chunk their locations

Counties

People don’t think about locations by county
Most users know the county of where they live or work, but not the counties of other work locations across the country.
Switching to a list of cities would increase the already-too-long county list
We’re essentially asking them to leave the interface to look up the county of each location so they can use the interface.

Concepting

There is a pretty clear disconnect for users between the award and the location. Two ideas were good candidates to help close the gap:

Let the users enter their locations and tell them immediately what award corresponded to the location
Use a visual tool to help them to underline the relationship between awards and locations…introduce a map

The initial concept was to combine the ideas and give users a tool at the beginning of the wizard before they entered locations and picked awards.

The map would show all the awards and their bounds of eligibility
Users would be provided entry fields where they could give us a city and state and we would tell them what award.

Increasing the fidelity of these mockups unearthed two issues with this approach.

First, This model didn’t allow users to easily capitalize on the newly introduced ease.

For multi-award participants, they’d still need to remember the names of all the awards and then go to the next page and regurgitate the information.
For single-award users, it was adding a step.
‍

Second, The regionality of the award bounds meant that some of the awards were too small on the map to be distinguishable.

Give-to-get

As I thought more about the map and input, I realized there wasn't a reason to make it an added step within the wizard. The benefits of the two could be integrated into the wizard itself, consolidating the location page and the award page.
‍

I decided to use the given city/state as a kind of passkey. The user gives a little bit of information and in return, they are given a relevant course of action.

This approach has a number of benefits:

Users can only select an award if they’ve entered a corresponding location.
Reduces cognitive load by removing most of the searching, reading, and thinking from the process
Reduces the amount of time it takes to find the right awards
Increases the amount of work a user would have to do to enroll in the wrong awards. It also reduces the number of accidental or ineligible sign-ups

Leveraging a Map

While people don’t know associated counties, they do tend to know roughly where any given location is on a map. Maps can also be used as a memory device, to help users make sure they’ve remembered to add all the locations.

The map responds as the user adds locations and awards
The award region changes color when they enter a location and again when the user adds an award
A glance at the map reminds the user what they haven’t added

I designed it so that the main give-to-get mechanism can be used as a stand-alone.

The map may take more technical effort to implement depending on technical teams and capacity
Building the give-to-get without the map allows us to deliver value faster. The give-to-get is a significant improvement on the existing experience, even without the map
We can gather data on how the give-to-get performs with and without the map, which will tell us more about how users actually think about our programs

Low-tech Zoom

I also took it one step further and thought about how we could make better use of the map.

After designing the map, it became very clear that the east coast awards in particular provided a challenge. I’d never seen the award bounds mapped out before, so I wasn’t prepared for some of the award regions to be virtually indistinguishable while the state-wide programs in the midwest, southwest, and pacific northwest were widely identifiable.

In an effort to make the smaller awards more visible, I started to think about how to introduce some sort of zoom function.

I knew I wanted the map to be functional with fewer degrees of freedom and not something more technical (like using a google map) for a number of reasons:

The awards don’t span every part of the country - there are large gaps where awards don’t exist
A map with a lot of functionality might give the user too many decision points and slow them from using the give-to-get functionality

Zoom Test Cells

Both zoom variations use the same visual language. I placed “frames” on the map to make sure I was going to cover all the smaller awards.

For both types of zoom, the trigger enlarges the corresponding frame. Each zoom variation gives the various awards within the frame different treatments, but both use color variation to show the difference.

“Auto-zoom”

When the user enters the location, the map will zoom in on the applicable area and it highlights
If a user adds the award, the applicable area changes again
The zoom will remain until the user deletes or types something else into the input field

“Hover-zoom”

As the user hovers their mouse over specific awards on the map, the awards in the area of hover will change color
If the area is clicked, the map will zoom into that area
Clicking anywhere other than in the frame dismisses the zoom

Alyssa Vongries