Most service businesses treat the team page as an obligation. Someone exports a folder of headshots, pastes in job titles, and the page quietly becomes the least loved URL on the site. Yet analytics tell a different story: for agencies, consultancies, law firms, clinics and B2B service providers, the team page is very often the second or third most visited page after the homepage and the services page.
That is because buyers of services are not buying a product. They are buying the people. Good team page design answers the question every prospect asks before they fill in your contact form: who exactly am I going to be working with, and can I trust them?
This guide is a practical walkthrough of the choices that matter: layout, photo style, bio length, role clarity, hover interactions and internal linking. No mood boards, no theoretical design theory. Just decisions you can implement this week.
Why the team page quietly decides whether you win the deal
A prospect landing on your team page is usually in one of four mindsets:
- Validation: “They pitched well. Are these people real and experienced?”
- Matching: “Who would actually handle my account?”
- Recruitment: “Would I want to work here?”
- Scale check: “Are they three freelancers in a group chat or a genuine team?”
A page of stock-ish photos and titles like “Senior Solutions Architect” answers none of those. A well built team page answers all four in under 30 seconds of scrolling. That is the entire design brief.
Step 1: Choose a layout that matches your team size
The single biggest mistake is copying an agency layout built for 60 people when you have 7, or squeezing 80 people into a layout designed for a founding trio. Pick the structure first, then design.
| Team size | Recommended layout | Why it works |
|---|---|---|
| 2 to 6 people | Editorial rows: large photo left, long bio right, alternating sides | Small teams win on depth and personality, not headcount |
| 7 to 20 people | 3 or 4 column grid with a short bio on hover or click | Shows scale at a glance while keeping detail one interaction away |
| 20 to 60 people | Leadership block on top, then a filterable grid by department | Buyers scan for the decision makers first, then their future contacts |
| 60+ people | Leadership page plus a searchable directory with location and expertise filters | At this size, findability beats storytelling |
Order matters more than you think
Alphabetical order feels neutral but it buries the people prospects care about. A better hierarchy:
- Founders and leadership (2 to 4 people maximum in the top block)
- Client facing roles: account leads, project managers, consultants
- Delivery and specialist roles, grouped by discipline
- Support functions
If internal politics make ranking awkward, group by department and randomise within each group on page load. It stays fair and it keeps the page feeling alive.
Step 2: Get the photography consistent (this is 80% of the perceived quality)
Nothing screams “we cobbled this together” like a grid where one person is on a white backdrop, another is cropped out of a wedding photo, and a third is a LinkedIn selfie in a car. Consistency of framing beats expensive photography every single time.
A simple headshot spec you can send to your photographer or team
| Element | Specification |
|---|---|
| Crop | Mid chest to just above the head, eyes on the upper third line |
| Aspect ratio | 4:5 portrait for grids, 1:1 for compact directories. Never mix on one page |
| Background | One single backdrop for everyone, ideally a brand colour or the real office wall |
| Lighting | Soft, from one side, same direction for the whole team |
| Wardrobe | Suggest a tone range (dark neutrals, or no logos) rather than a strict uniform |
| File size | Under 90 KB each in WebP or AVIF, lazy loaded below the fold |
Three photo styles that work, and one that does not
- Studio neutral: plain backdrop, natural expression. Safest option, ages well, easy to add new hires.
- Environmental: shot at the desk, workshop, clinic or site. Great for trades, healthcare and manufacturing where the environment is the proof.
- Duotone or brand tinted: a colour treatment applied uniformly. Instantly hides mismatched source photos, which makes it perfect for remote teams.
- What does not work: illustrated avatars or icon placeholders for real people. They read as “we are hiding something”, and prospects notice.
Remote team tip: send everyone a one page shooting guide (window on the left, plain wall, phone at eye level, portrait mode off), then apply the same crop and colour grade to every image. The result looks deliberate rather than improvised.
Step 3: Write bios people actually read
The classic failure is a 400 word career history that starts with “John graduated in 2004 from…”. Nobody reads it. The opposite failure, a name and a title only, gives no reason to trust anyone.
The bio length rule
| Placement | Length | Must contain |
|---|---|---|
| Grid card (visible) | 8 to 15 words | What this person does for clients, in plain language |
| Expanded card or modal | 50 to 90 words | Specialism, years of experience, one proof point, one human detail |
| Individual profile page | 150 to 300 words | Career context, credentials, linked case studies, articles authored |
A four line bio formula that works
- Line 1: The job in client terms. “Sarah runs the migration projects, so nothing breaks when you move platform.”
- Line 2: The proof. “11 years in ecommerce, 40+ replatforming projects, including Retailer X.”
- Line 3: The specific. One niche skill, certification or market they own.
- Line 4: The human detail. One genuine, short, non cringe fact. “Bakes an aggressive amount of sourdough.”
Keep the human detail to one line only. The moment every bio has three quirky facts, the page turns into a novelty act and the credibility drains away. Also avoid the standardised “fun questions” grid (favourite film, spirit animal) unless your brand is genuinely playful. It reads as filler when the real content is missing.
Step 4: Make roles unmistakably clear
Internal job titles are written for HR systems, not for buyers. “Head of Client Delivery, EMEA” tells a prospect nothing. Give every person two labels:
- The official title, in smaller text, for credibility and recruitment.
- A plain language role in the main line: “Your main contact for build projects” or “Writes the SEO strategy”.
Add a small tag or chip row for expertise areas (for example: B2B SaaS, Shopify, Litigation, Paediatrics). Those tags do triple duty: they help scanning, they power your filters, and they give search engines meaningful context about your expertise.
Step 5: Design hover and click interactions that add information, not decoration
Hover effects are where team pages go wrong most often. A card that flips 180 degrees, a photo that turns black and white, a name that slides in from off screen: all of it looks impressive in a portfolio shot and all of it slows down the person trying to learn something.
Interactions worth building
- Photo swap: the neutral headshot becomes a candid, laughing or working shot on hover. One image change, high personality payoff, zero cognitive cost.
- Progressive reveal: the short bio and social links fade up over the lower third of the photo. Keeps grids tidy without hiding information.
- Subtle lift: a 2 to 4 pixel translate plus a soft shadow to signal clickability. Do it in 150 to 250 milliseconds.
- Inline expand: clicking a card opens a detail panel inside the grid instead of a modal, so scroll position is never lost.
Interactions to avoid
- 3D card flips that hide the face, which is the one element people came for
- Cursor followers and distortion effects that murder performance on mid range phones
- Hover only content with no tap equivalent, which makes the page useless on mobile
- Auto scrolling marquees of faces that nobody can read or click reliably
The mobile rule: more than half your traffic has no hover state at all. Design the mobile version first, where the short bio is simply visible under the name, then treat hover as an enhancement for desktop. And respect prefers-reduced-motion so animations disable for users who ask for it. There is more on it in 370 Team Homepage Designs.
Step 6: Link each person to proof
This is the differentiator that turns a nice looking page into a revenue asset. A face plus a bio builds warmth. A face plus a bio plus evidence builds trust.
For every client facing team member, link out to:
- Two or three case studies they personally led, with the client name and the result visible on the link
- Articles or guides they wrote on your blog, using a proper author archive
- Talks, podcasts or certifications where they are named
- A relevant service page, so the visitor can move from person to offer in one click
Two things happen. First, an interested prospect goes deeper into your site instead of bouncing back to the search results. Second, you build a real internal linking web between people, expertise and commercial pages, which is exactly the kind of experience and authority signal search engines reward for service businesses.
Do not forget the conversion element
People who read a team page are close to contacting you. Give them a way to act:
- A direct “Book a call with [Name]” button for sales and account leads
- A single team level CTA at the bottom: “Tell us about your project”
- A discreet careers block: “We are hiring 2 roles” with a link, since candidates are a big slice of this audience
Step 7: Technical details that quietly matter
- Alt text: use “Name, role at Company” rather than “team member photo”.
- Image sizing: serve fixed dimensions with
widthandheightattributes to avoid layout shift as the grid loads. - Structured data: mark up people with Person schema linked to your Organization schema, including jobTitle and sameAs profiles.
- Accessibility: the whole card should be reachable by keyboard, with a visible focus state, and contrast of at least 4.5:1 for text over photos.
- Page speed: lazy load everything below the fold and cap the number of people rendered initially, with a “show more” button for large teams.
- Privacy: use work email or a contact form rather than personal contact details, and get written consent for photos.
Keep it current or it works against you
A team page featuring three people who left 18 months ago does more damage than no team page at all. Prospects check LinkedIn. Build a simple process:
- Add new hires within their first two weeks, using the same photo spec
- Remove leavers within 48 hours and redirect their profile URL to the team page
- Review bios once a quarter so the proof points stay accurate
- Schedule a group photo session twice a year so newcomers never look pasted in
Quick audit: score your current team page
Give yourself one point per yes. Under 8 and the page is costing you enquiries.
- Every photo uses the same crop, background and lighting direction
- Each person has a plain language role, not just a job title
- Short bios are visible without any interaction on mobile
- At least the client facing team links to case studies or articles
- The page loads in under 2.5 seconds on a mid range phone
- There is a clear call to action at the end
- No hover only content and no motion that cannot be disabled
- Leadership appears before an alphabetical wall of faces
- The team list has been updated in the last 90 days
- Nobody on the page is represented by an avatar or a silhouette
Common mistakes worth naming
- Stock photos of fake people. Reverse image search takes four seconds and destroys trust permanently.
- Hiding the team behind a modal that breaks the back button. Every profile deserves a real URL.
- Identical bios written by one person. If every sentence starts the same way, the humanity you were chasing disappears.
- Overloading with social icons. Link LinkedIn, and anything else only if the person is genuinely active there.
- Designing for the screenshot. If the layout only looks good with exactly 12 people, your next hire breaks it.
FAQ
How long should a team page bio be?
Aim for 8 to 15 words on the card, 50 to 90 words when expanded, and 150 to 300 words on a dedicated profile page. Anything longer needs to justify itself with real proof points, not career chronology.
Should the team page be separate from the About page?
If you have fewer than six people, a team section inside the About page is usually enough. Beyond that, a dedicated team page ranks better for name searches, loads faster, and gives you room for filters and individual profiles.
Do I need professional photography?
Not necessarily, but you do need consistency. A half day session with a photographer is the easiest route. If that is not possible, a shared shooting guide plus one uniform crop and colour treatment gets you 80% of the way for almost nothing.
What about remote teams spread across countries?
Use a duotone or brand colour treatment to unify mismatched source photos, and add a location line or flag under each name. Distributed coverage is a selling point for many buyers, so show it rather than hide it. The reasoning is set out in this piece.
Is it risky to publish employee names and photos?
Get written consent, use company contact channels instead of personal ones, and remove profiles quickly when people leave. For sensitive sectors, first name plus role initial is an acceptable compromise, though it reduces the trust benefit.
How often should a team page be updated?
Treat 90 days as the maximum interval for a review, with immediate updates for joiners and leavers. An out of date team page is one of the fastest ways to lose credibility with a prospect who is already checking you on LinkedIn.
The takeaway
Great team page design is not about clever animation. It comes from a handful of unglamorous decisions: one consistent photo crop, roles written in the language your clients use, bios short enough to read but specific enough to matter, interactions that reveal information instead of hiding it, and links that carry a curious visitor straight into your proof.
Do those five things and the page stops being a corporate directory. It becomes the moment a prospect decides you are the kind of company they want to work with. Full details on https://awwwards.com.