Defining Cohesive Digital Experience

A cohesive digital experience is one where the user can traverse related ITS systems and websites in a seamless, frictionless, and intuitive way.

This is achieved through:

  • consistent branding
  • common visual elements
  • standard labels and structure
  • cross-device compatibility

much of which is outlined in the ITS Web Strategy.

Cohesive does not mean identical.
Think of the ITS websites as a house, with each website and app a room in that house. Rooms have different purposes, but they can show unity within a house through complementary decor and functional layout.

How We Achieve Cohesive Digital Experience

Below are examples of how we maintain cohesion across our sites and apps. We recognize that not all vendor systems are highly customizable; in those cases we do our best to meet the guidelines.

Accessibility

Our websites and apps should be usable regardless of method of access or ability. The ITS Web Strategy provides guidance in developing for accessibility. The IT Accessibility website provides information about providing digital materials to the U-M Community.

Style

The ITS Style Guide provides a color palette, typefaces, and styling guidelines for common semantic elements, like headings, buttons, lists, navigation menus, and more.

Header

  • Uses the same color palette and font styles
  • Placement of key elements (e.g., logo at the top left of page, search bar on top right of page)


ITS homepage header


Tech Shop homepage header

Logo

  • ITS represented in the logo
    • Main site uses the long ITS wordmark
    • Apps/subsites use the ITS service wordmark
  • ITS Name in the upper left corner

ITS homepage with long ITS wordmark


Documentation with ITS service wordmark

Footers

  • Use the same color palette and font styles
  • Information and Technology Services link at the top of first or second column
  • Include a standard link to “Contact ITS” and, if space permits, standard feedback/support language
  • Have a standard language for websites we create for other groups. E.g., “Provided by ITS” or “Brought to you by ITS”


ITS footer


Safe Computing footer