I came across an interesting problem I had to solve at work when we were building a reusable avatar component for our design system. Avatars are in frequent use on many websites including social media, content management systems, and any software that has the concept of a user or user profile. Sometimes these are related to a product feature that allows collaboration with other people, and the avatar component usually serves as a visual for users to identify themselves.

For a bit of background: Our product is a software product that helps people build subscriber lists and emails to send to those lists. Some accounts can have additional people as users in an account, and can have varying permissions of what they can and can’t access. Pretty ordinary, nothing too flashy.

This post goes into depth, and I’m sure some people will merely palm off the efforts of my investigation and solution as unimportant. However, I wanted to preface by stating that we advocate for inclusivity and really try to understand how people might view our product when they use it, and also acknowledge that there is no “perfect” solution, but it never hurts to make an effort such as the one I have tried to outline here.

👤 Default images or text

More often than not, users have the ability to upload a picture or connect with a service like Gravatar to use their existing picture. This discovery and experience I’m sharing is specifically around the fallback or the default scenario of user avatars. If you’ve got a picture, we display that picture, and everything’s gravy. But what do we do when you don’t have a picture?

When we look at some existing products, such as some of Google’s services, we can see a coloured circle—the colour of which appears to be random—and a letter (initial) or two. Apple does the same with its Mail and Contacts, but defaults to a grey (unless you choose to assign a coloured circle and initials to one of your contacts who doesn’t have a picture).

Some other products, like Slack, choose to use a default pattern, but presumably from a selection of slightly different coloured patterns so that you can still differentiate between multiple people who don’t have a picture.

Board Game Arena is a website I use occasionally to play games with colleagues and you can select from a gallery of images, but can’t upload your own. There is a large enough selection that if you’re playing a game with about six people, for example, chances are pretty low that you have the same picture as someone else.

🔠 Investigating how fallback initials are determined

ℹ️ Note that while some examples represent actual companies, I have deliberately altered some examples in this post for my privacy and other people’s privacy.

Before rolling out our own solution, it makes sense to do the research and see what users might be familiar with in the mail apps, social media, or other products they might be familiar with. There is no benefit to reinventing the wheel, but perhaps there is something we can do better?

I’m a heavy Apple user so I did use their Mail and Contacts apps to see how they showed initials for their avatars. There is either one initial, like “G”, or two, like “GC”. When I first did my research into this (almost two years ago now), I had some stuff to go off with Google, but they only display one initial and use colour to differentiate between initials that are the same. You can see how it works on Material UI. The system mentions using the first letter of the alt text when there is no image. We don’t rely on colour, so I didn’t take too much inspiration from them.

One initial displayed

Companies with one word in their name, such as Etsy, yielded an avatar with the fallback “E”. We also saw this in cases where the contact name was not present, and the email address must have been used as the fallback.

Name	Resulting initial
Etsy	E
Personail	P
MentorCruise	M
georgiecooke.com	G
CompanySign-in	C
Z-Eyes	Z
hello.name@gmail.com (no contact name)	H
SEC_autoresponse@australia.com.au (no contact name)	S
noreply@website.com	N
NoReply.NoVote@elections.nsw.gov.au	N
#HelloWorld Australia (punctuation ignored?)	A
DDD Sydney 2018 (name with numbers in it is considered a single name?)	D
me&u	M
GoFundMe	G

I did some across an interesting example where a non-Latin character was considered, “沐阳” actually did return the first character 沐. (I don’t speak Mandarin and I’ve chosen an example, but I did see a real person’s name in my inbox whose avatar showed in a similar fashion.)

Two initials displayed

It’s pretty common that two letters indicates the initials for a first name and last name in Western countries, such as “GC” for the name Georgie Cooke. It appears that in the case of a middle name, such as Felix Mathieu Wien, “FW” is displayed as the initials, almost as if to say the middle name is disregarded. This is also the case for business names such as IKEA Customer Service, which returns “IS”. I didn’t find any products that would consider the middle initial and return “FMW”.

Name	Resulting initial
Georgie Cooke	GC
Felix Mathieu Wien	FW
Apple Support	AS
Etsy Transactions	ET
IKEA Customer Service	IS
Urban Status Handbags	UH
BLUNT Umbrellas AU	BA
Nicolas – Sézane	NS
Hello + Co	HC
Rut & Circle	RC

No initials—falls back to a “user” icon (👤)

In some cases, there were no initials at all. Rather complex email addresses of formats similar to visa.returning.resident.australia@gov.au resulted in no letter being shown, and I remain puzzled as to why some email addresses don’t return a single initial, while some do.

I also noticed that this happened when the contact name consisted of 4 or more words. I recently made a purchase from The Perfume Oil Company, but instead of expecting a “PO” for the initials, Apple Mail returned a “user” or “person” icon in place of the contact photo when I received an email confirming my order.

Another case that confirms my “4 or more” statement is email newsletters I get from the Bad at Keeping Secrets substack. The contact name has been set by author Carissa as “Carissa Potter from BAD AT KEEPING SECRETS”, and we count 7 words, which also results in emails displaying the same default user icon as in the case of emails from The Perfume Oil Company.

Referring to the punctuation, an old email newsletter I kept with the contact name “Zen Habits: Letting Go” resulted in the user icon. I assume the colon was not parsed as having any specific meaning, and thus this fell under the “4 or more” rule.

I’m certainly unsure of the assumption here. Did Google and Apple just stop after four words, thinking it was unlikely that anyone would have that many names? Or maybe it is less likely that these are identifiable names, and are more like phrases?

While I don’t know the percentage of people who have more than four names in their full name, one of my exes had four names as his legal full name, and I recall that being on the unusual side—at least for where I live in Australia.

All these resulted in no letters, and a fallback to the user icon:

• visa.returning.resident.australia@gov.au (presumably this didn’t show “V” due to the complexity of the email address)
• The Perfume Oil Company
• Stone Heart Body Art
• Carissa Potter from BAD AT KEEPING SECRETS
• Zen Habits: Letting Go
• John, Paul, George, & Ringo
• Enquiries – The Armored Club
• Cindy – Panda Rescue
• 24Hundred

The role of punctuation

As you can see in some of the examples above, any number of characters without a space separating them means that it is considered one “word”. This was the case regardless of punctuation such as periods and hyphens. Where I found this to differ was with parentheses, which were duly ignored, as if they were not part of the name.

Also ignored were titles such as “Dr” and “Miss”. In the case of “Miss Jones Customer Care”, the company name is “Miss Jones”, so it felt a bit odd when “Miss” was assumed to be a title and thus should be ignored.

When it came to punctuation like pipes, plus symbols, and ampersands, those were essentially stripped and the rest of the name was parsed.

Name	Resulting initial
Sydney Doctor (via Cliniko)	SD
Xavier McDonald (via Google Docs)	XM
Kat (Airbnb)	K
Miss Jones Customer Care	JC
Dr Ceandra Tjeng	CT
Annie | JewelBox	AJ
Hello + Co	HC
Rut & Circle	RC

The most unusual example I have of punctuation in my previously received emails is one from “// BNKR //”. A stylised version of the name of a clothing store, it actually falls back to a user icon perhaps because this string of characters doesn’t look like a “real name”.

The role of numbers

It was trickier to figure out how numbers were parsed, but the company “24Hundred” showing as a user avatar led me to think that anything starting with numbers was merely not considered a name. “SC” displayed for Squirrel 3 Clothing—the number in the middle was ignored.

A summary of findings

From here, I can make some assumptions about the patterns we have found.

• Single names, a string with no spaces, and most email addresses that are not unusually long will return one initial
• “First, last” formatted names, or a string with two words separated by a space, will return two initials
• “First, middle, last” formatted names, or names with two words separated by a space, will return two initials, where the two initials are taken from the first and last word
• Any more than four names, or any string with four parts separated by spaces, will return a default user icon
• Capitalisation and parts of the name being in uppercase or lowercase generally doesn’t matter
• Anything that is a letter is parsed
• Numbers are not parsed at all
• All punctuation is considered formatting, however, words in parentheses are generally ignored

‍🔍 Researching about different names and formats for our solution

This is where I discuss the possibility of names with non-Latin characters. To avoid over-engineering a solution, there are some things that are going to be out of scope because they might not apply to the users of your product or the requirements of what you’re building, so it would be a waste of time and resources to do. Most users of our Campaign Monitor product have names with Latin characters and send emails with Latin characters. We decided not to cater to non-Latin characters, but still asked, “What if?” What if someone does sign up and fill their profile in with Japanese hiragana characters, or Arabic, or Vietnamese, or—heck—even emoji? (My coworkers know me to be an avid tester of emoji in interfaces.) I’ll come back to that.

Real names consisting of more than 2 words

I asked a few people at work (names changed for privacy) about their thoughts and opinions on what I was investigating. One of them in particular, we’ll name her Cassidy da Silva, said that most platforms showed her initials as “CS”. This is precisely how Google and Apple would display a name like this, because it assumes the middle word (or two, if there are two), is a middle name, and retrieves the first letter of the first name and the first letter of the last name.

• Cassidy da Silva would return CS
• Cassidy Annette da Silva would also return CS

Cassidy, however, was not a fan of seeing “CS”, because she had always written her initials as “CDS”. At the very least, she said “CD” would make more sense to her.

Someone else with the name Hunter van Dijk Haas, had often used the initials “HvD”. They told me they expected to see “HV” in English, and only ever saw it written that way, but in Dutch, many names use “van”, so it would make more sense as HD in Dutch. “van” is a preposition that can mean “of” or “from” depending on context, and many other non Western names bear this same trait. I had actually noticed that the video conferencing software Zoom would display such names with a lowercase last name as “Hv” and the example of Cassidy from earlier as “Cd”. Although I don’t know exactly how these names are parsed, from observing other coworkers’ names, I could deduce that in some products, anything following a word starting with a lowercase letter was considered the person’s last name.

Now that I’d observed a specific way of handling names like da Silva, van Dijk Haas, and even d’Chong, this led me to have an open discussion with other coworkers with similar names. I spoke to people with double-barrelled names, or two last names that were not hyphenated or double-barrelled, and some folks who had friends or family with these names and preferences for their initials. It was a very interesting discussion which led us to ponder, again, what was in scope of the task and what we had the capacity for building.

Hyphens in first names and last names

I began to recall other possibilities of names, including hyphenated first names, some of which were stylistic—such as “Ai-my”—or actually comprised two separate names—such as “Bethany-Anne”. In the latter case, we might even see Bethany Anne or BethanyAnne. We might have our own biases as how names should be written, and I personally know some people who have legally altered their names to make it easier to interact with the general public, but that doesn’t seem fair. We shouldn’t make assumptions about people’s names and preferred spellings or formats, and the least we can do is make extra considerations.

I’ve yet to personally see a triple-barrelled name in the wild, but a coworker shared their thoughts about having a double-barrelled name and what they might do if they wanted to keep both their last name and their partner’s (single) last name. With a last name of Shankar-Lee, would they go with Shankar-Lee-Brown, or Shankar-Lee Brown, without the hyphen?

Can we make initials for non-Latin characters work?

The case of the non-Latin characters returning the first character puzzled me a little bit. As an example, “Japanese” in kanji is “日本語”, which reads ni-hon-go. I do have basic understanding of Japanese and can read some of the language, but based on the example I gave earlier of someone’s name in Mandarin, and having studied Japanese to understand how many of the characters are read, it just doesn’t seem right to grab the first non-Latin character and use it as an initial. In this case we’d be taking the character “日” and it could mean any number of things, as kanji are characters that have varying meanings depending on context and neighbouring characters.

Let’s take the example of the name Ayumi in hiragana, though—“あゆみ”, each character representing a-yu-mi—and returned the initial “あ” for “A”, then it might seem a bit more acceptable in romaji (the Latin translation of Japanese), but I still feel like this isn’t completely appropriate. However, I don’t have a lot of experience in using products that are catered towards an audience using primarily a non-Latin language, so if I’m wrong on this, let me know. The collective limited knowledge and understanding in our organisation, as well as the small amount of users of our product using languages with non-Latin characters, led us to the decision of having a fallback icon for names with non-Latin characters.

In the same vein, emoji are non-Latin characters, and although they’re a lot of fun (I love them!), there wasn’t a simplistic way of obtaining them as a single character to display as the initial in the avatar. Under the hood, individual emoji are comprised of a unique combination of Unicode characters representing the resulting image. It would likely take more work to ensure that any and every emoji would display correctly as the initial on an avatar. Granted, we didn’t spend a lot of time exploring a solution for this possibility, and deemed it out of scope, but it’ll be interesting if anyone has input on this.

🧪 Our solution: How we chose to handle names

Names are unique and can be extremely personal. No matter what solution we come up with, people will have their preferences for initials on top of that. We can give users the option to provide their preferred initials where they don’t have a picture available, allowing them to set their preference, however, this may not always be possible, or is even considered over-engineering.

After doing research, we felt like we could do at least a little better than what we saw out there.

Allowing a maximum of three initials

One way to improve upon what we saw in other products was to allow for three initials instead of just two. Four seemed excessive and unlikely (though not impossible!), and from a visual standpoint, avatars would have to be quite large to ensure that four letters alongside each other are legible.

Allowing for three initials meant that we had to consider the scenarios that would yield three initials. Simplest of all was covering the format of “first name, middle name, last name”. Double-barrelled or hyphenated names were roughly next down the ranks of simplicity, so had I kept my maiden name and opted for Luhur-Cooke, I’d have “GLC” as my initials.

At this point I also recognise that the first-middle-last name pattern may actually constitute two separate last names that are not double-barrelled or hyphenated. I think it is still a more inclusive approach to consider three initials when three separate names are present. This also includes many of which are hyphenated or double-barrelled:

Name	Resulting initial
Felix Mathieu Wien	FMW
Alexandria Ocasio-Cortez	AOC
IKEA Customer Service	ICS
Priya Shankar-Lee-Brown	PS
Mary Jane Ng	MJN
Ai-my Watts Chang	AWC
Lysette Leighton-Amaro Quartz	LLQ
Jack Shu Wellington-Chan	JSW
Phan Văn Trường	PVT

Last names with lowercase

There was a bit more to think about with last names like “da Silva” and “d’Orsay”. To get a little technical, the way we parse the name is to take the first name before the first space (assuming there is a space) and roll with that, and the remainder of the name is parsed as a “last name” and run through various functions, especially to cater for more complex last names.

Name	“Last name” parsed
lowercase mcdonald	mcdonald
Cassidy da Silva	da Silva
Hunter van Dijk Haas	van Dijk Haas
Jenny d’Orsay	d’Orsay
Jessica de’Anth-Hansel	de’Anth-Hansel
Antonio Clark-d’Jonge	Clark-d’Jonge

Understanding this, if the “last name” begins with a lowercase letter, we take that lowercase letter and use it for the second initial. We don’t try to handle the rest—reason being, names can vary, and trying to obtain “dS” for “da Silva” and “vDH” for “van Dijk Haas”, and wondering what to do with names like “d’Orsay” (dO?) would prove more difficult than what we were already attempting.

In the case of double-barrelled names where the lowercase portion was in the middle, we still displayed the initial if it meant that it wouldn’t exceed the three-initial limit. Here’s what we ended up with.

Name	Resulting initial
lowercase mcdonald	Lm
Cassidy da Silva	Cd
Hunter van Dijk Haas	Hv
Jenny d’Orsay	Jd
Jessica de’Anth-Hansel	Jd
Antonio Clark-d’Jonge	ACd

I did give the example of Cassidy da Silva earlier, and mentioned “Cassidy Annette da Silva” returning “CS”. Unfortunately, in our solution, we’re also returning “CS”, due to the inclusion of the middle name Annette resulting in four separate “names”. As you’ve no doubt noticed throughout this exploration, many assumptions have to be made, even if we are making as much effort as we can to be inclusive.

We had decided that parsing first names was out of scope because complexity in last names seemed more common than in first names. In the “Bethany-Anne” example I gave above, it doesn’t matter what the last name is, but Bethany-Anne, Bethany-anne, BethanyAnne, and Bethanyanne would all display B for the first initial. If we’re looking at “Bethany Anne” with a space, this would yield some different results:

Name	Resulting initial
Bethany-Anne Irving	BI
BethanyAnne Irving	BI
Bethany-Anne Hannah Irving	BHI
Bethany Anne Irving	BAI

Our “4 or more” rule—take the last “word” as the last name

Since we had set our limit to three, we had to forego catering for four names. As I mentioned earlier, it is a bit rare. We followed the same rule that other products seem to use—first letter of the first name, and first letter of the last name. The first example follows on from the previous example of the name Bethany-Anne vs. Bethany Anne.

In the case of “Dr” or “Miss”, we didn’t do anything special with those, so they are considered part of the name.

Name	Resulting initial
Bethany Anne Hannah Irving	BI
Brent Christian Nathaniel Marks	BM
Random Potato SYD Corp	RC
Miss Jones Customer Care	MC

Disregarding numbers, non-Latin characters, and emoji

Based on research, we made the decision to disregard anything that was not considered alphabetic. For any first names that were in lowercase, we would automatically display them in uppercase. We left names in non-Latin languages alone, but in languages like Vietnamese, French, and German, names are likely to still display even if some of the characters have accents.

When it comes to numbers, any that are appended to the end of a name don’t get in the way of displaying initials, but company names or names that begin with a number will show the user icon. The “24Hundred” example I gave earlier was a reason for not catering for numbers—how would we really show “24Hundred”? The number “2”? That didn’t seem quite right. It was too tricky to cater for that case.

We decided that we would not display emoji. When emoji are included at the end of a name, we still display the initials. However, when emoji are included at the beginning of a name, we display the user icon.

Name	Resulting initial
lowercase mcdonald	Lm
Magic Ball 8	None (👤)
Formula1 Racing	FR
Phan Văn Trường	PVT
日本語	None (👤)
🥛 milk it	None (👤)
doughnut boi 🍩	Db

As I was writing the “our solution” part of this post, I noticed some funny bugs with our solution that displayed punctuation when it wasn’t supposed to. Such as “Georgie (C)” displaying “G(” as the initials. Guess I have some work to do. 😆 I think that it’s also not a high priority bug to fix, because at the end of the day, when we think about the users we’re serving, it’s most likely that they will be typing their names in for use in the product and not trying to format how they want their name to appear to their contacts.

Handling limited space for initials

We had three preset sizes for the avatar—small, medium, and large, corresponding to 30, 48, and 60 pixels in width and height, respectively. Your mileage may vary, but these were the sizes we chose. To avoid adding further complexity to our solution of handling three initials at most, we settled on showing just one initial for the small size, and three initials for the medium and large sizes. This allowed the letter on the small size to be displayed large enough to be legible.

G

GCC

GCC

✏️ Yours sincerely…

In conclusion, this was an absolute adventure. This post has actually been in my mind for almost two years, and I only got around to throwing it together in the past month. This was a problem I was very passionate about finding an inclusive solution for. Many assumptions are made in designing solutions in software engineering, and we don’t often hear feedback from users because they just “deal with it” and get used to small issues.

I know this kind of stuff is not everyone’s cup of tea, but I hope it was insightful. If you’re at all interested in the technical solution or discussing the code solution specifically, feel free to contact me. If you have anything to share about your own name or others, I’d also be keen to hear it! We’re all learning here.

✨ Signed, GCC (Georgie Celestine Cooke)