Publication Hub
Role & Goals
Role : My role as a primary designer was to be involved in the launch and maintenance of Pub Hub. I gathered stakeholder feedback to identify wants and needs, then strategized with my design team on how to build the initial concept, produce new components, then hand off for development.
Goals : Bring innovative digital experiences to cisco.com while maintaining Brand standards. Make pages lighter, faster, mobile responsive, and SEO optimized to improve overall engagement.
Cisco Pub Hub is a website built upon Cisco AEM components that serves as a resource for publishers authoring content on Cisco.com.
Anchor Marquee
It serves as an introduction to page content and contains crucial structural elements like the breadcrumb, title, and a brief (one or two sentences) description. Up to two calls to action (CTAs) can be included (option to link to video lightbox). You can customize the overall positioning of the text area (title and description) to be left or center and top or middle. The width of the text area is flexible, so text can be left or center justified. A good rule is to style the text in one of two ways: middle position and center-justify the text area or left position and left-justify the text area. The Anchor Marquee displays its text over a background color or a photo-based image asset of your choice.
Tiles
Tiles are always used in groups. Each individual tile contains content that describes and points to a single, high-value destination relevant to the page’s topic. A tile can consist of just text or include an image or icon. An individual tile can have a single call to action, but a Tile blade can also have a group or blade, CTA.
Prescriptive Architecture Category Design Guide
Deploying a high-performing, optimized, Category level page with a tested, standardized prescriptive architecture layout. To navigate the page quickly and seamlessly. Reduce customization to support user readability, engagement, and conversion.
Anchor, Sticky navigation, and CTAs welcomes customers to the page and include one to two calls to action (CTAs), and can also include an optional video. Place one or two of your top-performing assets here to engage the customer
Why? Use standards for the Blade component, including header and copy. Text copy should support content thickening and search optimization for the page. Content should describe what the product is and our differentiators.
Category products routing, and software this section should consolidate the category's top-performing subcategories of products as linked tiles without images or bullets. Use the Tiles without image blade with CTA buttons for a minimum of three, six, or a maximum of nine Tiles. An odd number of Tiles is allowed, though discouraged (refer to Tiles without images).
Solutions and services Use the variation of the blade to showcase two, four, or six top-performing, category, subcategory, or series-related solutions. You may use an odd number, though even is preferred. Consider these optional elements for inclusion: “See all” CTA button; list of linked related targets (i.e., Solutions for Small Business). Label, as shown, is required, lead with 'Solutions for...' Note: there are specific backgrounds allowed, not any image.
Customer stories variation with header, description, and no image or icon to summarize the top-performing services behind the "See all" CTA routing button.
Recommended resources Review analytics and place top-performing resources, like news, announcements, promotions, events, blogs, webinars, etc., in this mosaic variation. Place a minimum of three, six, or a maximum of nine mosaic tiles. No odd number tiles; no mixed-width allowed; use only the 3x row variation.
Support, For Partners, and Footer, Place the standardized Support, For Partners, and Fat Footer blades per Cisco.com requirements detailed below.
