How might we make zoning education accessible?

This project focuses on redesigning individual features of the atlas navigation and the reasonings why all wrapped up into a clean MVP to pass off to dev’s.

I assisted in leading the first NZA UX team and the first solution my team tackled was a redesign of the current zoning atlas to make it more interactive and intuitive for our users.

When determining how users currently navigate the atlas they were met with the same issues as the UX team.

Color Accessibility
Lack of tooltips and simple explanations about filter options
No clear explanation on what is being shown and information not displayed simply

"Why is everything highlighted when I have nothing selected?"

"The filters should be more intuitive and not need the explanations. Why do I have to refresh every time to get an answer?"

"I'm actually colorblind and all of the 'purples' look the same to me."

10% of users understood the tutorial on the first try

75% of users had no confidence in using the map

90% of users felt the map had excessive inconsistencies

75% of users found the map unnecessarily complex

Overall, the original website scored a fairly low usability score that confirmed the issues with the initial audit. Users weren't able to navigate easily, struggled with understanding the menu, and being frustrated with the tutorial. This gave us room to create different solutions.

Results

Redesign for accessibility
including color and contrast

Organize the menu to be more intuitive in UI and vocabulary

Make navigation and education minimal in the legend design

Accessibility Updates:

Along with minimizing the menu as a whole, the font was adjusted in size and color to fit WCAG standards. Base colors for the map were also revised to accommodate colorblind users, even before they adjust style preferences.
‍

Menu UX:

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

The menu was reorganized to allow the user to navigate it with less trouble.

Zoning districts are now toggle-able and no longer present as locked predetermined colors
Users can change colors and patterns to their preference
A legend is now given to users as they toggle on and off layers or change preferences

Navigation UI Redesign:

Various UI components were added to allow users more autonomy in making the atlas unique to their needs.

Toggles for different categories for the map to be additive and include only the information they need.
Tooltips were also added for quick and easy access to simple definitions.
A search function for utilizing ARCGIS software to find a specific address
Radios for items that are mutually exclusive

Hawai'i Zoning Atlas is an ongoing project supported by Code for Hawaii and the National Zoning Atlas