The team at The Transmitter/Spectrum came to us with the idea for this map. They are a leading resource for news and expert opinions on autism research. The map showcases a collection of studies on autism prevalence globally, highlighting areas with available data and regions where information is lacking. Each dot represents a study, with larger dots indicating studies recommended by our expert advisers for various reasons—though these studies may still have limitations. We plan to update the map with new studies as they become available.
My Director of Web Development created the map 10 years ago. Here's how it looked before:
Although complete, the map had many challenges regarding its usability, accessibility, and ease of use. I was tasked with redesigning the prevalence map to make it easier to use, rebranding it with the company's new design system, and enhancing the interactivity of the map's main components.
I took on this project with guidance from my senior UX designer and web developer. My director was familiar with JS3 and the technicalities of what was possible. My technical project manager helped initiate discussions with the Transmitter team via Zoom to define the project's scope, consider technical constraints, and assess the team's capacity to execute the desired features once the design was ready for developer hand-off.
The filter selection is cut off due to the small input field. I found it challenging to know which filter I selected. Have a look:
I also can't tell what the icons on the right do at a glance. Since they have no labels, clicking on them is the only way to understand their function. This highlights the importance of basic design heuristics, such as labels, to identify what the icons represent and their functions.
To restyle the filter component, I first considered possible placements. I wanted the placement to align with users' mental models, avoiding the need to reinvent the wheel. I also aimed to ensure that the room accommodates additional filters in the future. I designed two iterations and held an internal design critique session with my team.
During the design critique session, I solved the problem of the dropdown items cropping down in the small input field. The selected item is now visible, ensuring users know what they select once they close the dropdown.
My team asked whether the filter placement on the left could accommodate more filters if stakeholders decided to add more in the future. They also raised concerns about the map's cognitive load, noting that too much clutter could discourage users from interacting with it. In response, I created a second iteration where the filters appear at the top of the map, allowing the prevalence data to remain on the left side.
After placing the filters at the top, we still had the same questions. I met with the Transmitter team to review the design options and determine which they preferred. They preferred option 2, which organizes the page more effectively than option 1. Additionally, they noted that placing the filters at the top helps reduce cognitive load, leaving the central space available for interacting with the map and the card details that appear when selecting the dots.
After the round 1 review, the Transmitter team wanted additional filters to narrow the results by country, continent, and sample size. As a result, I iterated on option 2 to find a way to accommodate the new filters.
I made the card details scrollable to make space for the new filters, allowing its size to remain fixed. Users can scroll through the card to view more of the data.
I continued documenting some of the components for reuse on other pages of the prevalence map to help developers understand how they function independently. This library was necessary since I didn't have time to create an interactive prototype during the first round of the sprint.
The following scope of the project focused on the map's interaction. We had to ask ourselves:
The existing prevalence map uses blue dots by default, with a white border appearing when hovered over. When zooming in, the map overflows and extends across the entire page.
We questioned whether it made sense for the card details to appear when hovered over the map, as it obscures some of the dots in the study. The only way to view the dots behind the card is by closing it, but if you click a dot near its position, the card will cover the dot. We also needed to ensure the dots were accessible and met WCAG guidelines for light icons on light backgrounds.
I used the Transmitter's design system to select a UI component color for the dot that closely aligns with their brand. Unfortunately, the chosen color presented accessibility issues in the hover and selected states.
The Transmitter team raised the issue of representing color-blinded people. The most common types are green weakness, red weakness, and red sensitivity. I had to be mindful of this to ensure everyone could use the map. The Senior UX Designer ran the map through a color-blindness checker tool to determine if the colors met accessibility standards for people with red and green weak color blindness.
We decided to go with the first option, where the hover state turns dark, and the selected state turns royal blue. This improves the icons' heuristics without compromising accessibility for color-blind users.
Now, when a visitor clicks on a dot, the dot will turn blue, and a popup will appear with the name of the study. The data will be pulled from the dot and displayed on the side panel. This ensures that visitors can easily identify which dot they clicked, as the name on the card matches the name of the selected dot.
In round 2 of the design discussions, we addressed the map overflow issue, which extends to the end of the page, causing the card details to cover some of the dots. To prevent this, I ensured the card details had their side panel for the redesign. I also designed an overflow solution to stop the map from extending beyond the page, ensuring that map dots wouldn't disappear off the screen.
I also used the side panel to introduce the prevalence map. This copy appears when visitors arrive at the prevalence map and have not interacted with the map yet.
Once a user clicks on a dot, the side panel pulls the data from it and displays it there.
The timeline of studies for the existing map was tricky because you had to drag the cursor across the timeline to select which year you'd like the map to pull out data from. However, there was no indication that this function was possible. Have a look:
The issue with this function is that users are unaware that they can drag the cursor on the timeline to pull data. I added a small help text with a help icon to make it more visible and inform users that the timeline has interactive elements.
Adding a visible cue increases the likelihood that a user will understand that the timeline has interactive elements. When a user hovers over a dot on the timeline, the name of the study, along with the year, will appear in a small tooltip.
The selected dot on the timeline will also appear on the map, with data pulled from it and displayed in the side panel.
The existing prevalence map is available on the Transmitter page, while the new redesign is still under development. The redesigned prevalence map will launch in March 2025. The team at The Transmitter has shared tremendous praise for the latest redesign, commending its exceptional attention to detail and inclusivity.
The prevalence map is exclusively for desktops, as its primary use is for researchers and scientists writing articles and wishing to cite the map as a source.
If you have any questions about this project, contact me. Thank you.
