image of Publication Hub website
Cisco logo

Publication Hub

During 2017-21, I helped create best practices for Cisco design system users.

Skills

  • UX design
  • Visual/interaction design
  • Prototyping
  • Wireframing
  • UX research
  • Customer interviews

Tools

  • Sketch
  • Adobe Photoshop
  • Zeplin
  • Axure
  • UserZoom
  • Adobe Analytics

Discovery

The Cisco.com Design System Team (stakeholder) ran workshops with these users to understand their biggest pain points while authoring content on Cisco.com:
  • Employees: site publishers, engineers, designers
  • Partners: creative vendors

Pain points

Single source of truth

Prior to this project, some component details existed on spreadsheets or in disparate locations. This created room for error due to regular component updates.

Live examples

No live examples of components for handheld devices in a staging environment available to publishers.

UX Guidance

Lack of design resources and guidance in terms of where, how and why to use components.

Solution

The first version went live for employees in 2019 and addressed three major publisher pain points. It was built using Adobe Experience Manager components, which significantly reduced the engineering timeline.

Image of component detail pages

Component Details

Gathered information and created layout for component detail template page using Sketch and Photoshop. The template was used to convey technical specifications for 25 components. The pages also contained live previews of components in mobile and tablet screen sizes. Publishers reported finding the styleguide helpful and heatmaps showed users engaged with component index and bookmarking detail pages the most.

images of page layouts

Page Layouts

Created example pages with component recommendations to give publishers ideas on how to structure different page types. This also included content and imagery guidance for each component shown.

image of axure wireframes

Vendor kit

Used Axure to create a library of responsive workhorse components that demonstrated basic functionality. This kit was used by other designers and creative vendors who wanted to create prototyes to preview their Cisco.com content.

Results

Success metrics

Metrics were collected using Adobe Analytics from December 13 2018 - May 15, 2020. We learned that the site got a lot of repeat business (file downloads, page bookmarks, and time spent on component pages) from ~5K employees or customers.

Primary button

5.7K

Unique employees & partners visited the site*

4.9K

Unique visitors bookmarked the page

9 min

Average time spent (without bounces)

481

Video views

*Compare to 28.2K unique visitors on the public Cisco.com homepage, which is public-facing and includes customers.