There is a series of canals around the Phoenix area, and these canals are bordered by hundreds of miles of multi-use trails. Valley residents can access this network of trails that pave the way for fun and recreation, and the company wanted an interactive map to allow users to figure out the distances between points on the trails.
Background
The previous system was somewhat limited, and the interface was driven by a series of drop downs. Users would begin by choosing the canal trail they were interested in exploring, then choose a starting point, then ending point along the trail. Clicking “calculate distance” would then display the mileage between the two points.
- Was basically useless unless users know the name of the canal they were interested in
- The distance was an approximation
- Points on the drop downs were really limited to main cross streets
- There was no indication of whether or not there was parking at these access points, and that’s not even something we could control
- Updating the map was arduous - adding a new canal trail required physically plotting out all the potential access points on the trail, then using another tool, such as Google Maps – to determine the distances between the points and then put all those numbers into a spreadsheet.
- The mobile version of the map - the one we thought users might actually use - was a challenge to use on mobile devices
Sketch testing
We started out with some rough sketches, and did some guerrilla surveys, both inside and outside the company. Since we knew the pain points of the earlier system, we started out with three variations: The first one, seen here, was a clickable/draggable map, with distance automatically displaying. There was no other input source.
The second was an activity map. This was a new variation to see if users felt like being able to choose the trail based on what activity they were interested in.
The third map was just an updated version of the original, redesigned to work better on mobile devices. We knew what it’s flaws were, but maybe with a new interface it might be okay.
Feedback
We got some really good feedback on these tests. Here are a few tester verbatim:
Map two had some positives, but was a mixed bag,
The refresh of the original version, Map 3, was not received well:
Every one of the respondents, regardless of which prototype they were looking at, said something like this statement:
“I would use Google maps and set it to walking for this”
“I would use my Strava app so it would do the mileage and save it to my app”
“Why would I use this website instead of my phone?”
Wireframes
Using the data from the user interviews, we thought it might be an interesting idea to try to inject a little personality into the map, as well as align it better to other maps people are familiar with. We set about to combine the drag and droppable functionality of Google maps, with an activity feature, since those are the two pieces of the interface that seemed to resonate most with our testers.
- High-fidelity static wireframes
- Confirmed thoughts about where users want to click/tap
- The title of “Ground View” was confusing
What we discovered:
Since the rest of the site already exists, and we’re creating a new element inside it, the wire framing exercise went really quickly. We were really trying to target users in the existing site flow. When interacting with the wireframes, about half the testers clicked on the names of the trails below, half on the map itself. The label of “Ground View” for the street view feature was confusing to users
Our marching orders
We started out with a clickable map, paired with a list view, so give users two ways to interact with the map. From there, the map is the interface. Canal trails are clickable, endpoints can be dragged along the trail and the distance between them updates automatically, and at the bottom, we added a “things to do” section, highlighting some of the amenities to be found along the trail.
Then we went back to our users.
While the map and new interactivity was very well received, the activity icons and draggable points on the map were the favorite updates in this round. We learned there was a need for a little bit more onboarding for the users for the first time they saw the map.
Feeling like we had a good base for what users would use, I built out a functioning prototype, which we built and tested with real users.