Amelia Maker
Avatar maker application
Web | Go to Amelia
Feb 2021 | Company Outbrain
![mockuper (9).png](https://static.wixstatic.com/media/dc2ce4_a1bb41a1b3e540c0b283e6b8a5f18150~mv2.png/v1/crop/x_599,y_377,w_2038,h_1587/fill/w_564,h_438,al_c,q_95,enc_auto/mockuper%20(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](https://static.wixstatic.com/media/dc2ce4_ea4775e8fb0a42c28ce3b9de3e116dad~mv2.jpg/v1/fill/w_154,h_124,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/Team.jpg)
![Earth.jpg](https://static.wixstatic.com/media/dc2ce4_9b5fbe9a582e4326a0e632f274fc5c69~mv2.jpg/v1/fill/w_133,h_126,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/Earth.jpg)
![Age.jpg](https://static.wixstatic.com/media/dc2ce4_f6bc208975c44d2289836e1ec15876e3~mv2.jpg/v1/fill/w_103,h_108,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/Age.jpg)
![hard-work.jpg](https://static.wixstatic.com/media/dc2ce4_39249d1e193a475392759c52f18fb411~mv2.jpg/v1/fill/w_165,h_96,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/hard-work.jpg)
![AMI.jpg](https://static.wixstatic.com/media/dc2ce4_63409b4436724c218ef78d6ed1db3af4~mv2.jpg/v1/fill/w_134,h_130,al_c,lg_1,q_80,blur_3,enc_auto/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](https://static.wixstatic.com/media/dc2ce4_60fea42aa0c94d92bcdbc17ac8827ef9~mv2.png/v1/fill/w_71,h_44,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/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](https://static.wixstatic.com/media/dc2ce4_54663a23fbcb40c5b6e4a314c0170d7e~mv2.png/v1/crop/x_0,y_6,w_504,h_78/fill/w_74,h_12,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/sdvasdvasvsdv.png)
![ffffffffffffffffffffffffffffffffffffffff](https://static.wixstatic.com/media/dc2ce4_98ac5c16e0234f1ab67631038e143eb7~mv2.png/v1/fill/w_77,h_14,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/ffffffffffffffffffffffffffffffffffffffff.png)
![clarity_cursor-hand-line.png](https://static.wixstatic.com/media/dc2ce4_c1e9c68c048f4b7c8e7971cca5b5d86c~mv2.png/v1/fill/w_30,h_30,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/clarity_cursor-hand-line.png)
![sdvzsdvsdvdv.png](https://static.wixstatic.com/media/dc2ce4_7425a64c727b46bbb09879df1b556054~mv2.png/v1/fill/w_59,h_11,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/sdvzsdvsdvdv.png)
![clarity_cursor-hand-click-line.png](https://static.wixstatic.com/media/dc2ce4_70d60380909c4e4bb431473e4d73fc2b~mv2.png/v1/fill/w_30,h_30,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/clarity_cursor-hand-click-line.png)
Main screen
![srtjhsrtjsrtjsr1111111111111111111.png](https://static.wixstatic.com/media/dc2ce4_aa71c9711305433b9c26688fbf3ba2a7~mv2.png/v1/fill/w_79,h_49,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/srtjhsrtjsrtjsr1111111111111111111.png)
Creating the logo
Step 1
I took the original Amelia of Outbrain.
![Untitled-12.png](https://static.wixstatic.com/media/dc2ce4_dbd2d40ee3c04354a9c273aba20c3fd7~mv2.png/v1/fill/w_64,h_60,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/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](https://static.wixstatic.com/media/dc2ce4_f2dbdff43cba49dc92444aeb32e6ae1b~mv2.png/v1/crop/x_0,y_5,w_409,h_264/fill/w_174,h_112,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/dfawv.png)
![drykrtuk.png](https://static.wixstatic.com/media/dc2ce4_5ecb8c41c9934b23887a5b793fdcfad1~mv2.png/v1/fill/w_164,h_154,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/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](https://static.wixstatic.com/media/dc2ce4_f3a9db573f97414ca1b3abc1f1228e18~mv2.png/v1/fill/w_51,h_77,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/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](https://static.wixstatic.com/media/dc2ce4_672c27093b8d4ea985a3e47d35ad1100~mv2.png/v1/fill/w_166,h_384,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/fgmdthdtmt.png)
![dfbadr.png](https://static.wixstatic.com/media/dc2ce4_bfc0b625230b457da7f575f860701597~mv2.png/v1/fill/w_51,h_96,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/dfbadr.png)
Final logo
![Logo-Amilia-dukdtudyu,fy,fy.jpg](https://static.wixstatic.com/media/dc2ce4_1c8e9aa96ac04f63a4703dea4508b3eb~mv2.jpg/v1/fill/w_80,h_47,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/Logo-Amilia-dukdtudyu%2Cfy%2Cfy.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](https://static.wixstatic.com/media/dc2ce4_5a4a03f1dbdc493fbfa723f53c7c6466~mv2.png/v1/fill/w_49,h_43,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/FHFTYKDTY.png)
Ready product
![mockuper (9).png](https://static.wixstatic.com/media/dc2ce4_a1bb41a1b3e540c0b283e6b8a5f18150~mv2.png/v1/crop/x_599,y_377,w_2038,h_1587/fill/w_49,h_38,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/mockuper%20(9).png)