Overview
For my final project in HCI 580 – Virtual Worlds and Environments, I created an augmented reality try-on feature for facial accessories, which is a culmination of everything I learned in Unity during my master’s program. This project tackles a major challenge in online shopping: helping buyers see how products will actually look on them, boosting confidence and reducing returns.
Watch the Project!
View my full presentation video and a demo of my project!
vision
Online retail is growing rapidly, but one of its biggest pain points remains the same: shoppers can’t always tell how a product will look or fit on them before purchasing.
My project aimed to bridge that gap, giving users a way to preview accessories instantly on their own face through AR, which will boost buyer confidence while reducing the likelihood of returns.
Benefits of incorporating AR
- Enhances buyer confidence and decision-making
- Reduces return rates
- Accessible try-ons: users can preview items offered anywhere instantly!
My Role
I was responsible for all aspects of this project, from concept to execution. As a beginner in Unity, I worked through trial and error to bring my ideas to life, designing the AR interactions, building the prototypes, and testing the UI flow.
Tools and Methods
Software
- Unity (AR Foundation, ARCore, AR Face Filter)
- Visual Studio Code (C# coding)
- Figma (UI Designs and Buttons)
- Sketchfab (Individual accessories)
Hardware
- Macbook Pro 13 inch
- Oneplus 9pro
My Process
Research and Inspiration
This project was inspired by a personal online shopping experience. I purchased earrings that looked perfect in photos, but didn’t suit my face shape or skin tone once they arrived. This mismatch highlights a common issue in e-commerce: shoppers can’t preview how products will look on them, which leads to disappointment, higher return rates, and restrictions in stores where trying on items isn’t allowed for hygiene reasons.
I saw this as an opportunity to explore AR as a solution, which can help users preview accessories in real time to boost confidence, reduce returns, and improve decision-making.
Prototyping in Unity
Using Unity’s AR Foundation face filter as a base, I built a prototype that allowed accessories to appear on the user’s face.
As a beginner, I focused on learning how to attach and align 3D objects, create functional buttons, and experiment with interactions, like toggling accessories on and off.
UI Design in Figma
To make the prototype feel like a real app, I designed a simple mobile interface of an online shopping platform on Figma.
I decided to add the "Try with AR!" button on each of the product photos so customers can easily choose which accessory they would want to try.
Future Development Plans
Moving forward, I plan to conduct some usability testing to gather feedback for improvements. I would also like to expand to other accessories, such as necklaces or even other apparel that is not just for the face. Additionally, I would like to explore cross-platform accessibility, such as WebAR, so users can test out the product on both mobile devices and desktop computers.
CHallenges & Limitations
As a beginner in Unity, I ran into several technical roadblocks that required persistence and trial-and-error to solve. Getting accessory prefabs to display correctly was one of the earliest hurdles, along with making the color selection buttons function the way I intended. The “mirror” button for the hair clips was especially challenging; my initial approach of writing a custom script didn’t work reliably, so I eventually solved it by creating separate prefabs for the mirrored versions. I also had difficulty adjusting the Figma UI so it would stretch properly on mobile screens. These issues often took hours or days to resolve, but each challenge helped me build new problem-solving skills.
Reflection
Looking back, I’m really proud of how far I came with this project. Before this course, I had no experience coding in C#, and this project required me to write and debug scripts extensively to make the AR try-on feature work. Starting from a beginner level, I built a fully functioning AR experience from scratch, learned to debug scripts using Android Logcat, designed UI in Figma that felt like a real app, and managed my own project timeline.
What really stuck with me was learning the value of persistence. Some problems, like getting the mirrored hair clips to work, took days to figure out, but pushing through each challenge felt incredibly rewarding. This project showed me that even as a beginner in coding, I could create something meaningful and polished through trial, error, and patience.
Credits to the Sketchfab Assets used
Earrings
- "Earring" (https://skfb.ly/otsTI) by Marina_Fom is licensed under Creative Commons Attribution-NonCommercial (http://creativecommons.org/licenses/by-nc/4.0/).
Nose Ring
- "Pointy Nose Ring" (https://skfb.ly/opsLW) by Tiko is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
Hair Clip
- "hair clip heart" (https://skfb.ly/ovVQF) by anashumm is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
Credits:
Created with an image by Thapana_Studio - "Men use their credit cards through mobile internet banking apps to shop online and digital payment ideas."