top of page
Amelia Maker

Avatar maker application

Feb 2021 | Company Outbrain

mockuper (9).png

About the project

Web application for making an avatar
in the style of Outbrain logo

My role

Be in charge of all UX and visual aspects of the product and supply all items and logo.

Design process

Market review and user persona template
Wireframes design
UI design
Creating the logo
Creating items
User testing
Gathering analytics

Market review and user persona template

I studied the lead avatar maker projects on the market, such as avatar maker, Facebook avatar maker, and getavataars. 
After that was the stage of user understanding. I wanted to define a user persona that will reflect the most users of application. 

The overage worker in Outbrain is:

Gender

Location

Age

Spare-time

Relation with Outbrain

Team.jpg
Earth.jpg
Age.jpg
hard-work.jpg
AMI.jpg

Men or Women

Need to make filling for both genders in the same proportion

From different countries all over the world.
But the mainly office is in Israel.

23 -50 years old

Should add attributes from different countries. For example kipa for Israeli.

Need to add haircuts for different ages

Hard working.
Most of all users with families.

We didn't want users to spend a lot of time in the App, the target was - to create an avatar within a few minutes. Also, we added a random option, where you can create the random avatar in a second.​ 

High team spirit. Love and proud their company

Need to add items with logo of Outbrain

Wireframes design

ALALALALAL.png

UI Design

Colors

I didn't think a lot about the main color of the application - without a doubt, it is the main color of Outbrain

#EF7B05

#808080

#E8E8E8

Button's status

Default

Hover

Pressing

sdvasdvasvsdv.png
ffffffffffffffffffffffffffffffffffffffff
clarity_cursor-hand-line.png
sdvzsdvsdvdv.png
clarity_cursor-hand-click-line.png

Main screen

srtjhsrtjsrtjsr1111111111111111111.png

Creating the logo

Step 1

I took the original Amelia of Outbrain.

Untitled-12.png

Step 2

I decided to take only part of the logo, because in the application you are twisting it and getting a unique design. 

dfawv.png
drykrtuk.png

Step 3

Choosing the font. I decided to choose the round font in order to fit the round style of Amelia.

Untitled-1.png

Step 4

I also had an idea to dress up the logo with items from the app. But in the end the decision was to keep the logo simple and minimalistic.

fgmdthdtmt.png
dfbadr.png

Final logo

Logo-Amilia-dukdtudyu,fy,fy.jpg

Creating items

I had to supply a variety of items to the developer for creating an avatar maker experience.
I searched people in Outbrain in order to understand how they look, which haircuts they have, and what they wear.  
In order to save time I took what I could from Shutterstock and made adaptations to fit the specific shape and colors for the original Amelia.
Some items I couldn't find on Shutterstock and I drew them by myself.

Here is a few options of items in work:

FHFTYKDTY.png

Ready product

mockuper (9).png

User testing

Before making the release of the app, we made the user testing: had sent an application to our friends and checked how they interact with Avatar Maker and do they have some problems in creation.
 
After this we eliminated a few small bugs, changed coordinates of several items and added a few more new items to the list.

Gathering analytics

After a few days of application release we checked analytics. 
 
Few conclusions from it:
- we understood which items are the most and least popular for our users
- the most popular items should be on the top of the list
- it was a good decision to create a random button, it is very popular
- it was a good decision to add items with logo of Outbrain.

© 2024 by Yulia Krepacheva

bottom of page