A Little Bit of Background Info 📝

3D Digital Fashion

Virtual Try-on Platform

This project was part of the DMKTZ platform that I worked on as an in-house designer for TG3D Studios Inc.

DMKTZ is a platform where you can create 3D digital fashion designs without any knowledge of complex 3D software. Users can choose from a library of garment and accessories templates and fully customize them in our studio by applying fabrics, artwork, trims, and more.

Users can then, sell their creations on our marketplace, buy physical versions of their designs, or export directly to all popular gaming engines and use their digital clothes in their favorite games.

Goal 🏆

Our goal was to design a virtual try-on / fitting room, within the DMKTZ platform, that would allow users to try on their digital fashion creations on their game avatars or even their own body scans.

Problems to Address ❗

We wanted the experience to be seamless. A simple click on a garment and it would immediately appear on your chosen avatar. However, because we support multiple avatars that have different body sizes and shapes this would not be possible with our current technology.

Since the garments are essentially 3D models, they need to:

Go through garment rigging (adding a skeleton to support movement and animation)
Get draped (fitted) to fit each avatar after the user selects the garment.

This process would take 1-3 min each time the user selects a new garment. Of course, that was a big issue so we had to come up with possible solutions.

The Struggles 🥴

Since this was an issue that needed to be solved before I could move on with the design, and this new feature was about to be introduced at an upcoming tech event, we needed to have at least a beta version ready to present and there was no time to waste.

The Solutions ✅

For the beta version presentation, I decided to provide only a few samples of garments and only 1 type of avatar (CloneX) so we can pre-drape each garment and therefore remove the loading time.

For a future version, there are still a few technical limitations to overcome, so in the meantime, I came up with a solution that would allow the user to still be able to choose from different avatars and virtually try on all their digital creations, while removing the loading time after each click on the new garment by combining it to one ’’Simulation’’ process.

We also managed to lower the total waiting time to 30sec-1min.

I added slots for each garment type. After selecting a garment, it would first appear in the designated garment slot
I also added a CTA button (SIMULATE). After the user selects their outfit, the SIMULATE button will become enabled and upon clicking the button the draping process will run in the background
I created an animation of one of the avatars' runway walking with his outfit changing to provide a more entertaining and eye-catching interaction for the user’s waiting time.

After implementing all the changes, I conducted in-person testing with a group of potential users and iterated the design based on the collected feedback.

Testing📊

Additional features 🎨

One of the features allows the users to select a static or animated pose that can be captured and shared on social media. Users can also select from a variety of different background types including color, image, or in later versions, 3D space.

Key Takeaways

Identifying technical or other limitations early on in the design process is going to save a lot of time down the road.
Conducting user research and user testing is a crucial step that will help create a successful and user-friendly solution.
Frequent discussions with the rest of the team are important and getting as many relevant opinions as possible is always a plus. A fresh pair of eyes can bring new perspectives :)