Design Trends For Company Team & Staff Pages

Almost every major company has an “about us” page. This is true for blogs, agencies, and even personal sites.

And if you look around you’ll find lots of articles detailing tips on about pages for the web. However, they don’t always get into the details of staff pages, or team pages that feature all the members of a given team.

These often follow the same rules of an “about” page, but have a few unique trends. I’d like to cover those trends here with live examples and inspiration that you can borrow for your own projects.

Basically, if you’re working to design a great team page then you’ll find quite a few solid ideas in this piece. So let’s dive in!

Photos Go a Long Way

It’s good to clarify right off the bat that photos sell. Visuals in general are easier to consume and they definitely encourage users to stay on your page for longer.

Photographs of each team member can really make a difference if you know how to set them up properly. I often find them in grid-style systems where the photos are arranged based on size, position, or each person’s place at the company.

Either way I stand by this trend: add photos to your team page.

It makes a world of difference to personalize the page and it doesn’t cost a lot to hire a photographer for a day to snap team photos. Or you could even take them yourself.

Even a big company like Etsy can include photos of their team in a large grid design.

I can’t imagine how many people work at Etsy but it’s likely smaller than the typical company website. So any other staff page may seem incredibly small by comparison.

That’s exactly why I think this trend deserves more love. You don’t have to spend a whole lot of time editing the photos either. Although for a design agency this may prove to be a fun task.

Now if you don’t like the idea of real photographs you can always work with vectors. Have a look at Rock Kitchen Harris for one example.

They use small vector characters representing each team member in the grid. This would save loads of time if you already have a designer on staff who might want to do this.

And best of all these designs are super easy to swap out if anyone leaves the company, or when you get new hires.

I’m also partial to custom graphics or little avatars/icons to represent each person. Let employees pick their own photos and just roll with it.

Note that you don’t need super professional headshots for every single person. You can also just take photos of the company at work and throw those up onto your team page.

Atlassian does this here and you can quickly skim a few team photos from their slideshow right on first pageload.

This helps to humanize the company and show off what the team really looks like. It’s a fun approach to team page design that still utilizes photos without going overboard.

Sell Experience and History

Along with the team you also want to sell the company’s experience.

Outline what the staff has done, where they’ve been, how many years in the industry, stuff like that. You can also mention past clients or major projects you’ve worked on.

There’s so much to share when it comes to experience that I couldn’t possibly list it all out. But I do think mentioning some of this on the team page bolsters confidence from potential clients or users.

The team page for Etch only features 3 people but it’s quite a well-designed layout.

It naturally includes photos of each person with a link to their personal bio page. Those personal pages offer more detail about each team member including their background and history.

But if you scroll down the page you’ll see branded logos along with cumulative team experience in the field. It’s an interesting way to prove the company’s skillset while defining each team member by themselves.

Another approach is to add visuals for your company’s history. Something like a timeline of events like on this page from CloudHorizon can work well.

I am not sure how CloudHorizon works but skimming over their about page makes it crystal clear.

Once you get past the visual timeline you’ll get into the staff section with photos of each team member. I think this is the best design choice to combine everything onto one page. Why split up the staff and “about” page?

Really the only reason is if you have a huge staff, or if you want to get into great detail on both pages.

But consider adding some kind of timeline or small historical anecdote about the company. It adds another personal touch into the page.

There’s actually a similar layout right here on the Digital Marmalade website.

This starts with a team listing including all staff photos, then moves into the visual timeline setup. It’s a pretty clean layout too which really does grab the eye.

Newer companies may not benefit so much from a timeline if they don’t have a lot of history to sell. But consider adding anything you can about the company’s experience, history, past clients or anything similar related to the team.

Jazz It Up With Humor

Humor is hard to pull off with design. It often comes down to witty copy and possibly a colorful branding that supports a funny style guide.

But I really think one place every company can be funny is the staff page.

Photos alone can be very humorous if you design them right. You can also add effects, slogans, or anecdotes into your staff page to make it even more entertaining.

The team page for LiveChat has this strategy down pat with plenty of photos to catch the funny bone.

You probably won’t find yourself laughing out loud, but they’re certainly more entertaining than bland headshots.

Humor also works best with creative agencies or creative teams that can handle the humor in their content. I think it’s one of the better approaches for every staff page; it just takes some creativity.

And you don’t have to rely solely on photos for humorous design. Have a look at this team page from Lateral.

Just move your cursor around the page and see what happens. Pretty neat!

I can only imagine how long this took to create. Maybe the photos were taken once and altered slightly, but either way this is some real commitment to a great design.

Their page deserves to be featured in articles like this because they really exemplify humor used in a team page, while pushing the boundaries of design and creativity on the web.

But I am a sucker for simple funny photos and Rethink Canada has one of the best photo sets going.

If you can think of some humorous design ideas then give them a try.

The team page is probably one of the few places you can get away with experimentation where it would be enjoyable and appreciated.

And remember, a little goes a long way. Even just some simple funny photos or quotes can jazz up the page.

Personalize Each Staff Member

If you have a massive team it’ll be tough to personalize the whole layout for each team member.

But you can always try to focus one each person with their own page using custom quotes, photos, and maybe listing some of their experience in the field.

I find that this brings a much more personal touch to a company, even a corporation with 100+ employees. It’ll be tough work but I’ve seen plenty of websites doing it.

Take for example ABZ Creative and their team page. The company is quite a bit smaller yet it’s also very nicely designed.

Each team member has their own section with a photo, a description of their work, plus a quote and an email address.

This makes it super easy to contact anyone from the website and it’s a rather enjoyable design.

Something like this can also work for a more serious business like a law firm or a medical practice. All you’d do is clean up some of the photos and make sure the contents listed beside each person describe more of what they do on a professional level.

You could also do something more customizable like Electric Pulp.

All of their team members get listed in a larger grid with full headshots. But when you hover each person you’ll be greeted with a silly GIF or photo.

This would not take much extra work at all. You can still feature every person and give everyone some creativity to personalize their photo, all the while still keeping your staff page clean.

You could even create a separate page for each person if you wanted to outline their specialties and skillsets.

One other option instead of creating a new page for each person, is to add their descriptions right into the page. This is easiest with some JavaScript effects like on this page from Humaan.

All of the photos feel customized and unique to each person. So this page already has a very personal touch.

But if you hover any of the photos you’ll also get to see the person’s bio along with their social media icons.

A nice way to encourage interactivity if you’ve got a large team and don’t want to create a page for each staff member.

Keep A Consistent Structure

While this trend may seem pretty basic, it’s also a definite must-have.

Your team page will work best if it follows a structure that stays similar throughout the page.

This could be a grid system, or a simple thumbnail gallery, or a slideshow or anything else. The sky’s the limit so long as you keep it consistent and easy to browse.

For example this page on Leap’s website has the same style for each person: rounded headshot photos and a strict grid with only so much space for text.

How you use the space is totally up to you. I’ve covered a bunch of trends earlier in this post that you could replicate, and you might pick up some ideas by studying other websites listed here.

But the consistency is what breeds enjoyment in the UI design world. Give visitors a pattern so they know how to follow it.

The team page on Bukwild starts with a hero header and then slowly moves into a tight grid system split into vertical sections.

I really like the hero video since it’s not something you see everywhere. Not to mention this site is simply incredible when it comes to a clear design, crisp typography, and a consistent theme.

You could do something like this where you break up the page into sections vertically(AKA full size horizontal sections that split vertically as you scroll down).

I typically see this on parallax websites but you can get by without all the parallax techniques just fine.

Or you could keep the page really basic and just link to each person individually. That’s what I like about TOWA Digital and their team page.

Overall you just want a consistent design that encourages users to stick around and browse through the staff listing.

You also want team members listed in an orderly fashion so it’s easy to find who you’re looking for. Consistency is the backbone of this page so design around that and you’ll come up with a great UI in no time.

Designing Your Team Page

Hopefully these design examples give you plenty to get started working with on your own.

Team pages are personal to each company and there is no “right” way to do this design. I would ultimately recommend starting with some wireframes to see what you can think up.

From there try pushing different elements around the page and consider how the final result might look. What would best showcase the company’s team that everyone would enjoy?

Take the trends listed here and combine them with your own ideas to create a truly engaging company staff page to call your own.