African Avatar

Local, Localisation, Localised, three similar words with three different meanings. Local: Relating to a particular region. Localisation: Adapting something to a particular region and Localised: Restricting to a particular region.

Safaricom Alpha, the innovation arm of Safaricom, is a knowledge-based, user-centered, data-driven organisation, whose mantra is building the future. Our user-centered design process is driven by understanding human behaviour and designing products that meet user needs.

As we design, we think beyond visual, but to instil/inspire a sense of ownership and pride. In this post, I will delve on the process of designing to spur ownership. PS: this post outlines the design process Wanjagi (@directionman) used. Our flagship product, Zwuup!, a messaging app integrated with M-Pesa, required an avatar.

Most organisations have male white avatars, however, is it possible to have a gender neutral but inclusive and local one?

“How do we to go about it?”

Three options 1. leave it blank, 2. use preexisting stock placeholders e.g., here, here and here 3. use non human characters or 4. design one? The guiding principle is local, in this case, relating to a particular region. We needed to know who the users were and where they were located.

What is their identifier? Kenya, for instance, has people of different skin tones and hair textures, but the majority are black with curly, black hair. So, how do we represent this in an avatar? The search began with one a google search, ”African avatar”.


Images courtesy of google and duckduckgo searches retrieved on Jan 22, 2019

The search results were mostly licensed stock pics, but they felt localised (adapted) as opposed to local. It was time to design an African avatar, but, “what makes the avatar African, is it just the colour?” Colour has a lot to do with it, but there are also hair and facial features.

Challenge 1: Understand what it means to be an African(Colour, hair, eyes, nose)

First Bonga Avatar: Designed by @kush .The easy part, head, colour, hair, ears.

Next: Group Avatar

Note: This should be representative of the populous. It may include different parameters, gender, persons living with disabilities and race. The first design had three people with 3 different hair textures. What is your opinion? Is it 2 women and one man or two men and one woman? Does colour sway your position?

Challenge 2: Expressions

Iterate the group icons, add different expressions, black and white against colour. If we added facial features, will this give the avatars character?

An avatar with colour adds a new dimension, acceptance. They are pleasant to look at, right ? The users may not change them with actual photos, which beats the purpose of an avatar. For instance, Twitter used an egg as their avatar, the premise is that it will eventually hatch into a bird.

However, some users never changed this icon, which prompted the design team to redesign the icon to encourage users to change their profile photos. With this in mind, we reverted to black and white to make the avatars less conspicuous, but still representative.

Challenge 3: Hair

On testing the group avatar with users, they noted that the hair was too straight, and unrepresentative. Time to give the hair a bit of character, make it more curly or plaited. We also experimented with colour overlays.

Unfortunately, colour overlays did not resonate well, but the cornrows were perfect. We played around with different versions of the cornrows. The result is shown below.

See below how the group avatars transitioned from straight hair to more modern African hairstyles.

Notice that, the torso and expressions are no longer available in the group avatar. We did this to match it with the single user avatar that is gender neutral (no leaning to a specific gender). Did you notice the box fro? African hair is the only hair that can pull off the box hair shape. Any of the hairstyles outlined can be localised (replicated, copied or adapted) by people from other cultures, but the box hair is uniquely African.

Final Avatars

Presenting the final avatars, we welcome your comments

Main Avatar
Group Avatar

You realise they are greyed out! Our end goal is having users replace them their own photos. We shall measure this metric and update you on avatar user behaviour.

Modernising the fro

We finally settled on the avatars, and they look good! However one user pointed out that the avatar with the box hair is dated, looks like an avatar from the 80’s. The question was, how do we modernise this? Donning our researcher hats, we studied modern hairstyles, what is the current trend? Which is the most common denominator? Majority prefer natural hair with some kind of fade and/or cut on it. The box fro was iterated from 1 into 3 or 4 The final iteration for the box look transitioned to 3 or 4.

Group Avatar: Version 1
Group Avatar: Version 2

Local, relating to a particular region, we intended to fully represent the people and the locale without adapting or restricting it to a particular region. There is little representation of African avatars online, and we needed to change this narrative, but use simple shapes and lines (minimalist) and achieve the intended design.

Our final avatars are displayed below. We would love your hear your thoughts, is it a boy, girl, neither, any? You decide @SafaricomAlpha!

Main Avatar
Group Avatar