Guest

Cisco.com User Experience Guidelines and Standards

Design Process

1. Gather requirements and define goals

Without understanding how your site is used, creating a successful web site isn't possible. However, it is also important to balance the user’s needs with business needs and assumptions. Both need to be considered. The table below illustrates the ends of the spectrum. The best design solution comes from an understanding of the tradeoffs between the two.

Mapping User's Needs to Business Needs
User's Needs Business Needs
The information architecture is designed around specific tasks. The information architecture is built around the organization.
The content follows predictable behavior patterns that reflect the needs and tasks. The content is unique to the business and needs to be handled differently than any other content on the site.
Scrolling is OK. Since the content is complex, users expect to scroll. As much information as possible or the most important information must be above the fold.
Search is used to go directly to the information needed. Users navigate to the information they need.
Headings, sub-headings, bullets and summaries, and any other visual cues on the page are scanned to find the information. Users read paragraphs of text.

Requirements

Great web sites start with clearly identified requirements from a variety of sources, such as Business, Marketing, Development and User Experience teams. Well-defined requirements guide the development, from the information architecture and navigation (including the terminology and category names) to the page headers and text. Specifically, these guidelines are written with web developers, designers, and business sponsors in mind.

Goals

Specific project goals help create well defined project requirements. Gather project goals from a variety of sources such as the Business and Marketing teams, Cisco Partners and Resellers and end users.

Audience

Identifying the user experience includes knowing the audience and what they want to do. Knowing why and how users are interacting with the content form the basis of the design requirements. If a designer is then faced with different options, the requirements can help drive the best solution. The optimal user experience takes all of this information into consideration.

Success Metrics

There are two sets of metrics that track and evaluate your success: business metrics and UE metrics.

The business metrics include:

  • Amount and sources of traffic
  • Revenue opportunities
  • Freshness and quality of content
  • Customer satisfaction

The user experience metrics include:

  • User testing
  • Time parameters for accomplishing specific tasks
  • Successfully meeting predetermined design goals and success criteria


2. Build your team

At Cisco, it is not uncommon that a single person performs the responsibilities described below. However, if you are relying on either in-house partners or external vendors to develop your site, roles must be outlined and tasks must be assigned to each team member accordingly.

When building a team, be sure to discuss the following:

  • Top-level vision for the site
  • Overall working style
  • Method for communicating
  • Cisco.com User Experience Standards & Guidelines
  • Roles and expectations, including site maintenance responsibilities
  • Time line of the project (scope how long it might take to complete each phase, given the purpose and functionality, as well as balancing against other initiatives/projects)
Roles and responsibilities for Cisco.com
Role Responsibilities
Business/Content Owner The Business/Content Owner is the primary stakeholder for the content that lives on Cisco.com.
  • Creates the content for the site and is responsible for ensuring all content fulfills the legal and corporate editorial standards.
  • Responsible for the timeliness and accuracy of the content and should refresh/remove/ archive outdated content.
Web Marketing Lead Manages a wider content area of Cisco.com.
  • Is an advocate and representative for Cisco.com needs back to Content Owners.
  • Advises Content Owners on best practices and processes, particularly in how they relate to Cisco.com operations and initiatives.
  • Helps influence timeliness helps coordinate engagements between Content Owners, Web Developers, Corporate Marketing functions, and the Cisco.com team to ensure a timely and successful site implementation.
  • Engages the appropriate Cisco.com experts when needed.
Web Developer Designs and develops web pages on Cisco.com.
  • Creates mockups, codes web pages, and publishes web pages to the appropriate web platform (data-driven, Hybrid, 3rd party platform).
  • Normally works with Web Marketing Leads and with Cisco.com User Experience and/or Corporate Identity to ensure consistency with the overall site framework and visual language.
User Experience Designer Responsible for the overall user experience on Cisco.com.
  • Designs the overall architecture/navigation, visual framework and site wide design elements which are implemented on the web site by the Web Developers.
Executive Editor Ensures content on Cisco.com adheres to Corporate Editorial Standards.
  • Reviews and rewrites content for high level pages (product category pages, demand-gen pages, main pages off Cisco.com, industry pages, high-traffic marketing pages).
  • Has authority to make editorial changes on these high-level pages.
  • Reviews content prior to posting.
  • Sets basic style guidelines based on page templates, marketing goals, and information needs.
Corporate Brand Manager Ensures graphics and photography on Cisco.com adhere to Corporate brand and identity standards.



3. Create your site architecture

Based on the requirements and goals you identified in the first phase of the process (requirements gathering), create an architecture based on those goals and you’ll achieve higher user satisfaction as well as meet the goals of the business. As the UE designer, your working relationship with the business/content owner will lead to an information architecture that more accurately reflects the priorities of the user and business goals.

Effective architectures are being used within the larger Cisco.com site, so take advantage of and learn from other well established architectures.

Work with the UE team if you have a problem defining your architecture and would like design guidance. Learn more - Engage with the UE Team.



4. Assess and develop content

Once you have defined your site’s architecture, objectively review the existing content and determine if the content reflects the architecture you've defined. Analyze the difference between the existing content and the proposed architecture to determine where content may need to be created, edited, and/or retired.

In particular, take a close look at the following types of content:

  • Introductions
  • Short descriptions of links
  • Photography and graphics: do they enhance the message?
  • End of tree documents, such as White Papers, Data Sheets and Case Studies

Once you have identified the content that will live on each page, use the Content Assessment Spreadsheet to prioritize the content. How you lay out each page will determine which content receives higher visual priority.

Whether you have updated existing content or written new content for your site, email it to (cdc-edit@cisco.com) for review.



5. Usability and metrics

Establish the usability goals for the site and determine the usage metrics that will be used as a baseline to track against the defined business objectives. Leverage the expertise of the User Research team. Refer to services available and previous research and studies.

Things to consider:

  • Time on tasks, error rates, retention, learning curves
  • Industry best practices
  • Iterative prototyping and usability testing to confirm the effectiveness of the site architecture and design
  • Include hit box tags on your pages to track specific click through rates


6. Build your site

Once you have a well-defined set of goals, a usable site architecture, updated content, and clear usability and metrics, refer to the Layout Your Pages section to determine the placement and positioning of the content for each page.

Access the Content CSS Developer Kit to develop your HTML pages. By using the Content CSS, your site automatically achieves an acceptable level of conformance to the Cisco.com UE Guidelines and adherence to the Cisco brand, look and feel. The Content CSS incorporates the most fundamental level of adherence to the design standards; however, it is a minimal level. The best sites start with the Content CSS and effectively use the variety of design elements illustrated in the CUEG.

If you are unable to develop within either the Cisco.com Data Driven or Hybrid systems, get the code for the framework from the Vendor Kit. Check back often for updates to keep your site compliant with the Cisco.com framework.