Cisco Design System “Pubhub”
Role: UI Designer | Date : 2018 - 2019 | Client: Cisco
Project Overview
Cisco Publication Hub is a unified design system and component library built on Adobe Experience Manager (AEM) that enables non-technical publishers to create professional, on-brand web pages without developer support.
As the lead designer, I was responsible for the platform's launch and ongoing evolution—from initial concept through implementation. I collaborated closely with stakeholders across marketing, engineering, and brand teams to ensure the system met diverse needs while maintaining consistency across Cisco.com's 10,000+ pages.
The Problem
What We Were Solving
The Challenge
Before Pub Hub, Cisco publishers faced significant obstacles:
12 different tools created inconsistent experiences across the site
3-week turnaround for simple page updates requiring developer intervention
Poor performance: slow load times and low mobile scores
Brand inconsistency across thousands of product pages
No scalability as product teams grew globally
The Solution
We created a unified system that:
One platform with drag-and-drop components—no coding required
Days instead of weeks for page creation and updates
Built-in performance: SEO optimization, fast loading, mobile-first
Automatic brand compliance through component guardrails
Self-service publishing scaled to 200+ users globally
Results
Measurable Impact
How Publication Hub transformed content creation at Cisco
Additional Outcomes
Onboarded 200+ non-technical publishers across 6 countries
Increased mobile traffic engagement by 35%
Improved SEO rankings for 80% of migrated pages
Reduced design and QA tickets by 60%
Became the standard template for all Cisco product category pages
Eliminated brand compliance violations on new pages
Approach
Design Process
How we built a system that scaled across the organization
Interviewed 30+ publishers to understand pain points and workflows
Analyzed top-performing pages to identify patterns and components
Created flexible components with built-in brand guardrails
Ran usability tests and refined based on publisher feedback
Components
Key Design Solutions
Anchor Marquee
The Challenge - Publishers needed a hero section that worked for both high-impact product launches and evergreen technical content—two very different use cases with conflicting needs.
Design Decision - I created a flexible marquee system with customizable text positioning and optional video support. This allowed marketing teams to create visual impact while technical teams could prioritize clarity and information density.
Key Features
Responsive text sizing that adapts to mobile viewports
A/B tested CTA placement (top vs. bottom performed 23% better)
Accessibility-first color contrast validation system
Optional video lightbox that doesn't impact page load
Tile Component
User Research Insight - Analytics showed users were overwhelmed by dense product listings. Click-through rates dropped 40% when more than 6 options were presented without visual hierarchy.
Design Solution - Created a tile system that highlights single, high-value destinations. Each tile can include text, icons, or images—but is constrained to one CTA to reduce decision fatigue.
Variants & Use Cases
Icon tiles: For product categories and routing pages
Image tiles: For solutions and customer stories
Text-only tiles: For resource lists and documentation
Grid system enforces 3, 6, or 9 tiles (even numbers tested better)
Mosaic Layout
The Challenge - Publishers needed a way to showcase multiple resources (blogs, webinars, news, case studies) without creating visual chaos or decision paralysis.
Design Approach - Developed a mosaic pattern that uses asymmetric sizing to create visual hierarchy. The featured position (left, larger) gets 3x more engagement than standard grid items.
Performance Optimization
Lazy-loaded images reduce initial page weight by 60%
Analytics integration shows which content performs best
Supports 3, 6, or 9 items with consistent visual rhythm
"See all" CTA prevents content overload on the parent page
System Architecture
Prescriptive Page Templates
Creating a structured system that guides publishers to build high-converting pages
Landing Page Structure
The Challenge - Publishers needed a hero section that worked for both high-impact product launches and evergreen technical content—two very different use cases with conflicting needs.
Design Decision - I created a flexible marquee system with customizable text positioning and optional video support. This allowed marketing teams to create visual impact while technical teams could prioritize clarity and information density.
Key Features
Responsive text sizing that adapts to mobile viewports
A/B tested CTA placement (top vs. bottom performed 23% better)
Accessibility-first color contrast validation system
Optional video lightbox that doesn't impact page load
Reflection
Key Learnings
Data Drives Adoption
Showing publishers that Pub Hub pages performed 40% better in SEO and load speed was more convincing than any design argument. Leading with metrics accelerated buy-in across skeptical teams.
Constraints Enable Creativity
Initially, publishers wanted unlimited customization. By constraining options to tested, high-performing patterns, we actually empowered faster, better decision-making. The "creative freedom paradox" proved true—less choice led to better outcomes.
Training is Product Design
The system's success depended as much on training materials as the components themselves. I learned to design documentation, tutorials, and onboarding as carefully as the UI—these were critical product surfaces.
Scale Requires Iteration
We launched with 12 components. Over 6 months, user feedback revealed edge cases and new needs. Building a feedback loop and quarterly updates was essential to maintaining publisher trust and system relevance.
Components
Key Design Solutions
Anchor Marquee
The Challenge - Publishers needed a hero section that worked for both high-impact product launches and evergreen technical content—two very different use cases with conflicting needs.
Design Decision - I created a flexible marquee system with customizable text positioning and optional video support. This allowed marketing teams to create visual impact while technical teams could prioritize clarity and information density.
Key Features
Responsive text sizing that adapts to mobile viewports
A/B tested CTA placement (top vs. bottom performed 23% better)
Accessibility-first color contrast validation system
Optional video lightbox that doesn't impact page load
Other Projects
HubSpot - Breeze Visual Design
HubSpot - Design Strategy
Cisco - Mobile Apps