To design in context, I chose Municipal Maintenance Module as the template module to rebuild the dashboard's IA and filtering experience. Because Municipal Maintenance is one of the most widely used module, with the most comprehensive filter sets for all pages.

Card Sorting

To align with users' understanding of filtering, I worked with the product manager to conduct a card sorting exercise, categorizing dashboard information into three perspectives: To Do List, Condition, and Location. These categories comprise the Dashboard Filtering feature.

User Flow Mapping

Rebuilding Dashboards' IA

I introduced the concept of the "Dashboard Filter Set," which consists of three thoughtfully designed components that align with users' mindset and can function both individually and collaboratively:

- List Panel: I designed a new list panel in the sidebar featuring To-Do tabs for better navigation and task management.
- Location Filter: We retained the widely adopted Location Filter in the sidebar, which offers an intuitive map-based interface and reduces the development team's workload.
- Condition Filter: As the most complicated component, it required a meticulous design approach. I will elaborate on how I crafted this filter from scratch in the following Challenge 2.

In the Municipal Maintenance Module, I selected the Data Tab, Map View as the primary context for ideating and designing the condition filter. This decision was made because this dashboard accounts for more than 80% of usage and offers the most extensive set of filters. Simultaneously, I evaluated my design for adaptability across other dashboards to ensure a cohesive and versatile user experience.

Design In Context

User Flow

For challenge 2, my focus was on creating a universal solution for Condition Filtering, as the most important part of the intuitive filtering experience for all dashboards.

Ideation

To ensure adaptability and scalability across tabs and views, I explored various possibilities and ideated with the two design strategies, Layout and Interaction, to explore all feasible combinations, and evaluated them with users' needs and behavior patterns.

Evaluation With Behavior Patterns

I evaluated all the ideas by considering user needs and three main behavior patterns across pages and modules. This ensures that the solution is intuitive, reusable, adaptive, and scalable across the product. And there are two concepts that stand out in the evaluation.

Concept

Internal Testing

During our internal testing and concept review sessions, 3/3 people favored concept 1 due to its sleek and concise design, like "Why use 2 components if we can solve this with just 1?"

However, they are not the actual users. I reached out to the customer success team to organize and conduct external user testing. The result of this testing was surprising to all of us.

External User Testing

Through this user testing, I successfully demonstrated the significant value of user-centered design methods for our company. Based on the two rounds of user testing for this project, I established a comprehensive standard operating procedure (SOP) for conducting external user testing within the company.

Iteration 1 “The layer panel is important for the map view as well.”

Iteration 2 “It's overwhelming to see all assets on the map every time I enter the module.”

Iteration 3 “Sometimes it's better to have different filter settings for each To Do list.”