Design Pattern: Parallel Experiences

Someone else might have already named this pattern, but for my purposes, I’m calling it “Parallel Experiences.”

Problem: Sections of the web experience must be visually associated at a high level, but are very different from one another in content, brand, or look/feel.  Audiences are likely to have arrived in search of content from a single section.

Solution 1: Global Toggle

The global toggle laces multiple sites together though a tab structure at top.

The  tab area itself usually has minimal branding, since the tabs themselves often have disparate visual styles.

This structure offers persistent access to all other top-level sections.

Sears Homepage: Global Toggle

Old Navy Homepage: Global Toggle

Solution 2: Fork-in-the-Road + Lingering Scent Trail

Sapient has 3 distinct divisions, each of which has its own unique messaging needs.  On the sapient.com homepage, the user is presented with a fork-in-the-road, where they choose between those 3 divisions.

Note that each section of the Sapient site falls in line with the visual direction set forth on the homepage.

Sapient Homepage: Fork-in-the-road Approach

On sub-pages, that initial decision is docked in a breadcrumb-like way.

Note that rather than offering persistent access to each parallel experience, the logo at top right serves as persistent access to the homepage where the fork-in-the-road is presented.

Supient Subpages: Lingering Scent Trail

What other solutions have you seen to this particular design challenge?

See also

1. Setting User Expectations for Video Using Thumbnails
2. It’s OK to Tease: Matching Mental Models to Design Patterns
3. Design Pattern Libraries