Global Header Strategy & Web Service Tool
Established a centralized web service and governance framework to unify brand standards and navigation across a fragmented global ecosystem of affiliate websites.
Role
UX Strategist & Designer
Industry
IT & SaaS
Focus
UX Strategy & Governance
The Goal
To unify the fragmented digital ecosystem of HPE-affiliated websites. I led the UX research and design for a centralized Header Web Service, providing a standardized navigation framework that maintained brand integrity across multiple CMS platforms and cross-functional teams.
Phase 1: Ecosystem Audit & IA Research
Before designing, I had to understand the vast landscape of existing websites, each with unique business needs and technical constraints.
Global Navigation Audit: Audited dozens of affiliate websites to identify inconsistencies in navigation patterns and information architecture.
Strategic IA Guidance: Provided stakeholders with suggested IA restructurings for each site, advocating for a more user-centric approach to content discovery.
Competitive Research: Researched industry leaders with deep web architectures to identify best-in-class solutions for managing complex primary and secondary navigation hierarchies.
Phase 2: Design Engineering & Accessibility
The challenge was creating a single header that was flexible enough for every team but rigid enough to protect the brand.
Sub-Brand Identity System: Designed a standardized "Endorsed Logo" framework for the digital ecosystem. I developed a logic-based system where the HPE master brand was paired with sub-site identifiers (e.g., HPE Education, HPE Support, HPE Careers), ensuring every affiliate site felt like part of a unified family.
Navigation Redesign: Designed a new, dual-layered navigation system (Primary and Secondary bars) featuring redesigned dropdown menus for improved scannability.
Technical Stress-Testing: Tested font sizes, character counts, and link "clickability" to ensure the header could accommodate variable content lengths without breaking the layout.
Inclusive Design: Optimized the system for Accessibility, ensuring high-contrast ratios for font states (default, hover, active) and creating both Light and Dark mode variants.
Phase 3: Responsive Standards & Handoff
Ensuring a pixel-perfect experience across breakpoints was critical for a tool that would be applied to many different sites.
Multi-Breakpoint Consistency: Engineered the header to maintain functional and visual consistency across mobile, tablet, and desktop views.
Figma Dev-Specs: Delivered high-fidelity specifications for development, ensuring the engineering team had a clear roadmap for the "Web Service" implementation.
Governance Framework: Authored documentation covering Component Anatomy and Usage Standards, laying the groundwork for a self-service model in Supernova to empower external teams to implement the header correctly.
Outcomes & Impact
The Header Web Service established a new benchmark for digital design governance across the HPE ecosystem.
Design Governance at Scale: Created a unified standard for affiliate site navigation, providing a "single source of truth" that ensures brand consistency across disparate CMS platforms.
Operational Efficiency: By moving to a standardized web service, we reduced the need for manual design consultations for individual sites, allowing the web team to focus on high-level strategy rather than repetitive executions.
Centralized CSS Control: Established a "central point of control" for the header’s global styling. This allows the brand to push design or accessibility updates across the entire digital ecosystem simultaneously, ensuring 100% consistency as the brand evolves.
Strategic Alignment: Facilitated a shift toward a more cohesive user experience, where sub-brands like HPE Education and HPE Support now feel like a unified part of the master brand journey.