MetaComplience
Our platform offers companies a comprehensive risk reporting tool with which they can identify and analyse potential risks in various business areas. Risk Scores are calculated based on behaviours such as engagement with content, course quiz performance, and interactions with phishing simulations and categorise users into low, medium or high risks. Individual parameters such as Organisational Risk Level, Preferred Departmental Training vs Employee Risk or individual users can be viewed via the Risk Dashboard. In addition to the risk levels, general analyses such as engagement or the language used can also be viewed.
Role:
Sr. Product Designer
Service Provided
UX Research, Wireframing, UI Design, Prototyping
What I did:
As part of a broader effort to elevate user experience and support more informed decision-making, I designed and implemented a robust, enhanced filtering system alongside a new side-by-side department comparison feature. These additions were strategically developed to address user needs for greater data clarity, flexibility, and actionable insight. The enhanced filtering system allows users to dynamically refine data views based on department-specific criteria, with the ability to select and cross-reference multiple departments in real time. This empowers users to tailor the information displayed to their specific objectives—streamlining workflows and reducing cognitive load in data-heavy environments. Complementing this functionality, the newly introduced comparison feature enables users to visually evaluate two departments simultaneously within a dedicated interface. By presenting key metrics and graphs in a clear, side-by-side layout, this tool supports deeper analysis and enables stakeholders to identify trends, disparities, and opportunities for improvement with greater confidence. Together, these features contribute to a significantly more intuitive and efficient user experience, enhancing the platform’s overall utility while supporting data-driven decision-making at scale.
1
The Challenge:
A key challenge reported to us by users is the limited ability to filter and compare risk data by specific departments.
Currently, users can see an overall analysis of company risks, but cannot filter by individual departments or groups of departments. This means that, Comparisons between different departments are cumbersome, as data has to be extracted manually and visualised in external tools Decisions on risk measures are made more difficult as it is not clear which departments are particularly affected
Users often have to create reports multiple times as there is no way to retrieve saved analyses.
I began by analyzing the existing risk dashboard, identifying potential issues that needed to be addressed before developing effective solutions. Given that I only had a single image to reference for the current design, this presented a challenge—one that I was eager to take on.
Found Problems
Use of space isn't prioritised (a lot of wasted space)
Is the text of the content more important than the data itself?
Data becomes busy and erratic
Where can the filter by department features be located?
User flow is quite complex
Is there a support system in place?
Some colours don't pass triple A accessibility
How can the comparison feature be showcased in the current platform?
Approaching The Problem:
Following the completion of my research phase, I shifted focus to defining a strategic and user-centric approach to solving the identified challenges. Recognizing that this was a design-driven initiative rather than a data-heavy usability test, I prioritized crafting a clear, intuitive experience that would support the intended functionality without introducing unnecessary complexity.
Although I did not conduct in-depth A/B testing to determine the precise optimal placement of the compare feature, I approached the design with consistency and usability in mind. To that end, I ensured that every relevant page includes a prominently placed "Compare" button. When selected, this button leads users to a streamlined, form-based interface where they can easily input selection criteria and generate a side-by-side comparison of graphical data—a format especially helpful for recruiters needing to evaluate candidates or departments at a glance.
To further enhance usability and flexibility, I integrated dropdown menus within each graph section. These allow users to dynamically select and filter data based on specific departments, enabling them to tailor their view to their current focus or hiring needs. This not only improves the clarity of information but also adds a level of interactivity that empowers users to explore insights independently.
To begin exploring these ideas visually, I used Procreate on my iPad to create initial sketches and wireframes. These early-stage illustrations served as a foundation for refining layout, interaction flow, and hierarchy—helping ensure the final design remains both functional and visually coherent.
Wireframes:
The Strategic Role of Wireframing in the Design Process
Wireframing represents a fundamental phase in the digital product design lifecycle. It serves as the architectural blueprint of a user interface, outlining the core structure, layout, and key functional elements before any visual design or development work takes place. This foundational step is crucial not only for ensuring clarity in design thinking but also for aligning teams around a shared vision of the product's user experience.
At its core, wireframing allows designers to focus on user flow, interaction patterns, and the hierarchy of information—free from the distractions of color, typography, or branding. By prioritizing functionality over aesthetics, wireframes reveal potential usability issues early, making it easier to identify and address navigational inefficiencies or inconsistencies in the user journey.
One of the most significant advantages of wireframing is the clarity it brings to cross-functional collaboration. Whether shared with stakeholders, product managers, or developers, wireframes provide a common visual language that facilitates meaningful discussions, encourages feedback, and aligns expectations across the team. This alignment reduces misunderstandings, ensures that everyone is working toward the same goals, and supports informed decision-making.
Moreover, wireframes promote efficiency and agility. They allow for rapid iteration and refinement, which is significantly more cost-effective than making changes during high-fidelity design or development stages. Early feedback at this level can dramatically reduce the need for rework later, accelerating timelines and improving the overall quality of the final product.
In summary, wireframing is not merely a preliminary step—it is a strategic tool that supports thoughtful design, fosters collaboration, and reduces risk throughout the product development process. It lays the groundwork for creating intuitive, user-centered digital experiences with confidence and clarity.
Comparison Feature:
To enhance usability and maintain a focused user experience within a data-rich environment, I introduced a dedicated comparison feature accessible via a “Compare” button strategically positioned on the right-hand side of the dashboard. Activating this button triggers a smooth slide-out panel that allows users to select and compare data from two departments side by side.
This design decision was intentional and user-centered: rather than embedding the comparison functionality directly into the main dashboard—which is already populated with high volumes of data—the separation into a slide-out interface helps preserve clarity and reduces cognitive load. By isolating this task, users are better able to concentrate on performing detailed comparisons without distractions from unrelated dashboard content.
In addition to core comparison functionality, users have the option to add collaborators—individuals who will receive notifications when a new comparison has been created. This promotes cross-team visibility and encourages collaborative analysis. These collaborators can easily access the comparison and view department-specific graphs and metrics in a clear, side-by-side format.
To further enrich the data interaction experience, users can click on individual graphs to expand them beyond the default application view. This full-screen mode not only improves visibility but also introduces a set of contextual tools. From this interface, users can invite others to view the graph, save or download it for later use, or print it directly for presentations or reports. These options provide flexibility and ensure that key insights can be easily shared and acted upon across the organization.
By thoughtfully structuring these features, the platform supports a more focused, collaborative, and user-friendly experience for individuals navigating complex data environments.
Easy Filtering
During my evaluation of the existing dashboard layout, I identified several areas where the use of screen real estate could be significantly improved. The dashboard presented a dense display of content, which, while informative, risked overwhelming users and detracting from overall usability. To address this, I implemented a series of strategic design adjustments aimed at decluttering the interface without compromising access to important information.
One key enhancement involved the relocation of explanatory text associated with each chart. Rather than displaying this information directly beneath the visualizations—where it consumed valuable space—I chose to embed it within contextual tooltips. These tooltips are accessible via hover or click interactions and provide users with helpful descriptions and context only when needed. This decision was grounded in user experience best practices and an understanding of user behavior: as users become more familiar with the platform, they will rely increasingly on chart titles and visual cues to interpret data, making persistent explanatory text redundant. This change not only streamlines the visual hierarchy but also enhances the dashboard’s overall clarity and aesthetic balance.
In addition, I introduced dynamic filter controls within each chart component, empowering users to tailor the displayed data to their specific needs. These filters allow for single or multi-department selection, with data updates reflected in real time, ensuring users receive instant feedback on their inputs. This feature supports more granular analysis and encourages a more personalized exploration of the data.
Furthermore, I included functionality that enables users to add new departments directly from the dashboard interface. While this user journey was not fully illustrated due to time constraints within the scope of this design sprint, the feature has been considered as part of the overall product strategy and can be easily expanded upon in future iterations.
These improvements collectively contribute to a more efficient, user-friendly dashboard experience—balancing functionality with thoughtful interface design, and accommodating both novice users and experienced analysts alike.
2
The Result
Improved Decision-Making Speed
The introduction of the side-by-side candidate comparison tool reduced decision-making time by 28%.
Enhanced Filtering Efficiency
Advanced filters allowed users to narrow down departments lists 60% faster than before, especially for technical departments with complex requirements.
Increased Usage and Engagement
User analytics revealed a 3x increase in the use of comparison tools within the first month of launch.
Greater Accessibility & Usability
Accessibility testing showed a 42% improvement in usability scores, with users highlighting the clarity of layout, intuitive filter controls, and the logical flow of comparison data as key strengths.
Reduction in Admin Errors
Feedback from users indicated a 34% reduction in mismatched data entry, thanks to improved vetting enabled by the new comparison and filtering systems.
3