Redesigning ‘Places We Protect’
How We Improved the User Experience of Nature.org's Preserve Locator
Overview
When the new nature.org launched, our Global Digital UX team was particularly interested in monitoring the Places We Protect page, given the importance of preserves as a TNC touchpoint.
The Places We Protect page houses the preserve locator map, where visitors can search for and browse preserves near them.
The Problem
We learned there were numerous usability issues with the preserve locator. It was difficult to search, browse results, manipulate the map, and navigate on mobile.
After conducting user testing on the map with site visitors, the UX team learned that users struggled to navigate the map and were uncertain about its significance given the bite-sized details displayed in tooltips. Their feedback echoed the issues we heard from field staff: the map was difficult to use and did not display expected results. State chapters were especially close to these issues, as they received regular feedback from local audiences.
The Solution
We mapped out an approach to redesign the preserve locator with the goal of ensuring the map was usable and enhanced with relevant features that would make preserve information accessible. The objectives were to optimize the map's functionality and incorporate business objectives from the field.
Our Approach
Our redesign process focused on these four core areas:
-
Test & Iterate
Before the prototypes get developed, we user test the concepts using visual mock ups of the interface. This iterative process allows for us to rework and refine the prototype before handing off to development. Once launched, we can track the performance and continue iterating on the designs that align with objectives and user needs.
1. Discover: What's currently not working?
The first step was to uncover painpoints with the current experience.
We reviewed feedback submitted through Digital Requests, as well as spoke with state chapters to understand their business needs surrounding the preserve locator.
We also conducted user tests with site visitors to gather more insight into how people engaged with the preserve locator. What worked well? What could be improved?
Some of what we heard:
Quote
I didn't notice any preserves near me until I found out I could change the search radius.
2. Define: What are the biggest painpoints to address?
Next, we identified the top usability issues, and made them the focus of the redesign effort.
-
You could only search State, Country and Zip Code, and could not, for example, support a specific address
A default radius of 500 miles was applied to the search, which felt like a vast amount of space for smaller states to search within. This caused for a very manual experience to have to change the search radius each time to narrow down the preserve results.
-
The map points were very small and tended to cluster in a way that made it hard to click and browse. Their dark green color receded into the map and their circular shape made it hard to distinguish one dot from another especially when they overlapped.
The map was small, making it difficult to view many preserves at once.
List and map views could not be simultaneously viewed, creating a disjointed browsing experience. Additionally, some users were not aware that the list view even existed.
For those who would toggle to the list view, they would notice that the preserves were not listed in any logical order, such as distance from your searched location.
Tapping the pins would display a tooltip, but the tooltip showed very little information. If you wanted to see more details, you would have to leave the map to go into a new preserve detail page.
It was not explicitly clear which preserves were closed, limited or open unless you clicked into the pins or browsed the preserves under the list view.
-
Tooltips were especially cumbersome to read on a small screen.
The same browsing issues on desktop were carried over into mobile.
3. Ideate: How might we enhance the design?
After identifying the top usability issues, we considered ways to address them. We started by talking with the field, researching best practices for search locators, and brainstorming various avenues for improvement.
We partnered with the field to explore mapping solutions
The Illinois State Chapter was in the process of revamping a volunteer stewardship network interactive map to align it with nature.org's look and feel. This map allowed the user to search by zip code or address to find an area where they could volunteer.
Our UX and Systems teams used this opportunity to both contribute to Illinois' redesign effort, and explore both design and technical solutions for Places We Protect. More specifically, we explored displaying the map and list view on the same screen, whereas previously they could only be seen one at a time via toggle.
We conducted a competitive analysis
We researched how other map locator/search engines (Google, Yelp, Foursquare, etc) worked and identified their best practices:
- What worked well across these locators?
- How might these examples be applied to the preserve locator?
We ideated on solutions that would make search more robust:
- Introduced predictive search results.
- Broadened search capabilities to allow more than State, Country, Zip.
- Removed search radius and enabling users to pan the map and see new preserve pins populate in real time.
We ideated on solutions that would let users to browse easily:
Redesigned the map pins to take on a more conventional pin shape and enlarged it to have them stand out more against the the map.
Added preserve access status icons on the pin to make browsing for open, limited and closed preserves quicker.
Enlarged the map for more viewing space.
Placed the map and list view side-by-side to eliminate the map/list toggle.
Revamped the tooltip experience into an overview modal that allows for users to read more information about a preserve before bouncing off to a details page.
We ideated on solutions that would make the mobile experience more mobile friendly:
Kept all of the desktop experience in a compartmentalized format on mobile
Introduced a ‘swiping drawer’ to display a list of results in tandem with the map, allowing the user to quickly jump between views.
Allow users to quickly filter preserves based on access by introducing ‘On/Off’ switches under the ‘More’ button.
4. Test & Iterate
After designing and prototyping the new preserve locator, we moved to development. Throughout this process, we worked with Atypical Digital, an outside vendor, as well as our Systems, IT and Content teams to build the new map locator.
THE DEVELOPMENT PROCESS
Code changes take time; every 45 days, our Systems team releases a new set of updates. We partner with them on an ongoing basis to incorporate design updates into their release cycle. Here is our process:
- We start by creating a ticket and drafting technical requirements in a project management tool called Jira.
- For larger efforts, the development work can be broken up into smaller tasks and assigned out to the Systems team. For example, one developer might be working on Map View, while another is working on the List View.
- Once development is underway and ready for review, many members of Global Digital work together to conduct a comprehensive quality and assurance (QA) review to test for bugs and usability issues.
- Changes are pushed from one testing environment to another, before we ultimately push them to our live site.
Our design process doesn’t end here; it is iterative.
Since our launch on April 15, 2020, we have continued to gather feedback and brainstorm improvements for the preserve locator:
- Adding a filter counter to show how many filters have been applied.
- Optimizing the drawer swiping experience of the list view on mobile.
- Making the filter Apply and Clear buttons remain 'sticky' versus requring users to scroll down the filter list to see the buttons
- Transforming the map legend preserve access labels to filter toggles
- Adding an 'Accessible' label for preserves that meet ADA compliance
Post launch of any new project or new AEM component update, we work with the Analytics team to measure the performance and engagements around the new design. We will continue to make observations and encourage feedback from field staff on what can be improved.
If you're interested for more information on the design process, reach out to Laura Chang, UX Lead, and/or to Sarah Peng, Digital Designer.
UX Design 101
Check out Laura and Sarah's Global Digital University presentation on the basics of user experience and design.