Digital Design System

People Bio Authors: Default

Below, see a visual example of five different display styles. Name, title, e-mail, phone, and biographical content are all possible.

The monospace font is used for the person’s name, and the rest of the test displays in Neue Haas Grotesk.

alt text

Here’s an example of authors as displayed on a blog post. Ensure that each author is accompanied by a title and an e-mail for consistency and positive user experience. On Insights pages, this displays in the main column underneath the body text – not in the right column.

alt text

Below, an example of the module as found in the right column of a solutions page. In this instance, there is no direct person, so the general mailbox name can be listed. However, it’s always best to provide a person as this gives the user more confidence that their query will be addressed.

alt text

<div class="people" id="bio-people">
    <h5 class="heading-5">Meet our Experts</h5>
    <hr class="horizontal-rule--thick">
    <div class="media">
        <img src="/images/lisa.jpg" alt="Lisa Braeden" class="people__person-image">
        <div class="media-body">
            <div class="font-weight-semibold">Lisa Braeden</div>
            <div class="font-p-small">ARM, CBCP, CFPS, CBCA, Senior Risk Control Consultant Risk Control and Claim Advocacy Practice</div>
        </div>
    </div>
    <hr class="">
    <div class="media">
        <img src="/images/gordon.jpg" alt="Gordon Walker" class="people__person-image">
        <div class="media-body">
            <div class="font-p-small font-weight-semibold">Gordon Walker</div>
            <div class="font-p-small">Cyber Specialist</div>
        </div>
    </div>
    <hr class="">
    <div class="media">
        <img src="/images/moira.jpg" alt="<a href=&quot;#&quot;>Moira Queen</a>" class="people__person-image">
        <div class="media-body">
            <div class="font-p-small font-weight-semibold"><a href="#">Moira Queen</a></div>
            <div class="font-p-small">Senior Cyber Specialist</div>
            <div class="font-p-small people__contact-info">
                <span class="font-p-small people__contact-email">
                    <span class="material-symbols-outlined" aria-hidden="true">email</span>
                    <a href="mailto:example@email.com" class="font-weight-bold">Email</a>
                </span>
                <span class="font-p-small people__contact-phone">
                    <span class="material-symbols-outlined" aria-hidden="true">phone</span>
                    <a href="tel:+19738292920" class="font-weight-bold">+1 973 829 2920</a>
                </span>
            </div>
        </div>
    </div>
    <hr class="">
    <div class="media">
        <div class="media-body">
            <div class="font-p-small font-weight-semibold"><a href="#">Moira Queen</a></div>
            <div class="font-p-small">Senior Cyber Specialist</div>
            <div class="font-p-small people__contact-info">
                <span class="font-p-small people__contact-email">
                    <span class="material-symbols-outlined" aria-hidden="true">email</span>
                    <a href="mailto:example@email.com" class="font-weight-bold">Email</a>
                </span>
                <span class="font-p-small people__contact-phone">
                    <span class="material-symbols-outlined" aria-hidden="true">phone</span>
                    <a href="tel:+19738292920" class="font-weight-bold">+1 973 829 2920</a>
            </div>
            </span>
        </div>
    </div>
    <hr class="">
    <div class="media">
        <img src="/images/quentin.jpg" alt="Quentin Lance" class="people__person-image">
        <div class="media-body">
            <div class="font-p-small font-weight-semibold">Quentin Lance</div>
            <div class="font-p-small">Head of Global Cyber Risk </div>
            <p class="font-p-small people__person-bio">Quentin has extensive experience in cyber risk management, with a focus on related risk transfer solutions as well as cyber and privacy risk mitigation techniques in employee engagement, incident response, and vendor management. </p>
        </div>
    </div>
    <hr class="">
</div>

This module is used to display people (contacts), short bios, and/or authors.

Possible uses are to represent authors mentioned in the byline, or to display contacts for an insight.

All items must meet WCAG 2.1 AA criteria, including imagery and links.

Key specs

  • Name, Title, E-mail, Phone, and Photo
  • Name and one contact method is requried
  • Max of 6 people
  • Photo headshot must be 1:1 ratio, at least 150×150 pixels, as a .jpg
  • This module requires consistency for best display. Its use across templates is strictly moderated to ensure consistency for users.
  • The module is can flex based on the content that is available. If including a bio, keep it short & concise – 140 characters max. Typically, only include the bio for authors of blog posts.
  • Always try to use a photo, and that photo must be a 1:1 ratio. (No rectangular photos). Including a photo will provide a user with context and confidence in the content or solution.
  • Include the People/Authors/Bios module when there is a byline that mentions names of authors. This improves user experience and helps visualize WTW’s expertise.

Where should the module go?

  • On any insights page, the module should go in the main column directly under the body, immediately above related tags.
  • On any capabilities page, the module can go in the right column. Do not overload the column with contacts. Too many contacts will overwhelm the user and they will be less likely to contact.
  • On a press page, use the full-width column. This is the only place that the full-width module should be used.

Do not use People / Authors / Bios across the full-width of an Insight or Solutions page.

This treatment is meant only for the Press Page and has a very specific layout.

alt text