How to build a staff listing?

This example assumes that you've already setup your fields and added the pages just as they are in the link you posted. It further assumes that each staff member is a page living under /about/staff/. An example would be: /about/staff/jemma-weston/

I'm going to assume these are the field names:

title (person's first/last name)
image (person's photo)
team (per your link)
job_title (per your link)
email (per your link)

To output the staff listing, you would do something like this:

<?php

echo "<ul class='staff_listing'>";

foreach($page->children as $person) {

    if($person->image) {
        // make 150px wide thumbnail
        $image = $person->image->width(150);
        $img = "<img src='{$image->url}' alt='{$person->title}' />";
    } else {
        // make some placeholder (optional)
        $img = "<span class='image_placeholder'>Image not available</span>";
    } 

    echo "
        <li>
        $img
        <ul class='staff_detail'>
            <li><strong>Name:</strong> {$person->title}</li>
            <li><strong>Team:</strong> {$person->team}</li>
            <li><strong>Job Title:</strong> {$person->job_title}</li>
            <li><strong>Email: {$person->email}</li>
        </ul>    
        </li>
        ";
}

echo "</ul>";

Optional
Another scenario might be where you want the "team" or "job_title" fields to be from a pre-selected list, and to themselves be pages that the user could click on to view everyone in the "Audit and Accounts" team (for example).

The way you would set that up is to create a new structure of pages that has all of the Team types (and/or Job Titles), like this:

/about/staff/teams/audit-and-accounts/
/about/staff/teams/business-services/
/about/staff/teams/practice-management/
...and so on...

I would use a new template for your team types, something like team_type.php. The only field it needs to have is a title field. At the same time, I would move your staff members into their own parent like /about/staff/people/.

In your staff template, you would make the "team" field be of the field type called "Page". When you create it, it will ask you from what set of pages you want it to use, and you can tell us to use /about/staff/teams/. It'll ask you if you want it to hold one page or multiple pages (PageArray), and you'll want to choose Page (one page). Likewise, where it asks you to select what type of input field you want to use, choose a "Select" or "Radio Buttons" field (and not one of the multiple select types). Add that new "team" field to the staff template, and when you add/edit a staff member, you'll select a team rather than type one in. Your markup to output that field in the staff listing would instead be like this:

<li><strong>Team:</strong> <a href='{$person->team->url}'>{$person->team->title}</a></li>

Your team_type.php template would list the staff members just like your main /about/staff/ page did (it might even be good to include your staff_list template to do it for you, or convert it to a reusable function), except that it would load the staff members like this:

<?php
$staff = $pages->get("/about/staff/people/")->children("team=$page"); 

foreach($staff as $person) {
    // ... 
}

The main thing to note in the example above is the "team=$page" portion, which is essentially telling ProcessWire to pull all staff members that have a "team" field that points to the current page. So if you are viewing the /about/staff/teams/audit-and-accounts/ page, then it's going to load all staff members that are in that team.

I forgot to reply to your question about sorting by the "team" field. If that's the way you always want them to sort by default, then I would suggest just setting that as your sort field when you edit the page (in the Children tab). When you do that, they'll always be sorted that way on any children() call, unless you've specified a different sort.

But if you want to keep them alphabetical in the admin, and sorted by Team followed by the person's full-name (stored in the 'title' field) on the front end, you can have ProcessWire sort them for you when you load the staff members:

$staff = $pages->get("/about/staff/people/")->children("sort=team, sort=title");

If "team" is a page reference, like in the optional section in my previous message above, then your selector will look a little different:

$staff = $pages->get("/about/staff/people/")->children("sort=team.name, sort=title");

The selectors above are saying to sort by team first, and the person's full-name (stored in the 'title' field) second.

In the second example, "team" is a page reference. Since a page contains lots of different fields, we have to tell it which one, so we're telling it to sort by the "team" page's "name" field.