Persona Tour Grid

About this block

Persona Tour Grid shows one product through three sets of eyes. A centered heading and lede sit above three persona columns, for marketers, for analysts, for managers, each pairing a distinct framed home screen mockup with the role name, a two line description, and a lands on note. The three screens, a campaign calendar, an attribution chart, and an approval queue, are what prove the same workspace greets each role differently.

The personas are one array of role, home, text, and a screen component, and each screen is a small local component built from rounded divs and one inline svg, no screenshots to keep current. The calendar chips, the highlighted stat card, and the waiting badge are the details that make three mockups read as three real rooms. The block stays a server component built from markup and theme tokens.

When to use

Reach for this block when a product serves several roles who each judge it by their own home screen. Showing marketer, analyst, and manager views side by side lets a mixed buying committee each find themselves in one glance. It is the role indexed cousin of side-tabs-tour, which tours the same views behind tabs rather than laying all three out at once.

A natural flow around it on a Marketing Pro page:

Before

• Heroes naming the product before the role views split it apart

After

• Feature sections going deep on the screen a role cares about most
• Pricing once every role has seen its home

What you can display

One strong use is the three roles of a marketing platform. Other grids:

• Seniority views. Rep, manager, and director dashboards for a sales tool.
• Department homes. Design, engineering, and product screens for a cross team platform.
• Plan tiers. Starter, growth, and enterprise home screens showing what each unlocks.

Tip: give each screen one signature element, a calendar, a chart, a queue, distinct silhouettes are what let a scanner tell the three roles apart before reading a word.