Default Tanuki avatar

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Problem to solve

Right now we use randomly created gravatar images as profile pictures for users who don't have one (yet). These often use signal colors, which takes attention away from the actual content.

image

It also doesn't help that we have only a very minimal border around them and that the images contain lots of whitespace, which causes it to sometimes not look like a circle, but more edgy, attracting even more attention.

image

Next to these concerns, one major aspect to consider is that using these randomly created and very colorful images communicates a lack of care about our UI to users. It is something you would expect from a hacky side-project, not from a multi-billion dollar company. And especially as this is the profile picture you are greeted with when first signing up, it's part of the first impression.

Proposal

Current status

  1. How many unique avatars do we need?
  2. Can we create enough variation with the proposed design?
  3. How we will generate these variations?
Initial proposal In order to have more control over our interface, we should design a new default profile picture. There is also an opportunity to highlight our brand and create a bit more of a GitLab feeling, e.g. by adding a young Tanuki cub, similar to what Twitter once did with its egg as profile picture for new users.

One disadvantage of using just one default picture, as we can see in the previous screenshots, is that it will be tougher to differentiate between multiple users without profile pictures. In order to see whether this is actually a practical problem, we should look into the data about how many active users are currently still using the default picture. If that is a significant number, we could create multiple default pictures with the same content, but different colors.

As a first MVC, we could use these examples created by @jeldergl: https://codepen.io/lostsatellites/pen/yWvzBL?editors=1100

Before After
image image
Edited by 🤖 GitLab Bot 🤖