2012_team_pages_featured Design

How To Design Cool Team Pages

Just like everything else on the Web, team presentations have changed a lot over the last few years. They went from non existent to being very personal, funny, and engaging. Our expectations towards the user experience of a website grows rapidly. Not only do we want clear information, and easy to go through signup processes, we also want to know who is behind a website and why we should trust them.

From the early phases of the Web until only a little while ago, websites did not give their visitors the chance to meet their team. While basic contact information has been a common thing to offer for a while now, most of the time it was not clear who you would reach once you took the daring step to actually make contact.

Information about the team behind a brand or company does not only increase trust, it also makes a website more personal and as that more likeable and trustworthy. Pictures and personal details help us to identify the human core of a website and allow us to open up and build a relationship.

Let’s have a look at a couple of team presentations and how they can inspire you to add some extra value to the user experience of your website.

1. Personality

Personality on the Web is still in the early stages. Yet more and more companies realize that personal design can be a great catalyst for better conversion rates. Personality helps you to gain credibility and trust, and makes your company or brand more likeable. Here are some examples of how your team presentation can add personality to your website.

Be likeable


Discovered by mva

Applicake have a well-designed, but clean and at first sight rather serious team page. This first impression is very professional and trustworthy. After a while, the thumbnails start to change one by one, turning the team into a not so serious group after all.

The little animations are really attention grabbing and make you want to stay on that page for just a little longer to make sure you saw all the funny expressions. When clicking on the thumbnails you go to a more detailed view of the team members. Again you see professional images of very likeable people, including personal information and contact details.

Be personal


Discovered by wilbelison

Polecat, an agency for mobile applications, has chosen for a very personal presentation of their team. They don’t show high quality photographs, but quite characteristic illustrations of their team members, together with their first names and job position.

Instead of showing detailed information of every single person, they refer to the memory game we all remember from our childhood: We pack a bag. They pack all their hobbies and what’s important to them into the bag. This way to introduce a team as a whole is not only very creative, it also creates a personal atmosphere that makes me trust the team in an instant.

Be real


Discovered by usabilla

Balsamiq takes the personal design approach very seriously. Their product and also their communication model is very informal and down to earth. The first thing you see when visiting their company page is a group picture of the team that reminds me more of a fun trip with friends than a group of work colleagues.

Still, this images doesn’t tell me that balsamiq isn’t taking their job seriously. Rather, I get the desire to be part of this great team. Their presentation is so authentic that I have no doubt this nice group of people stands behind the product. When you scroll down the page you also get introduced to everyone separately, together with some personal information and contact details.

2. Engagement

Engagement plays an increasingly important role on the Web. Now that technology allows all different kind of interactive features, not only companies, but also users get spoilt with participative web design. You should not only use Interactive elements in order to demonstrate that you are familiar with the newest trends, but also to draw people in and connect with them. On your team page you can engage your visitors and give them the illusion of actually meeting you. Here are some examples how.

Attract attention


Discovered by yoeri

Fixel offers three details that make their team page special. First, they make it a little game for you to match their images with the right description. Second, there is still a free position in their team, which draws special attention due to the somehow inappropriate image of a giraffe. Third, you can shuffle the top parts of the images, to match the giraffe with any of the job positions.

This team presentation is not only creative, but also very personal and fun to explore. The fact that it’s just a little out of the ordinary made me pause and actually match all the images with the descriptions. I also wanted to see how the giraffe looks in combination with all four faces. This might not work the same for everyone, I’m sure, but I think it’s a great example of how to grab your visitor’s attention.

Offer interaction


Discovered by usabilla

Atlassian is quite a big company with more than 300 employees. This is a big group and it’s hardly possible to personally introduce everyone. Besides, the visitor doesn’t get that much extra value from knowing all 300+ employees by name. A good way to do it is to introduce only a few important people, in this case “The Leadership Team”.

When hovering over the little puppets, their heads actually start to bounce. When clicking on them, they bounce even faster. This little interaction is so engaging that I actually clicked on all team members separately to see what happens. The images itself convey professionalism. The fact that the leadership team lets themselves turn into nodders tells me a lot about the company and its values. I like people who can make a fool of themselves and still, or maybe just because of it, get respected.

Be fun


Discovered by meyerhaus

Viens-la is a team of three very likable guys. They present themselves in shirts that match the colors of their core services. The fun part is that their eyes follow your mouse around the screen.

This interaction with the team feels like somehow you actually meet them. Like they were sitting inside your monitor, watching you explore their site. Ok, maybe I exaggerate a little, but it did triggered me to circly my mouse around them a couple of times. If I was looking for a creative solution, I would definitely consider to hire these guys.

3. Authenticity

Just like any other part of your website, your team presentation should be authentic. Make sure you match the style with the look and feel of your site, remain true to yourself, and be honest, no matter what. People who want to find out who you are will have certain expectations based on what they have seen on your site so far. Try to meet these expectations by offering them consistency in style and a team they can trust.

Be creative


Discovered by usabilla

Peapod Studios call themselves “an exceptional collection of true originals”. They support this claim with an exceptional team presentation; a collection of seemingly antique portrait paintings of themselves.

The style of the images nicely matches the rest of the website and the idea is truly unique. The quality of the retouching is so high that it also indicates a high quality of their work. This is a great example that there are no limits of creative ways to present your team, as long as it doesn’t become random.

Show your expertise


Discovered by yoeri

ThemeZilla have a very clean and professional looking website. Their team presentation perfectly blends in with the rest; simple and clear, and strapped down to only the essential information. Besides the individual basics, they display some more or less relevant milestones that were achieved as a team, such as the number of theme releases, or the total of 609 consumed Domino pizzas.

I like the way they present only very little information, but at the same time manage to wrap some humor in there. The minimalistic design of the site and the expertise of the team members let me trust their abilities to build great themes.

Use authentic copywriting


Discovered by jules

Fancy Rhino not only have very funny and authentic images of themselves, they also use great copywriting to introduce their team members. For example, Drew is described as follows: “At times we wonder if Drew is actually human, or if he is entirely composed of dreams, ambitions, and wild creativity. The word impossible has no place in his lexicon. For Drew, storytelling is King. It’s the blood pumping in his veins, and the blood pumping through the Rhino too.”

The consistency of creative design, imagery, and copywriting draws a very vivid picture of who these people are. It doesn’t only make them likeable, but they also seem very professional and committed to their work.

Conclusion

There are many ways you can profit from a more personal team presentation. By making your team appear likable and fun you can create a more personal experience for your visitors. Through interactions you can engage your visitors and create a bond with them. Being creative and consistent, and showing your expertise can make you more authentic and lets people to trust you.

19 comments

  1. RootShell

    Great article… Excelent reading… Thanks!

  2. Herr Schroeder

    Thank you! Very inspiring article. I like this team presentation too: http://www.avero.de/team/?lang=en

    It is characteristic with a bit of humor.

  3. Sabina Idler

    I really like your example as well! Cartoons, but still very personal. Thanks for sharing!

  4. Luis Vaz

    This article is great, could have used it when preparing ours, BTW what do you think?
    http://www.muchbeta.com/team.php#

  5. Rocio Ramos

    Absolutely love everything about this article! Thanks again Sabrina! Will share this for sure!

  6. Sabina Idler

    Hi Luis,

    I love your team page! A bummer that I hadn’t seen it earlier. I would have definitely included it in my article. You really got me engaged with the little game. Great interaction and very likable! Great job!

  7. Sabina Idler

    Cool, Rocio, thanks a lot!

  8. Luis Vaz

    Hi Sabina :) thank you very much, clients aren’t usually angry at me but if they are I gave them a solution for that…at least that was my idea. Once again great article

  9. Sabina Idler

    Haha, great idea! I absolutely love it!

  10. Tom

    Great article Sabina. Team pages are all too often not given the attention they deserve IMO. With the web having a history of being a bit of faceless place, getting your personality and standing out is a must. Cheers for the tips and examples.

  11. Dorota

    Thank you Sabina for including us in this great write up. Cheers from the Applicake team!

  12. Graphic Design

    These pages have design in excellent way. I really like the art.

  13. Mark Lee

    Thanks Sabina for great ideas and truly inspiring article.

  14. Girish Sharma

    Thank you! Sabina for the article it is Very inspiring article & Excelent to reading it.

  15. Sabina Idler

    You are most welcome. I’m happy to hear that you liked reading it.

  16. Sabina Idler

    Thank you for an inspiring team page!

  17. Sabina Idler

    I couldn’t agree more. :)

  18. Sabina Idler

    You are welcome, thanks for taking the time to read my article.

  19. Brian Oster

    Thanks for the pointers in your blog Sabrina. Too often I see blogs like this that just look for web traffic. And the examples they choose may be “cool” looking, but not relevant. Or just over the top “my favorite superhero is …”. What do you think about those – effective? Seen any videos used in team bios yet? I wonder how many of these actually help promote the company, or in some cases help hire the employee away (one of these is like a resume for each team member). Seen any videos used yet on team pages? http://www.ocimageworks.com/team

Leave a Reply

Your email address will not be published. Required fields are marked *