The UX Design Process: Building a Simple Character Creator

For this article, I will complete a simple task, with the goal of showing the steps that it takes to bring a mobile interface from conceptualisation to design, prototyping & development, giving insights into my thought process along the way.

The task:

“Please create a concept for an avatar creator for mobile including wireframes, screenflows and a functional description. An engineer should be able to build the product based on your concept. Please add a short description on how you approached the task.”

avatar |ˈavətɑː| noun

2. an icon or figure representing a particular person in a computer game, Internet forum, etc. conversation is depicted in a balloon over the avatar’s head.

The Oxford English Dictionary

Steps

In order to complete this task, I will perform the following steps, explaining my reasoning and insights as I go through the process:

1. Research and analyse implementations of avatar creators that already exist, providing a brief overview of their features.
2. Build an information architecture detailing the artwork required for the avatars.
3. Sketch wireframes and build a screen flow that explores an implementation of an interface, beginning with a blank canvas and resulting in a final shareable image.
4. Specify the behaviour of the concept targeted toward implementation by a developer.
5. Before development, create an animated prototype to show screen flows and behaviour.

1. Research & Analysis

An Avatar creator can take on many forms. A quick search on the app store revealed quite a few examples, from traditional human faces and bodies, to cats, dogs, South Park and Peanut characters, and many more. Here are three examples that were impressive for their interface, artwork, and style:

Bitstrips & Bitmoji

Bitstrips/Bitmoji are comprehensive apps that allow a person to create avatars based on themselves. They have multiple complex layers, each with their own style/colour options, allowing for millions of possibilities. These characters are then used to create comic strips with friends (Bitstrips) or your own personalised emoji characters (Bitmoji).

Bitmoji’s Avatar Creator

WeeMee

Similar to Bitmoji, WeeMee allows you to create a cartoon-based avatar, complete with accessories, backgrounds and other items. You can then share these with friends.

Cat Avatar

As its name implies, this app allows you to create a customised cartoon cat. It has a simple interface, allowing you to choose only the body, eyes, facial expression and background, but still results in numerous combinations.

2. Information Architecture

To limit the amount of time I spent on this task, I decided to create a simple human face, allowing for a few customisations — but leaving it open for future versions to have many more shapes, colours and sizes.

I searched for some artwork online, and settled on using these free icons provided by @AnnaLitviniuk on Sketch App Sources.

I will use these to build an avatar creator that allows a person to customise a face. To conceptualise what’s involved, it helps to break them down into their components:

1. Face Shape
2. Facial Expressions
3. Hair
4. Clothing

Each of these components has a few styles. As an example, the hair can be broken down into four styles:

short, scruffy, long, pig-tails

Some of these styles then need to be available in different colours. For the hair we can use:

blonde, brown, red, black

From this we find that there is a simple hierarchy present in this model, which will inform the steps we will need to explore when building the interface — each component has a style and optionally a colour property:

Component
 a. Style
 b. Colour (optional)

When creating an interface, we have to keep in mind that the user will select a style for each component, as well as select a colour to go with the style. In this case, it doesn’t matter whether the user selects the colour or the style first.

3. The User Journey

I came across a few different interfaces for customising avatars, and observed that the best were tailored to the complexity and number of components and styles present.

For this task, I first determined the path a user would take through the app. I then looked at each step in detail, to determine what the interface would look like.

The Screen Flow

1. Splash Screen — shown each time the user opens the app.
2. Character Creator — allows for each component to be selected, and have both their style and colour (if present) customised.
3. Save and Share — shows a preview of the customised avatar, with a standard iOS share sheet to export the image or save it to Photos.

Initial Sketches & Wireframes

Focusing on step 2 — the interface for creating a character — I came up with a few rough sketches of how I thought it could work.

Sketching some rough ideas in Paper by FiftyThree

I initially explored three different options:

1. Swiping across components of the avatar to switch between them, and swiping up and down to change colours. This would have resulted in a clean interface, but would require the user to get a little training, or discover the interface themselves.
2. Going step-by-step and having the user select each component and colour. This approach would have provided a well-guided path to the end, but would have resulted in a lot of moving between screens, especially if the user was unsure of how the components matched or how many there were.
3. Placing the avatar at the top and the components below. This approach is the most clear as it really shows the hierarchy I pointed out earlier, and allows the user to move quickly between components.

Detailed Designs

Finally, I spent some time in sketch, creating examples of what the screens would look like fully designed. I went with the third option, and refined it as the design progressed. I completed the interface, and made progress on most of the assets needed to display the avatar.

Laying out each screen, as well as diferent options for the creator screen.

This resulted in some final screens that can be used in an interactive prototype and developed into a completed app:

All the action happens on the middle screen.

4. Specifications

Here, I provide some light specifications for development, and I would separately provide the Sketch source files, exported image assets, text in all planned languages, and any custom typefaces and colours.

1. Assets

Since we are creating a design with few components, we will use transparent SVG files placed over each other to create a layered image for display, which will then be exported as a PNG file when the user chooses to share it.

We can combine these when specifying our assets:

Component_Style_Colour
Example: Hair_Scruffy_Brown.svg

The assets will be exported from Sketch at all necessary sizes, and included with the app.

A spreadsheet will be provided to map each combination of Component_Style_Colour to the appropriate SVG file.

For more complex avatars, the graphics could be created as vector images and translated into code (for example using PaintCode for iOS), to reduce file size and increase the flexibility of overlaying different colours and textures.

2. Flow

There are three main screens used in the app:

A Splash Screen, displayed when launching the app, and when the user taps the info icon on the creator screen.
A Creator Screen, where the component, style and colour selection takes place. From here, the user can also navigate back to the Splash Screen, or tap the share icon to bring up the Save & Share Screen.
A Save & Share Screen, which slides away the component, style and colour options to show a preview of the final avatar, as well as a standard iOS share sheet that exports the image for the user.

3. The Creator Screen

Here, the user can select between four different tabs for each of the components:

Head, Hair, Face, Clothing

• As each of these tabs are selected, the styles and colours change as well. The user can select the appropriate style and colours here to see changes on the screen.
• When there are more styles or colours that can be displayed on a single screen, those sections will scroll horizontally to show more options.
• The styles and colours will be mapped to each SVG file, and one of each component will need to be layered over each other in the following order:

Top: Hair
Above: Face
Middle: Head
Below: Clothing
Bottom: Circular Frame

This annotated image shows the interaction on this screen visually.

4. Saving & Sharing

When the user taps the share icon, the app will generate an image with the following specifications:

PNG at 1600 x 1600 resolution, with transparency.

5. Exiting the app

When the user switches away from the app, the configuration of the avatar should be saved, so that the next time it is launched it opens in the same state. Once the avatars become more complex, in-app saving functionality can be considered.

5. Next Steps

In this article, I’ve summarised the steps taken from conceptualising an app to specifying its assets and behaviour for development.

Interactive Prototype

The next step in this process would be to create a clickable prototype in Pixate or a similar interaction design tool that allows you to place individual assets and create the movement and animation used throughout the app.

User Testing

Once the prototype is ready, I would invite a few people to use the app, to see whether the interface is usable and easy to discover.

6. Assets & Resources

I’m providing the sketch file I created here, feel free to use it to code your own app, and let me know if you do!

Avatar Creator.sketch

I have been providing workshops to startups in Berlin that are loosely based on the Google Ventures Design Sprint. It’s a great way to quickly build and test an idea, and works especially well when conceptualising a new product, so have a look at it if you want to learn more.

Scan this code with the Pixate App to play around with an early prototype.