We encounter them too often: unattractive team pages with holiday snapshots and boring bios. But your researchers are doing all the work, so we say it’s about time to put them in the spotlight they deserve! With this guide, we will help you take better profile pictures, design an attractive team page, and write interesting bios for your consortium members. Let’s get started!

Should you create a separate Team page?

If you do not want to showcase your research team on a separate page, you can just create a team section on your About page with a list of names and research roles. However, we think it’s a nice touch to create a team page with a bit more information about the people in your research department or consortium.

We like to give navigation menu items a more interesting name, so let’s call your team page “Meet the team”, “About our researchers”, or “Get to know us”.

What personal information do you put on a team page?

The information in your team profiles should be relevant for the website, but it also shouldn’t be impersonal or boring. That’s why it’s good to try to include a bit of creativity, and maybe include a personal quote, your favorite food, or another fun fact about someone. This really makes a team page come alive.

Here are some items we often include in a profile page:

  • Full name with your titles – but leave out the impersonal initials.
  • Role within this research group – e.g. Project manager, Early Stage Researchers (ESR), or Senior researcher
  • Personal quote – e.g. “I think we should pay more attention to mental health” or more quirky “I always share my cookies with my co-workers”
  • Expertise keywords – e.g. Public health, Epidemiology, Archeology, or Marine biology
  • Your affiliation or institute.
  • Contact details – e.g. e-mail address (be cautious with putting your phone number or actual address online)
  • Links to a University page or ORCID profile.
  • Links to social media accounts – LinkedIn, ResearchGate, Twitter etc.

For obvious privacy reasons always make sure that people give permission to put this information on the website, and that they can always change their preferences at any time.

Include a personal page for junior researchers

For EU or consortium websites we often put junior researchers in the spotlight by creating a personal page for them. It can even include a biography and a link to blogs they’ve written. Especially for ITN (Innovative Training Networks) websites where the Early Stage Researchers play an important role, we always include personal pages. This helps them be more visible and showcase their work to the world (which might just help their careers)!

Organize your team profiles

If you have a lot of people on your team page you probably want to organize them in a way that makes sense to a visitor. You can create different sections for Senior researchers, ESR’s, and the Ethics committee. The downside is that this could make a team page very long.

An alternative can be to dynamically filter people based on their role, affiliation, or expertise. This makes it very easy for visitors to find someone they are looking for. We did this for the DRIVE website, where we created tabs for the people within each organization.

Filter your team based on the institute

Write a biography, not a resume

When you write a bio, don’t forget about your audience! Do they want to read a boring resume with all the dates and years in there (which they could just as easily find on LinkedIn)? Nope. When you’re writing your bio, make sure it’s interesting to a variety of readers. So get creative, and write about what drives you, or the thing about your research you love most. That’s what gives a biography some flavor and makes it interesting to read. You can also make your biography interesting by adding small details, personal observations, opinions, and how your research makes the world a better place.

We often get asked what’s better: writing in first or third person. We think it’s clearer and more personal to write in the first person, because it makes the distance between you and the reader a bit shorter. Whatever you choose though, just make sure all your team members do it consistently.

Example of a simple biography:

Debby is a PhD candidate at Northern University. Her bio: “I want to find out what the effects of puberty on brain development are. Because if we can figure out what this sensitive period means for brain development, we can help young people cope better. This means that with the knowledge from my research we can figure out ways to prevent brain damage. Previously, I’ve done research into brain imaging at Southern University. Besides feeling the rush of science, I get my adrenaline from playing baseball and soccer. And I love to have nerdy chats with my colleagues about methodology.”

Take better profile pictures

Do you want to look professional? This means you need to avoid holiday pictures and hire a photographer to take pictures of your team in the same style. However, don’t be too conservative and have everyone wear the same clothes like on this team page (we want it to have a bit more personality): https://tenderpeople.nl/onze-mensen/

Don’t put on the exact same clothes when taking team pictures…

If you don’t have great photographs, it’s time to get creative…

When we create a team page, our clients usually send over photographs with a huge variety in quality and style (often downloaded from LinkedIn). When they also don’t have the option for professional photography, this makes it harder to create a professional team page. But no worries, even with a collection of holiday pictures and selfies, you can make it look professional. One way to do it is to create round profile pictures in black and white like we did for the DRIVE website:

Make pictures look more consistent by making them round and black and white

An alternative that is a little more challenging is to Photoshop the profile pictures so nobody notices the differences between the pictures. For the Childbirth Network team page, we’ve cut out all the people and put them on backgrounds in the style of the website. Now you don’t notice that most of these pictures were shot with a mobile phone in wildly varying settings.

A way to harmonize your profile pictures is to cut them out against a colorful background

One step up again is to embellish the profile pictures with design elements from your website. For Data Science Agency, we’ve Photoshopped the pictures so they look all similar.

You can add elements to your images to make them look similar

You can also create an overlay filter, so the images blend in with the style of the website. The team of POSAS now looks very professional.

Add an overlay color to have the pictures blend in with the website

How to take better profile pictures (with your phone)

If you do not have the opportunity to hire a photographer, but you also don’t want to work with the random snapshots from vacations and LinkedIn, you can work with selfies. These can be good if you make them as uniform as possible. To do so, plan a day with your team to shoot them in the same spot, or ask people to take their own selfies in similar circumstances. Here are some tips to take better pictures with your phone:

  • Take your picture with plenty of daylight, preferably avoiding the middle of the day when the sun is casting vertical shadows.
  • Make sure the light comes from directly in front of you, or so that it doesn’t cause stark shadows on your face or overly bright white spots (overexposure).
  • Stand in front of a white or plain wall, but not so close that you make hard shadows on the wall.
  • Take pictures with a LOT of white space around your head. Because if anything is cropped out, you can never add it back (although we have Photoshopped shoulders back into pictures when it was needed…). So make sure your entire head and shoulders down to your chest are in the pictures. You don’t always know in advance whether you will use a cut-out picture, a square picture, or a horizontally placed picture, so this helps you be flexible.
  • Take them in the highest resolution as possible (check your phone settings).

In the example below we have an image with a bad resolution, a photo that’s cropped in a small rectangle, a headshot where the shoulders are cropped out, and a good image with plenty of space around the person (me, in this case).

1) low quality, 2) cut out in a weird small rectangle, 3) the shoulder is cut off, 4) a perfect picture with plenty of space

Choose the highest resolution possible

You definitely can create great profile pictures from selfies, but you can never create something good from a low-resolution picture. So please do not use the small LinkedIn photo for your profile page, it will look awful. It’s so easy these days to take a good picture with your phone that old photo’s or photos with low resolution should not be allowed.

When you send over pictures to your web designer, make sure they have a high resolution and a large enough size. Size (in pixels or PX) and resolution (in dots per inch or DPI) are not interchangeable! For size; use pictures that are at least 300px wide. There are not a lot of profile pictures that are larger than this. The resolution is also important, but the web is actually a very low resolution. Everything higher than 72 dpi is usually fine (a modern smartphone will most likely shoot higher resolution than that).

How can you check the size of your image? Easy. If you have an image in Windows Explorer, just hover over the image to see the dimensions, or right-click and go to properties.

For reference these are some typical screen sizes in pixels:

  • Laptop screen size: 1920 x 1280
  • A website is often 1200px wide
  • So if you want 3 images next to each other, you should aim for 3 pictures of 400px wide each.
Check the size of your images under Properties

Tools to edit your images

A warning about uploading very high resolution images to your website: images that are 4000px wide make your website load very slowly. So make sure to upload the image in the same size you want to display it (e.g. 250x250px) and compress the image before uploading. My favorite tool to compress images for the web is the Image Compressor. https://imagecompressor.com/

If you want to remove the background of your images and you don’t have Photoshop, you can use an online background removal tool. Remove.bg is my favorite.

Remove the background of a picture

If you want to crop out the images so they look similar, you can use a tool like imageresizer. You can first crop the image, and then even resize it plus compress it. Perfect! ttps://imageresizer.com/

Resize the picture to the perfect dimensions easily

We hope our tips helped you to create better team pages and look more professional. If you want us to create a consortium website for you, get in touch and we can come up with some creative ways for you to display your team!

About the Author: Liesbeth Smit

Liesbeth combines her knowledge of science communication, technology and design to explain difficult topics to a wide audience. You can use her practical tips immediately in your (poster) presentations to create a bigger impact. She developed dozens of websites, infographics and animated videos, and regularly gives workshops about design at The Online Scientist.