cisco.jpg

Cisco: Responsive Web & Mobile App Design

UI/UX

 

Cisco.com

responsive web design for Cisco

Working with the user experience team, developers, and product managers, I redesigned a variety of responsive product and service pages for Cisco's website.


"Guide Me" Tool

goal

To make it easier for Cisco.com users to find and learn about our different solutions, this “Guide Me” tool was created to help guide users to the best-fit solution.

Responsibility

Lead Visual Designer
Information Architect: Katie Wornson
Design Guidance: Chris Patio


landing page design

The first step of the design project was the design of the "Solutions Guide" landing page - a page that lists Cisco "solutions" (typically hardware or software products) based on selections a user makes with the step-by-step wizard. A filter on the left allows users to browse through other solutions.

A usability test was conducted on the designs to see what was working and what needed to be improved. The primary testing goal was to find out how discoverable and effective the content was. A working prototype of the design was tested.

 

designing the wizard experience

Another component of the "Guide Me Tool" was the step-by-step wizard experience that served as the entry point for users to discover the tool. The wizard was designed to be bold and attractive, using photography and Cisco brand colors to engage the user.


eCommerce Experience Design

goal

This project focused on building and improving Cisco's emerging 'end to end' commerce online experience.

responsibilities

Lead Visual Design, Interaction Design
Support from Cisco Build and Price Team


the product landing Page

Working with the information architects on my team, I first sketched of a Switches product landing page. Post-its of other feature ideas or components to the page were added as we discussed our vision for the page.

The final landing page highlights the wizard on the top of the page, with some featured promotions on the bottom. By using the "Guide Me" wizard at the top, the user is able to have control over the types of switches they see, using specification filters. 

 

selecting and comparing models

Once the user chooses certain parameters to filter for switches, they are able to select different models and compare them in a table. This type of table layout is typical for many eCommerce websites and was the inspiration for this design. 

 

adding and configuring models

The user is now able to add switch products to their cart, once they decide which one they like to purchase. For certain products, the user is able to configure the model before adding to their cart (right.)