Case Story: How to Design Avatar Generator

June 18, 2021 · 🕓30 min read
#Js, 
#Browser, 
#Animation, 
thisis sk si s

Anyone can be a creator, and there really is something for everyone.

The idea of Kartunix was to create a generator for cartoon characters called avatars. Florian Ilias, the Austrian founder and business evangelist of the project, thought to himself one day, “there’s a need for a foolproof configurator with a bunch of basic characters, dozens of modification sets and an intuitive step-by-step process of creation.”

Creating Emotional Product

Our task was to create an engaging UI for Kartunix. All the elements of UI were designed with a game like feeling and appeared right in front of users. There were similar services and apps, still we couldn’t use them as an example because they were of poor quality with boring and limited interfaces.

We set the slider with options right below the avatar like in many video games and the avatar was placed in the middle of the page. It became a basic layout for the user flow in our case.

Anatomy of Design Process

Participatory design is about keeping people engaged by doing something simple and funny before they need to do something really important for the business. So at the beginning, users get a small set of avatars to taste the service. Step by step they can:

Choose the type

Choose the style

Select the mood for avatar

When the modification process is over, users can get their first avatar activating the account. After activating your account, all new avatars will be saved to a personal library.

With personal accounts, users can purchase different avatars and options like glasses, hats, haircuts, etc. for even more fun. Fresh items and accessories drop into the library as well. Since each character is going to work slightly different from others, there is a specific framework in the database to figure out which configuration options is necessary in each case.

According to the business model, the design/sticker/T­-shirt will be paid for through a standard check­out process by credit card or PayPal or by redeeming a voucher bought previously in a shop (for example, toy shops, baby accessories, photo studios, etс). The payment section is also designed in a playful manner.

In the market section, users have the opportunity to choose accessories and attach avatars to them. First, they need to switch from virtual items to printbases.

Then they select an appropriate item and apply an avatar to it. There can be more than one image. If it’s clothing, users can attach an avatar on both the front and the back.

The configurator can be used as a stand­alone application or it can be integrated into third party websites of manufacturers who want to customize their products. For this reason, specifically, we have designed two separate landing pages. This is a concept our company greatly appreciates and it is an extremely important stage for representing the service and bringing users into the process.

The upshot

So, that’s the short story of how we did our best to make Kartunix attractive and engaging. Feel free to share your thoughts about it. Your feedback is always inspiring for us and keeps us moving forward.

When the design part was over we handed it to the dev team and as of now it is in beta. For sure, we’ll tell you about the final release. It’s so funny and cute! You should try it some day.

Feel free to ask questions to Halo Lab team, that is rated as a Top Software Development Company on DesignRush.

Other Posts :

featured image

June 16, 2021

#framer-motion, #js, #React

Magnet-button with framer-motion

The birth of an idea In November 2015 Daniel Ramos, the CEO of the project, heard his friend Mike pl...

Read More

featured image

June 18, 2021

#Js, #Browser, #Animation

Case Story: How to Design Avatar Generator

Anyone can be a creator, and there really is something for everyone. The idea of Kartunix was to cre...

Read More

featured image

June 18, 2021

#devlopment, #Angular, #Animation

Branding brief: all you need to know

Communication with the customer is really important for the designer. A proper briefing is half the ...

Read More