Making the team page work better as the team grows

The team page was originally designed for a small team (30 ish people). As we have grown to 160 people, it doesn't scale well.

Other considerations (from @regisF):

1. still need to see the names so we can search the page to find someone quickly
2. ability to filter per teams (UX, product etc...)
3. reduce the size of avatars, perhaps do something about the bios too.

Collapsed View

• Show name, title, location and avatar

Hover

• Social links
• "Maintainer of.."

Expanded

• Double width

• show bio

• Remove 'Reports to' (it is on Org Chart)

Some design explorations:

Without bio	With bio

Ideas:

• Group by team instead of individual cards for each person
• Group location with name and photo (profile type information), and title with responsibilities (job information)
• Smaller images and type

Not really sure what to do with bio, so I showed one without and one with. Was trying to find a way to have the bio only show up for one person at a time, but didn't figure out a hover/click treatment that felt ok. Wondering if keeping the bio is the simple/boring solution.

@jschatz1

@awhildy I think bios are great, but take too much space. Can we make them collapsable?

Please include a way to "jump" to teams at the top also.

@awhildy also, I think we could have, at the top, and with a big typo:

• number of employees
• number of timezones
• number of countries

I would also have a sidebar with quick access to the functional teams, with position: fixed so it doesn't move as we scroll.

Would we do an all or none collapse on all people? Or would we find a way where you could show them on some hover/some sort of popup?

Didn't mean to skip the blurb at the top. I like turning it into a bulleted list. Probably also still need the link to the team org chart?

Also - in the comps above, I removed the 'report to XXX' line. I thought that that information could be unnecessary since we have the org chart.

changed milestone to %Make www-gitlab-com better - iteration 1

I would find a way to show bios by hovering somehow...

Moreover, your design is great but there will be another problem in practice: the fact that each person can have multiple specialities (Maintainer of X etc...). That will translate into a design where no rows are equal in height in practice.

This can be solved by listing only one speciality, and again, have a way to list more if needed.

The drawback to this: we won't be able to search for a specific speciality on the page anymore :-(

What about something like this? Too restrictive?

As a side comment, can we move away from round avatars?

I'm a little confused with our approach to the specialties, and I feel like we are a little consistent with what we list there. Some have also gone a little crazy with the number they have listed. Personally, I'm kind of ok with limited that to one, but it may be a challenge for some (and may lose some of the fun?)

@luke: Are there branding thoughts on round vs. square avatars? Or thoughts on any of these ideas?

I'm a little confused with our approach to the specialties, and I feel like we are a little inconsistent with what we list there. Some have also gone a little crazy with the number they have listed. Personally, I'm kind of ok with limited that to one, but it may be a challenge for some (and may lose some of the fun?)

@luke: Are there branding thoughts on round vs. square avatars? Or thoughts on any of these ideas?

mentioned in issue #1062

The ability to have multiple specialties is really important, we shouldn't remove them! We use them to know who to ask about features.

@smcgivern we'll have to be very creative then in how we display them, because this will make everything bigger and won't allow for a proper structure for the page.

Can we have a search at the top for this, and have in team.yml the specialties?

@awhildy from a brand perspective I see no preference on round or square avatars. I also agree with @regisF in having some way to navigate to different teams.

Looking at @awhildy's first design Without bio, I wonder if we could add a Bio text link that then "flips" (for lack of a better term) that team members container and shows the bio text? It's not particularly a boring solution but saves space compared to expanding/collapsing bio text.

Having search at the top would be a great addition, I'm constantly using cmd+f to find people on the current team page.

It would also be awesome if people had anchor tags with their names, so that you could link someone to something like https://about.gitlab.com/team/index.html#SidSijbrandij

I started working on this and I think we need to do something with Maintainer of license-app and all those. They are just way too long.

It sort of works here:

But it get's completely ridiculous:

@awhildy What shall we do with all these things? Just remove them?

And that's leaving out the bio. @awhildy what do you think about a modal that pops up with more info and we put the most pertinent info up immediately. Or they could flip. But I always feel like bio pages with extra information that you have to click for is too cumbersome.

@jschatz1 can we:

• hide them entirely, visible through a tooltip
• add a search box at the top, that would actually search for name + function + specialties, and filter the result based on those?

@northrup we already have these with Twitter handles! But others would be nice too. https://about.gitlab.com/team/#northrup

mentioned in merge request !4806 (merged)

How about maybe do the top left image (without bio) version for the first view if you go to /team, then hovering over the bio with your cursor shows the "maintainer of" view and clicking shows their full story bio?

@psimyn can you grab the rest of this?

assigned to @psimyn

Had a pass at collapsed/expandable items with hover state. Hid everything but name/title/location, and removed "Reports to" entirely.

Hover shows Maintainer & Social links, click shows bio

Going group by teams (any suggested order?). Suggestions or criticisms on this welcome in the meantime, my design ideas are pretty limited..

Hiding stuff does come at the cost of text-search on the page, so some kind search like @regisF suggested is probably a good idea

@psimyn that is good but it shouldn't move stuff around. It should be on top z-index wise like a modal. I think the modal has to be a dup of the content and not grow the item itself. What do you think @awhildy

@jschatz1 it is on top and nothing moves around (card contents are position: absolute). Can bring back shadow to make it more visually on top. The slight jumping in gif is due to anchor links moving that item to top on click (existing issue).

Or do you mean shouldn't move image/name etc around?

@psimyn is this real code or only an animation or something? If it's real code, submit the MR and we'll see it live with review apps.

@regisF code is on https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/4806

A few todos mentioned on the MR for link jumping etc.

I have a template change ready to group by Team (and link to each section) but it needs everyone in team.yml to be updated. Is there a list of groups/members I can use, or default everyone to an Everyone group then they can added separately

@psimyn Let's have the discussion about the MR on the MR page itself.

It'd be great to have some tree/chart who reports to who.
Something like this (as an idea):

@blackst0ne We have this here: https://about.gitlab.com/team/structure

@stanhu, thank you!

By the way, the layout is broken there.

closed

@blackst0ne issue for the broken layout https://gitlab.com/gitlab-com/www-gitlab-com/issues/1228