Responsive Product Pages

Cisco dips its toe in responsive web pages, launching responsive versions of key pages from the product catalog. EightShapes designs the experience, providing initial concepts, final design, and production HTML/CSS.

Techniques used: collaborative brainstorming, visual design, information architecture, interaction design, responsive design, production HTML/CSS

Design Challenge

Like many companies, Cisco continues to evaluate responsive web design. The cost in time, effort, and system updates for massive sites can derail such projects before they begin. The transition forces organizations to confront countless other user experience challenges: consolidating content, revisiting information architecture, reconsidering navigation. But, you’ve got to start somewhere.

To coincide with an upcoming marketing campaign, Cisco’s product team wanted to revise and enhance page layouts as responsive and launch them within the mobile products site. The exercise yielded an elegant translation of their existing pages and informed the team on how such projects work, from brainstorming and design to front-end implementation, content migration, and launch.


EightShapes produced a responsive web design for the Unified Computing Servers product category as well as numerous product series offered there. These page templates incorporate several different kinds of content — product overviews, galleries, data sheets, product specs, benefits, tips, and much more.

To meet the project’s aggressive timeline, EightShapes:

  • Paired prototypers and designers, allowing them to explore multiple aspects of the user experience in conjunction with the responsive approach.
  • Built a prototype demonstrating the overall concept–including layout, responsive behaviors, and navigation––in the space of a week.
  • Established a plan for migrating content.
  • Elaborated the concept, clarifying features and interaction behaviors.
  • Built production-grade HTML and CSS templates.

Martin Hardee, Director of User Experience, wrote a summary of the project on his blog.