Generative Avatars for TED
February 2019 // ted.com
This project reminds me of the beauty of organic shapes.
It often speaks to me about the importance of small differences.
It makes me laugh to see how fun a random assemblage can often be.
While working at TED, I was part of a project to replace their default avatar, a gray silhouette, with something better.
Goal
You generate avatars so your site looks more interesting than a sea of gray silhouettes, but people should still want to upload their photo.
Like any avatar, the images should be clear enough that you can easily tell them apart, even at small sizes, and they should be stable - you can’t identify a person from an abstract image that always changes.
The only datum we had for every TED profile was the timestamp of when the person signed up. (You don’t have to provide a name when you sign up, and some profiles created through other systems don’t have an email address.)
Approach
That last constraint was the first to inform the initial design: Tara Lynn Connelly produced 24 proof-of-concept images that combined the hour the account was created in TED’s logo typeface, Helvetica, with an organic shape, and a red circle symbolizing the one TED speakers stand on. The hour numbers ran from 1 through 12, and different colors for the organic shape provided an AM and a PM variant.
When you can only have one of 24 avatars, it’s inevitable you’ll have the same one as someone else. On a page listing only 10 profiles, the probability that at least two of them have the same avatar is:
1 - (24/24 * 23/24 * 22/24 * … * 15/24)
That comes out to 89%. So the next step was to generate enough avatars that you’d probably never find anyone with the same as you.
To ensure you always have the same avatar, there are two approaches: generate images randomly and store them, or create a deterministic algorithm that generates images from profile data. We chose the latter because it’s cheaper and simpler, though it means any change to the algorithm would change everyone’s avatars.
Build
Tara asked her teammates Joe Bartlett and me for help.
Since the primary target platform was ted.com, Joe suggested we generate SVGs, producing a crisp image at any resolution and dimension, from a tiny file that’s fast to download. A random example I just picked weighs only 1.37 KB.
This was a new approach for me: rather than expressing calculations in code, we generated SVGs via text templates. Tara already grasped the kinds of variations she wanted, and we were able to express that as a set of string interpolations with some logic transforming the input date into colors, radii, opacities, rotations, etc, as needed; the organic shapes and Helvetica number shapes were stored in an array of path coordinates, and the input date also became an index into it.
This made the SVG generation process and its code very legible (“how does this number become that SVG?”), even if it obscured the logic of the generative algorithm (“WHY does this number become that SVG?”).
Epilogue
Shortly before the avatars were deployed to production, there was a shift in design direction, and the color palette was changed to be more blue. Here, I’ve included examples from the original palette out of sentimentality, and to preserve that version somewhere, but you can see the final versions at ted.com/people.
You can see a much broader range of avatars in the original colors at Joe’s demo site.
