Avatar Maker

Concept

Inspiring by Bitmoji, a personalized avatar design apps, Nathalie and I decided to create our own Christmas Avatar Maker. By building a personal avatar with the comic illustration, the user will be able to design and download the final piece of art. User can also design avatars for their friends, family and beloved ones.

Logistics

Roles: Art Director, UX Designer, Developer

Tools: Adobe Illustrator, Adobe XD, VSCode

Proposal & Wireframe

After proposing the concept and defining possible challenges, we narrowed the scope of this project down to limited features and options. With a workable plan, we began the draft design on paper cards that were similar to smartphone screens. Then, we tested the paper prototype with random people in the Student Union. We collected test results and improved the design based on what we learn from them. According to our established mobile size wireframes, we designed the wireframes for larger screens, including tablets and desktops.

Prototpye

Designing UI assets is the fun part of the project, we brainstormed popular features and common characteristics. We drew everything in Adobe Illustrator and exported them as SVGs to let users change the color of their avatars. We fixed the position of each element when we designed it in Adobe Illustrator, so that every part would be assembled well together.

Development

Coding is the most challenging stage of Avatar Maker. I was leading the HTML and CSS, Nathalie was mainly responsible for JavaScript, and we were solving problems altogether. HTML is the bone and flesh. I categorized SVGs into eight clusters and assigned appropriate priorities to each element. By refining HTML, we would be able to add CSS and JavaScript to HTML.

The main challenge in the CSS stage is presenting different layouts by setting breakpoints. It took patience and time to adjust the coding for a better display. We got almost a thousand lines of JavaScript. To make some elements exclusive and inclusive, we were stuck for a while but solved the problem in the end.

It’s exciting to have this final product and to share it with you. Hope you can enjoy it!