Signal Ocean Filter Redesign
Signal Ocean Filter Redesign
2024
Bringing together deep shipping expertise and advanced analytics technologies.
Bringing together deep shipping expertise and advanced analytics technologies.
Signal Ocean is a technology arm of the Signal group, a modern toolbox for charterers, brokers and owners.
I led the redesign for the new Signal Ocean filter experience where we introduced multi-select, range sliders, quick filters, custom filter creation and much more.
Signal Ocean is a technology arm of the Signal group, a modern toolbox for charterers, brokers and owners.
I led the redesign for the new Signal Ocean filter experience where we introduced multi-select, range sliders, quick filters, custom filter creation and much more.
Impact
60%
decrease in the time required for B2B experts in commercial shipping to find specific data sets
decrease in the time required for B2B experts in commercial shipping to find specific data sets
Role
Product Designer
Product Designer
Product Designer
Duration
1 month
1 month
Tools
Figma
Tools
Figma
Figma
The old experience
Background
The current filter solution on Signal makes it difficult for users to filter complex tables without feeling overwhelmed and doesn't provide an easy way for them to define their search criteria.
Goal
The goal was to design an intuitive filtering system for the commercial shipping management platform that can handle multiple attributes and provide users with an intuitive way to manage and apply filters.
Discovery
Ideation
Design
Test & Outcomes
Design Approach
Background
The current filter solution on Signal makes it difficult for users to filter complex tables without feeling overwhelmed and doesn't provide an easy way for them to define their search criteria.
Design Approach
Discovery
Ideation
Design
Test & Outcomes
Goal
The goal was to design an intuitive filtering system for the commercial shipping management platform that can handle multiple attributes and provide users with an intuitive way to manage and apply filters.
Discovery
Heuristic Evaluation
This work started off with me carrying out heuristic evaluation as an approach to understanding the usability problems better. I applied Jakob Nielsen’s heuristics and severity scale. Below, is the severity levels and its definitions:
High: Major usability problems, needs immediate attention to fix it.
Medium: Not a major usability problem, but it is important to fix it otherwise, it might lead to high priority issues.
Low: Minor usability issues/problems.
Heuristic Evaluation Report
No multi-select options: The current design solution limits users to filtering only one attribute at a time (e.g, filtering by only one vessel particulars) which forces users to repeat the same steps every time they interact with the data.
No multi-select options: The current design solution limits users to filtering only one attribute at a time (e.g, filtering by only one vessel particulars) which forces users to repeat the same steps every time they interact with the data.
Heuritics violated: Flexibility and Efficiency of Use
Severity: Low
Heuritics violated: Flexibility & Efficiency of Use
Severity: Low
Cluttered interfaces: The current design shows active filters in both vertical and horizontal lists, resulting in a lengthy list for multiple attributes and causing the filter button to shift position with each interaction, which overwhelms users.
Heuritics violated: Consistency and Standard
Severity: Low
Cluttered interfaces: The current design shows active filters in both vertical and horizontal lists, resulting in a lengthy list for multiple attributes and causing the filter button to shift position with each interaction, which overwhelms users.
Heuritics violated: Consistency & Standard
Severity: Low
Discovery
Ideation
With an understanding of the limitations of the current filtering system in mind, I moved forward to propose features for the new experience using a user flow to justify how enhanced filtering capabilities can improve decision-making processes and overall user satisfaction.
Proposed Features
• Multi-select filters: for attributes like shipment types, commodities, and regions.
• Range sliders: to filter data based on numerical values, such as shipment volume or dates.
• Quick filters: for frequently used queries, enabling faster access to common datasets.
• Custom filter creation: allowing users to define and save their specific filtering preferences.
• Filter Set Management: Users can save, and quickly switch between frequently used filter sets for rapid data access.
User Flow
Mood board
Based on my proposed features, I gathered visual inspiration from products with excellent filtering experiences that emphasized usability and functionality. This provided a quick and effective way to generate ideas for the UI stage.
High-Fidelity Designs
New Filter Layout
A collapsible sidebar that contains the different filter categories (e.g., Commodity, Shipment Date, Region) that expand when clicked. Each category allows multi-select/range selection, with clear indication of how many filters are currently applied
New Filter Layout
A collapsible sidebar that contains the different filter categories (e.g., Commodity, Shipment Date, Region) that expand when clicked. Each category allows multi-select/range selection, with clear indication of how many filters are currently applied
Quick Filters & Customization Options
Pre-defined filters for common queries (e.g., “High-value shipments” or “Delayed shipments”) reduce the need for manual filter configuration for frequently repeated tasks. Users can also name and save filter sets for different tasks or teams, allowing them to switch between pre-set configurations depending on the type of data they are analyzing.
Quick Filters & Customization Options
Pre-defined filters for common queries (e.g., “High-value shipments” or “Delayed shipments”) reduce the need for manual filter configuration for frequently repeated tasks. Users can also name and save filter sets for different tasks or teams, allowing them to switch between pre-set configurations depending on the type of data they are analyzing.
High-Fidelity Designs
Test & Outcomes
Outcome
After testing, we saw a 60% decrease in the time required for B2B experts in commercial shipping to find specific data sets, making it efficient and improving decision-making. By enabling users to customize data views with ease and easily find the data they need, users focused on making more accurate business and data-driven decisions.
Outcome
After testing, we saw a 60% decrease in the time required for B2B experts in commercial shipping to find specific data sets, making it efficient and improving decision-making. By enabling users to customize data views with ease and easily find the data they need, users focused on making more accurate business and data-driven decisions.
Test & Outcomes
With an understanding of the limitations of the current filtering system in mind, I moved forward to propose features for the new experience using a user flow to justify how enhanced filtering capabilities can improve decision-making processes and overall user satisfaction.
Proposed Features
• Multi-select filters: for attributes like shipment types, commodities, and regions.
• Range sliders: to filter data based on numerical values, such as shipment volume or dates.
• Quick filters: for frequently used queries, enabling faster access to common datasets.
• Custom filter creation: allowing users to define and save their specific filtering preferences.
• Filter Set Management: Users can save, and quickly switch between frequently used filter sets for rapid data access.
User Flow
Mood board
Based on my proposed features, I gathered visual inspiration from products with excellent filtering experiences that emphasized usability and functionality. This provided a quick and effective way to generate ideas for the UI stage.
Ideation