Skematic
This web app ensures the legal compliance of financial and fintech products. The task was to design a report page that provides lawyers with an overview of ongoing work and highlights where their attention is focused. The main challenge was simplifying complex data structures into clear, intuitive visualizations and navigation.
Experience Design | Ideation | Information Architecture | Prototyping
Role:
Product Designer
Team:
1 Developer
Time:
2023
Visualizing complex information structures
The existing application organizes compliance data into four key components: Policies, Activities, Cases, and Logs. Here's how they work together:
Policies define the rules and criteria for Activities, Cases, and Logs. Activities are actions or events that occur within Cases or Logs. Cases are ongoing projects. Logs are completed cases.
Workload Insight: A clear visualization of the volume of each component to understand attention and workload distribution
Cause-and-Effect Clarity: An intuitive way to visualize how different components influence each other
Visualizing information architecture and causal relationships
Organizing and representing data based on volume and categories
Organizing and representing data based on volume and categories
Designing for scalability:
Future-proofing growing datasets and relationships between elements for easy comparison, all on a single page
Designing for scalability:
Future-proofing growing datasets and relationships between elements for easy comparison, all on a single page
Shift navigation to a bottom panel for improved touch accessibility
Shift navigation to a bottom panel for improved touch accessibility
Use a hover-based legend to declutter the interface
Reducing cognitive overload with hover interactions to reveal the legend key
Linking the diagram and navigation bar for seamless exploration