The objective of this project was to simplify the Information Architecture (IA) found across TraceLink's expanding SaaS Platform.
Business requirements presented to me endorsed a major overhaul of our current content organization, labeling and navigation paradigm.
In my role as Senior Manager UX, I needed to align our patterns to customers’ goals and tasks. I took a holistic and evidence-based approach, to re-organize and re-label content, while keeping in mind TraceLink's strategic vision of the "Network."
The result was a redesigned Navigation that established a more scalable and sustainable model and responded directly to the needs of our 1,300+ global customers, engaging with 60+ unique applications.
Tracelink’s platform is based upon a "Network Paradigm" (an approach similar to providing group access to a shared folder or cloud drive).
This model allows unlimited organization-to-organization collaboration. Internally, this concept was labeled "multi-enterprise," and conceptually is a powerful premise in the intricate realm of supply chain logistics.
Unfortunately, current TraceLink Navigation patterns did not articulate that value. Customer feedback had always highlighted confusion around how these relationships were organized and labeled.
Furthermore, this project had failed before. Senior Executives were partial to current patterns and unwilling to approve platform-wide updates without rock solid evidence and jaw-dropping design. The bar was set high.
Primarily, this was an exercise in stakeholder management and executive communication.
Drop-down Menus:
Pattern can only show one choice, meaning poor visibility and scanning of available options. Added impact on small screens
Hierarchical relationships:
Menus work together to construct a hierarchical pathway. But their flat horizontal alignment give a false impression of their relationship.
Left Panel Overload:
Unnecessary marketing material overwhelms secondary controls by showing unrelated pathways.
Heuristic Evaluation and Competitive Analysis - Found TraceLink navigation patterns to be atypical, impacting usability. Competitor products utilized more familiar patterns and organizational principles for added predictability and find-ability.
Qualitative User Research - Customer outreach and stakeholder interviews enabled the team to better understand our problem space and articulate a "customer-first" perspective to stakeholders.
Tree Testing - Other team members led moderated sessions that exposed widespread labeling gaps and categorization shortcomings, which allowed me to share with stakeholders via quantitative measures.
Collectively these core UX findings were assembled into a series of presentations and delivered to executive-level stakeholders for alignment and approval.
The problem space was well understood and our working team all shared a new customer-centric perspective.
Next, I produced a series of strategic deliverables so everyone could collectively envision our enhanced future state.
It was time to converge upon key principles…
Structure and categorization
Simplify our structure and use logical categories to organize features based upon customer needs and frequency of use.
Navigation Patterns
Implement consistent navigation, (while allowing for customer configuration) and employ progressive disclosure to reduce cognitive load and improve efficiency.
Responsive Needs
Ensure scalable and consistent patterns across all devices, unlocking app development for tablets, and smartphones (supporting warehouse and facility management use cases).
Land, then Expand
Establish clear visual separation between global, platform-level navigation and local, specific controls that should appear in context.
I began by iterating and continuously presenting set-based design concepts to internal stakeholders review and approval.
Once concepts were approved inside TraceLink, we validated with real users (recruited from our persona groups) to ensure the new patterns meet or exceed expectations.
I found 2 patterns to be the most effective…
Styling aspects on-sbrand
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Horizontal Tabs
A common UI pattern that fuels categorization at the top of the page. Also affords flexibility and nuance within the second level of navigation. Power users can seamlessly switch between contexts efficiently.
Drawer Navigation
Revealed through user interaction (e.g. progressive disclosure) this pattern also supports categorization, but uses screen real estate more effectively, providing space contextual and focused actions.