Experiential Design /Task 3: Project MVP Prototype

Start from 19.11.2024

12.11.2024 -26.11.2024 /Week 8- Week 10
Kong Cai Yi / 0363862 
Experiential Design  / Bachelor of Design (Hons) in Creative Media 
Task 3: Project MVP Prototype

---

LECTURES

Week 9/ Camera Point to Object V2

This week, we reopened our previous marker-based file and began incorporating the Camera Point-to-Object V2 feature. The lecturer provided the scripts for this exercise via Google Drive. Our task was to simply add the scripts to the objects and create the camera point canvas.

Fig 1.1 Camera Point tutorial drive (19.11.2024-Week 9)

Fig 1.2 Add Scripts in image  (19.11.2024 -Week 9)

Fig 1.3 Create camera pointer in CANVA  (19.11.2024 -Week 9)

Fig 1.4 Pointer Canvas  (19.11.2024 -Week 9)

Fig 1.5 Texture Type- Sprite 2D and UI   (19.11.2024 -Week 9)

Fig 1.6 Scripts   (19.11.2024 -Week 9)

Fig 1.7 Final Outcome   (19.11.2024 -Week 9)

Week 9/ Camera Point to Object V2

This week, we learned how to add a 3D model to our AR project. To start, I used Ready Player to create my own avatar. Next, I used Mixamo to animate my character by selecting different movements such as dancing, jumping, and waving. Afterward, we imported the animated character into Unity, made it interactive, and added buttons to trigger different actions.

Fig 1.8 My Avatar  (26.11.2024 -Week 10)

Fig 1.9 Body part Materials  (26.11.2024 -Week 10)

Fig 1.10 Rigger - Target body part (26.11.2024 -Week 10)

Fig 1.11 Character (26.11.2024 -Week 10)

Fig 1.12 Animation in Unity (26.11.2024 -Week 10)

Fig 1.13 Outcome (26.11.2024 -Week 10)

Week 10/ Change Models & Colors

This week, we learned how to create interactions where tapping on a model or button changes the model's shape (e.g., from a cube to a sphere or a capsule) or its color. This was achieved using scripting and configuring button settings.

Fig 1.14 Button settings  (3.12.2024 -Week 11)

Fig 1.15 Canvas + Button  (3.12.2024 -Week 11)

Fig 1.16 Model and Color Switcher scripts  (3.12.2024 -Week 11)

Fig 1.17  Outcome  (3.12.2024 -Week 11)

---

INSTRUCTIONS

 Task 3/ Project MVP Prototype 

Instructions:

• The objective of this task is for the students to test out the key functionality of their project. 
• The output may not necessarily be a finished visually designed project.
• The students will be gauge on their prototype functionality and their ability to
• creatively think on alternatives to achieve the desired outcome.
• Screen Design visual prototype (Figma)
• Functioning MVP of the App Experience

Submission 

• Upload to Google Drive and share the link
• Video presentation and walkthrough of your AR project prototype
• Explain your AR app and elaborate on what has been done and what yet to be done.
• Include also your asset building or collection progress
• Blog link to the project post

Prototype in Figma:

Before starting in Unity, I refined my prototype for the AR fashion app. I added detailed features allowing users to access and navigate through different pages when scanning clothes. Additionally, I expanded the virtual wardrobe by including various clothing options, enabling users to mix and match outfits seamlessly.

Fig 2.1 Prototype in Figma  (19.11.2024 -Week 9)

Fig 2.2 View prototype in Figma  (26.11.2024 -Week 10)

Prototype in Unity (MVP):

1. Show Button On Target

Fig 2.3 Show Button on Target Scripts  (26.11.2024 -Week 10)

2. Sizing Details Page 

Fig 2.4 Sizing Details Page   (26.11.2024 -Week 10)

Fig 2.5 LoadNextScene Scripts  (26.11.2024 -Week 10)

Fig 2.6 On Click Setting  (26.11.2024 -Week 10)

Fig 2.7 Outcome (26.11.2024 -Week 10)

3. Try On Features 

- Outline of the clothes 

- When user aligns their body with the white outline and it turns green if they "fit" the size

Fig 2.8 Prototype in Figma (26.11.2024 -Week 10)

Fig 2.9 Progress in Unity (26.11.2024 -Week 10)

Fig 2.10 Final Look - Screen overlay (26.11.2024 -Week 10)

Fig 2.11 Scripts for letting clothes outline turn green when detected image target (26.11.2024 -Week 10)

Fig 2.12 Outcome + Active back button(26.11.2024 -Week 10)

4. Virtual Wardrobe

Fig 2.13 Virtual Wardrobe in Unity (03.12.2024 -Week 11)

Fig 2.14 Setting for scroll View (03.12.2024 -Week 11)

Fig 2.15 Outcome(03.12.2024 -Week 11)

Fig 2.16 Change setting to unrestricted (03.12.2024 -Week 11)

Features Implemented

• Clothing Scan & Button Display: Users can scan a specific clothing item, and a button with the clothing name appears on the screen, acting as the starting point for further interactions.
• Sizing Details Page: Upon clicking the clothing name button, users are directed to a sizing details page. This page provides detailed size-related information tailored to the user.
• Try-On Scene: Users can try on the clothing virtually. When the selected item aligns perfectly with the user’s measurements, the outline of the clothing (e.g., a cropped tube top) turns green, indicating a good fit.
• Virtual Wardrobe: Successfully matched clothing items can be added to a virtual wardrobe, allowing users to manage their selections conveniently within the app.

Features Yet to Be Completed

• 3D Models of Clothes (360 degrees)
• Price and Material Information: 
• Payment Functionality
• Scanning Real Clothes
• Human Fit Detection

Final Work

Google Drive Link

Video Presentation: 

Fig 2.17 Final Presentation (10.12.2024 -Week 12)

---

REFLECTIONS

Working on the AR Clothing app has been a rewarding experience that taught me a lot about AR in unity. It is not a easy way to make things happen in the way I want, especially creating features like scanning clothes and virtual try-on. Seeing the try-on feature work, with the outline turning green for a good fit, was exciting and showed the potential of the app.

However, there are still challenges to overcome. Scanning real clothes instead of images is something I need to improve using tools like Vuforia. I also need to create 3D clothing models, add a 360-degree view, and include features like price, materials, payment, and real-time fit detection. These tasks are more complex than expected but have helped me understand the importance of proper planning and research.

This project taught me how to balance technical work with designing a better user experience. Moving forward, I’ll focus on completing the missing features and making the app smoother to use. Overall, this has been a great learning experience and has given me new skills to grow further.