Map Controls

Role: Product UX/UI Designer

Company: Seerist
Team: Chief Product Officer, Chief Technology Officer, VP of Engineering, Head of Product, Head of User Experience, Product Manager
Duration: 3 months
Tools: Figma, Miro, Confluence, Jira

Prototype: Future-State Design

Context

Seerist is a map-based platform, but it’s Map Controls (and map legend) were fragmented across multiple entry points, leading to user confusion and low user engagement. In some views, the map toolbar was hidden behind overlapping panels, which disrupted key workflows and diminished the map’s overall usability and value.

To address this, I proposed multiple redesign options and collaborated closely with the Product Manager to resolve the issues, clarify the map's role, and improve interactions. Our goal was to create a seamless, holistic content journey that maximized data value and enhanced storytelling by harmonizing map presentation with the user experience.

Stakeholders preferred that a Map item be added to the left side navigation, but the Product Manager wanted to deliver a holistic solution that allowed users to access and control the Map Controls on every map-based screen, so they didn’t have to leave their existing workflow.

Results

The solution delivered for MVP led to a 68% improvement in user engagement.

Research

UX Heuristic Evaluation

I conducted a UX Heuristic evaluation of the existing platform, which was originally designed by developers.

Screenshots from Existing Seerist Platform

All of these screenshots of Map overlays in this section represent Risk and Stability, but you’ll notice that across the platform, the Map overlay colors vary by screen, which causes further confusion for user learnability.

These issues violated UX Heuristics, so in addition to delivering a solution that met business requirements, technical constraints, and user needs, I wanted to make sure I solved for the existing usability issues in order to restore user trust with the product and user confidence in their experience with the product.

Nielsen Norman Usability Heuristic Violations

Visibility of System Status
Recognition Rather Than Recall
Match Between System and the Real World
User Control and Freedom
Consistency and Standards

User Interviews

I connected with customers, who had expressed confusion with the existing map platform, in order to understand their pain points.

The most common issues for users were:

Confusion: Inability to understand what data was showing on the map
Frustration: Inability to find the correct Map Controls/legend to complete their workflow

User Personas

To address low usability issues in the Seerist platform, I developed detailed User Personas for its two primary user types - Analyst and Security Manager (Federal) - based on insights from user testing, feedback, support tickets, and stakeholder input. These personas were used to inform design solutions, ensuring the user experience was tailored to meet the distinct needs of each group.

Define

Jobs To Be Done (JTBD):

As a Regional Security Analyst, I need a unified Map Controls menu to visualize and combine all Seerist content and data types, so I can gain a comprehensive view of my assets and the surrounding context.
As a Federal Analyst, I need to efficiently filter and toggle data layers on the map, so I can assess geopolitical threats quickly and accurately.
As a Corporate Security Manager, I need to monitor and track key assets across multiple regions, so I can make informed decisions about resource allocation and threat mitigation.
As a Seerist Platform User, I need Map Controls that remain accessible even when other panels are open, so I can continue interacting with the map without losing context.

Design Process

First Iteration: Initial Conceptual Sketches

Stakeholders preferred that a Map item be added to the left side navigation, but the Product Manager wanted to deliver a holistic solution that allowed users to access and control the Map Controls on every map-based screen, so they didn’t have to leave their existing workflow.

“We need to integrate Map Controls with the existing content controls throughout the platform, in particular our new Risk & Stability work should be tightly integrated to Map Controls.”

— Product Manager

Here I provide three design solution options. To align with the requirements from both Product Managers, I pull elements and interactions from our other projects into the wireframes to test our conceptual work across the platform for a holistic approach.

My focus here is to explore design options:

That allow a user to access a Map Controls panel on every map-based screen without overlapping that screen’s existing panels that are necessary for the user’s workflow
That address the Product Manager’s priority in not having the map covered by multiple panels

“I really like the feedback bar along the bottom of the map showing me what I am viewing on the map. IMO it could be smaller, with icons to show data types, but with an expandable view perhaps. I think at the moment it’s a little too big?”

— Product Manager

Design Option Three

The Product Manage preferred a design where the user can locate the Map Controls panel within an icon on the Map (bottom right). Because the existing platform had an inconsistent use of iconology, I was concerned about the usability of hiding the Map Controls behind an unlabeled icon, so I provided the alternate design solutions Option One and Option Two above, which are labeled Map Controls.

Because Seerist already has left and right side panels, I proposed a concept where all information panels could be located on the left, so that when the Map Controls panel is opened on the right, it would not hide any other panels.

To merge all content panels into one, I proposed a panel with a top tab navigation solution for the user to hop between such content panels as My Assets, Risk Ratings, and Hotspots.

Feedback from Product Manager:

“This is absolutely brilliant! Exactly the right direction and I LOVE the integration of Map Controls with the other panels and content! ”

— Product Manager

Are there blanket defaults on the Map or does it depend on where the user is coming from?

Stakeholder priority was to get a simple MVP out to customers ASAP, so it was decided that User Testing would be conducted on the MVP version once launched to understand what users expected in saving/persisting Map Controls across screens and workflows.

Currently in the platform, the Map Controls persist across screens forever:

This allowed the user to continue an existing workflow in relation to their other workflows.
But it meant that months later, their old workflow was still loaded on the map.

I proposed this solution for MVP: Allow the user’s applied filters to save within a specific screen’s workflow, but not when a user changes workflows by navigating away to another item in left side navigation. If the user returns to Risk Ratings, their previous filters with Risk Ratings would have saved and appear.

Response from Product Manager

I think it's okay for the Map to retain the last set of configs that the user selected, either via their:

Interactions with 'Map Controls'
Interactions with content such as the Assets panel

“I think we can have a ‘Clear Map’ function somewhere on the Map which allows the user to wipe the map. This will give the user control over the map. I think by default the Map should generally be blank and have things added to it by a user’s interaction with either content or Map Controls. This will solve the issue of everything being plotted on the map by default, causing information overload. Since we have no clear structure of how the Map currently interacts with a user’s journey, it’s really difficult to answer what should default onto the Map and when.”

— Product Manager

- Feedback to user that Risk Rating and Pulse can’t be on at the same time.
- As a general concept we need to clarify the relationship between the right hand widget panels and the map as the relationship between the two elements isn't clear. I know that's part of our mission with our work on Map Controls but I think this mission won't be complete until we fundamentally work to reshape the platform so it has a more logical interaction between content pages and the Map.
- I think the Map Controls themselves are brilliant. Now we need to think through how the content is visualized on the map interplays with content in the panels.

Second Iteration

Because the Map Controls panel and Map interactions controlled not only the Map, but also the content panel, I suggested that it could make more sense to the user if the Map Controls panel was on the left, and the content widget on the right to reduce user confusion. (All content widgets on the right are merged into one with a top navigation solution to allow the user to access any content panel: My Assets, Risk Ratings, and Hotspots.)

To streamline the user workflow and minimize unnecessary clicks, I introduced a more intuitive way to display and manage dropdown selections:

Added a feedback chip that clearly displays the selected item (e.g., Political Overview) so users can understand the active overlay without reopening the dropdown.
Enabled quick deselection by including a close icon on the chip, removing the need to navigate back into the dropdown.

I also put in a Clear Filters button at the top that allows the user to clear all map selections quickly.

Response from Product Manager

The Product Manager decided that the interaction would be that the Map Controls and content widgets are both placed on the right (overlapping each other), so that only one could be accessed at a time.

Advocating for the Customer

Since our customers struggled with confusion in our platform, I flagged the usability issue of hiding panels from customers.

Feedback from Chief Technology Officer:
- Doesn’t want to be a click in to turn on, wants on top collapsed view.
- Reorganize content into Points, Overlays, and Map Base Layer. Users need to organize this way because if some content types are turned on, they turn other content types off.
- Allow user to turn on or off Search Results in Map Controls. This would be a layer on the Map itself, so can’t apply filters, but could allow to overlay Map. Likes having a legend in here, but wants to keep simple. Can’t see Search Results because Assets is on.
Feedback from VP of Engineering:
- Clustering is an issue in hiding data. Solving clustering could solve layer ordering.
- The more we give to the user, the more they want. Keep simple so easy to load map.
Feedback from Head of Product:
- Add Incidents to Map Controls.
- Include Power Outage and Weather for MVP.
- Need to figure out where Map Controls are (right or left? I think it should be on the right, but i am open.)
- What is the interaction of the Map as a menu item on the left hand menu vs on the map?
- Controls should also include the layers and add the measuring tool + polygon drawing in future
- Ability to turn full layers on and off without having to go into the menu
- Hierarchy of the layers: show what is off and what is on: if Risk Rating is on, then Pulse is off. Maybe go back to the original mockups where we showed layers vs markers and we can decide what to call them after?
- Make sure the icons are always included
Feedback from Chief Product Officer:
- Search is full screen. Map is only certain point, might not be relevant for Search to be in Map Controls.

Third Iteration

The Product Manager wanted the Map Controls panel to slide in from the right, which would cover any right side content panels, such as the Lagos HQ Proximity within Assets.

To provide the most usability possible with this solution:

I give the user the ability to close this Map Controls panel when they want to return to the right side information panel, but communicate my concern for user confusion around hiding and finding panels, especially when users are already experiencing confusion and frustration.
Since the map toolbar was also hidden behind the panels, I proposed a solution where map toolbar moves with the panel so that it’s never hidden.

When the user is accessing Map Controls after selecting an item, such as a specific asset within the Assets navigation item, that item is turned on within the Map Controls panel.

Because Seerist has so many Point icons and Overlays, I introduced a contextual Map Legend within each dropdown. This resolved a key usability issue: users previously received no feedback on what was selected to display on the Map or what the icons represented. Additionally, legends were previously hidden and fragmented across different parts of the platform, making them hard to find. With this solution, all relevant legends are now consolidated into a single, contextual panel that users can access from any screen containing a map. This design now provides immediate clarity and reinforces user confidence in interpreting map data.

This ensured that the design solution solved for these existing usability issues:

Nielsen Norman Usability Heuristics

Visibility of System Status
Recognition Rather Than Recall
Match Between System and the Real World
User Control and Freedom
Consistency and Standards

During interviews with customers and stakeholders, this solution from the Product Manager of hiding content panels was found confusing, and the VP of Engineering flagged that allowing the map toolbar to move as panels are opened is a big lift. The Chief Technology Officer was concerned that users wouldn’t be able to find the Hotspots AI and Pulse (navigation items that only functioned as a map legend for each respectively).

The Head of User Experience communicated that having a Map Controls panel on the right is confusing for users as it would hide the content panels the user is specifically trying to use to analyze data.

Solution

Stakeholders decided to implement Map Controls into the left side navigation as “Map,” so users could only access the Map Controls panel within this designated “Map” in navigation, and not on every screen that contained a Map, which was the Product Manager’s original concept.

This would solve for the user now being able to intuitively access Hotspots AI and Pulse (as these only functioned as legends for the map), and would fulfill the Head of User Experience’s concept to not hide important data panels behind the Map Controls panel.

Challenge

While stakeholders and engineering was brought in early and often during this project, this decision from stakeholders to deprioritize a heavier build in favor of faster delivery meant I had a week to redesign and deliver a simpler version for MVP to meet engineering timelines.

I collaborated daily with the Product Manager and VP of Engineering, while keeping stakeholders in the loop by delivering daily prototype videos.

Final Iteration for MVP

The stakeholders wanted the final design solution to be that the left side navigation merged all Map Controls into one navigation item labeled “Map.” With this design, the Product Manager’s concept of allowing the user to access the Map Controls widget on any screen displaying a Map was scrapped: the user could only access Map Controls from the left side navigation.

This meant that the user would not be able to access Map Controls within their current data exploration workflow (My Assets, Risk Ratings, etc), so the user would need to leave their workflow, edit their Map in Map Controls, and then return to their workflow.

For a faster development lift, the VP of Engineering intended for the left side Map Controls panel to hide the map toolbar from users.

Advocating for the Customer

I communicated my concern for hiding the map toolbar from users behind the Map Controls panel, as it was not intuitive for users on how to access key Map features, such as Zoom. If the user did figure out to close the Map Controls panel to access the Map features, there was no intuitive way for them to understand how to reopen the Map Controls panel.

Designs for MVP were delivered for development utilizing the Jira plugin for Figma.

Prototype of MVP: According to VP of Engineering’s Requirements

This version offered the fastest path to MVP. However, due to its usability limitations, I also designed a more intuitive alternative for future implementation once Seerist was ready to support a more development-intensive solution, shown below.