Cisco Design System
Role: UX/UI Designer & Researcher | Date : Summer & Winter 2016 | Client: Design Lab
Overview
Cisco Pub Hub is a dynamic website powered by Adobe Experience Manager (AEM) components, designed to empower publishers in creating and managing content seamlessly on Cisco.com. The platform delivers innovative digital experiences while maintaining strict brand standards, with a focus on creating lightweight, fast, mobile-responsive, and SEO-optimized pages.
My Role
Visual Designer
Primary designer responsible for the launch and ongoing maintenance of the Pub Hub platform
Design System Development
Collaborated with the design team to develop concepts and create reusable components
Stakeholder Collaboration
Gathered feedback from stakeholders to identify needs and priorities across the organization
Developer Handoff
Ensured seamless transition to development with comprehensive documentation and specifications
Impact and Results
Key Components Designed
Anchor Marquee - An introductory hero component featuring breadcrumb navigation, title, description, and up to two CTAs with an optional video lightbox. Offers flexible text alignment (left/center) and positioning (top/middle) with customizable backgrounds.
Solution Showcase - Dedicated blade for featuring 2-6 category-related solutions with optional "See all" CTA and linked related targets. Includes specific background treatments and required labeling conventions.
Tile System - Flexible tile groups for highlighting high-value destinations. Supports text-only, image, or icon variations with individual or group-level CTAs. Optimized for presenting 3-9 items with even distribution preferred.
Resource Mosaic - Analytics-driven component for displaying top-performing resources including news, blogs, events, and webinars. Supports 3-9 items in a standardized 3x row variation.
Design Approach
Prescriptive Architecture
Developed a standardized, tested layout system for category-level pages that reduces customization while improving user readability, engagement, and conversion. The architecture prioritizes:
- Quick and seamless page navigation with clear information hierarchy
- Strategic CTA placement based on customer engagement data
- Content optimization for search engine performance
- Mobile-first responsive design principles
- Brand consistency across all Cisco.com properties
Key Learnings
Standardization drives adoption: Clear guidelines and limited variations help users create better content faster
Data-informed design: Analytics helped prioritize component features and placement strategies
Scalability requires constraints: Smart limitations empower users without sacrificing brand integrity
Documentation is design: Comprehensive usage guides are as important as the components themselves
