Global Navigation UI Component
Project Overview: I worked on the development of a new global navigation UI component for the Matillion Design System, aimed at creating a seamless and space-efficient navigation experience for our users. Starting with the initial designs and ideas provided by the research and design teams, I built and developed the component structure in Figma, aligning it to our design system to ensure consistency and ease of use.
My Contributions:
Component Creation in Figma: Utilised nested instances to build a modular, flexible navigation component that aligns with design system standards, enabling easy updates and consistent styling across screens.
Created guidance ready for when it is implemented: I created guidance for how the global navigation functions on every level, including all its interaction states, accessibility and content. This has also helped the development teams build the new components.
Collaborative Content Organisation: Held continuous meetings with cross-functional teams to refine content structure and iconography, ensuring the navigation flow met both user needs and business requirements.
Prototyping and Animation: Developed an animated prototype to demonstrate the navigation panel’s open-and-close behaviour, which optimises screen space by overlaying the panel rather than shifting content.
Key Improvements in Matillion’s Global Navigation UI: old vs new
The previous Matillion navigation relied on a dropdown menu, which lacked personalisation, was difficult to manage, and often confused users due to poor information architecture. To address these challenges, our team redesigned the navigation as a side nav, ensuring it’s always visible and providing clear access to services and features.
Key Changes and Their Impact:
Transition to a Side Navigation
The new side nav remains accessible on all screens, improving usability and resolving issues with location and visibility.
This layout allows users to quickly see available services, eliminating the confusion caused by the hidden dropdown structure.
Overlaid Navigation Layers:
The navigation overlays content when opened, an approach tested to confirm that users naturally focus on the nav rather than the content behind it.
We chose to keep the background transparent, allowing users to maintain visual context without distraction.
Improved Project Flow:
Navigation between projects was a pain point in the previous design. The new structure prioritises easy access to project switching, streamlining workflows and significantly reducing friction for users.
Through these changes, the navigation became intuitive, visible, and better aligned with user needs, offering a structured and efficient way to access projects and services.