Mixed Medium Study: The Creation of ACE

After transitioning from Frontend Engineer to UX designer for Edge Learning, one of the things I wanted to do was symbolize the migration from a monolithic architecture to a microservice architecture, and do it in a way that would supplement the tone of the app. Considering that the app is for grade-school students, I did some research about things that grade-schoolers in the US unanimously found cute. As it turns out, animated characters from Dreamworks, Pixar,and studio Ghibli were intersubjectively the cutest things in our selection. I wanted this cute character to represent our new, microservice AI based approach. and thus, the AI Driven College Engine, or ACE, was created.

For more context, read about the design system that this project revolves around here.

Approach

Prior to taking on the project of character design, I had no idea how to design in a 3D space. I always thought about trying it one day, but this project really gave me the incentive to start.

I started with what I knew best, 2D vector art (top left). I had the idea to make the character a light bulb with an oxford cap, in order to personify a "bright student". I created the vector art in inkscape. I also knew that I wanted the character to only have one eye. This was due to a lot of my character references, including Mike Wazowski from Monsters Inc., The Minions, and Waddle Doos from the Kirby Franchise only having one eye.

I imported the vector into Figma so that I could test its compatibility with the design system. It worked really well with emojis and the Phosphor Icon Family. This meant that although my end goal was a 3D model, I could use the vector art as icons for components throughout the PWA, in areas where an ACE microservice is called and benefits a student.

In order to jumpstart my transition to 3D, I decided to use a diffusion image-to-image algorithm to convert the vector art into something akin to a Pixar character (3rd and 4th from the left). Although I did not get exactly what I was looking for, I now had images of 3D characters that looked similar to the one I was imagining. At this point, I began actually looking into 3D animation, and came across WOMP and Blender. Womp was a great sculpting tool and intro to 3D. The controls were very similar to Figma, and the "gooping" mechanic made it easy to combine geometries. After a while, I finally had a model I was happy with (5th from the left), and I exported it's geometry into Blender

Although Blender was a lot harder to learn, I could do so much more in it. This is where I used the sculpt function to fine tune the geometry, and also rendered out a scene with ACE in it. I exported the scene as an image, did some post-processing in DarkTable, and finally rendered the version of ACE that would be used as their character Avatar (bottom right).

Next Steps

This project is the first of many 3D projects I've begun to pursue. After getting a little better at Blender, I learned Three.js so that I could actually do things in the browser with my 3D assets. I'm building out a new portfolio site and and going to try and recreate my DemiHuman algorithm to procedural generate 3D lifeforms.

More by Fronrich Puno

View profile