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!
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.
The current process asks users (representatives from a participating organization) to:
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.
There is a pretty clear disconnect for users between the award and the location. Two ideas were good candidates to help close the gap:
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.
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.
Second, The regionality of the award bounds meant that some of the awards were too small on the map to be distinguishable.
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:
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.
I designed it so that the main give-to-get mechanism can be used as a stand-alone.
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:
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.