Experiential Design /Task 2: Experience Design Project Proposal

Start from 21.10.2024

22.10.2024 -5.11.2024 /Week 5- Week 7
Kong Cai Yi / 0363862 
Experiential Design  / Bachelor of Design (Hons) in Creative Media 
Task 2: Project Proposal

---

INDEX

1. Lectures

2. Task 2/ Project Proposal

3. Feedback

4. Reflections

---

LECTURES

Week 5/ Experience Design Proposal & AR design Tips

In this week's tutorial, we learned how to animate an object over an image and implement functionality that allows the object to stop or move when clicked.

Animate

• Click on the object you want to animate, go to the animation tab, and add a new animation clip. 
• Click record and animate your clip. Stop recording.
• Create an empty animation tab for your object
• Go to your PLAY button, go to on click and select ANIMATOR PLAY, put in the name of the animation tab with the frames
• Go to your stop button, on click, select ANIMATOR PLAY and type in the name of the empty animations tab

Fig 1.1 Create a sphere shape above image (17.10.2024 - Week 4)

Fig 1.2 Animation Toggle scripts  (17.10.2024 - Week 4)

Fig 1.3 Animated sphere (17.10.2024 - Week 4)

Tap to toggle
We have created one more new scripts which is similar to animation toggle scripts but add an extra scripts to allow tap to toggle action works:

public void OnMouseDown(){
ToggleAnimation();

Fig 1.4 Tap to toggle scripts  (17.10.2024 - Week 4)

Fig 1.5 Outcome  (17.10.2024 - Week 4)

Video Toggle

Before I began implementing the feature to pause my video on a mouse click, I decided to switch the video from my previous landscape scenario to a new one featuring a cat in motion.

Fig 1.6 Video Toggle  (17.10.2024 - Week 4)

Fig 1.7 Video plane (17.10.2024 - Week 4)

Fig 1.8 Final Outcome(22.10.2024 - Week 5)

Week 6/ User Interactions
This week, we explored creating a Virtual Gallery (VGallery) using cube elements, where clicking on an image target reveals a virtual room. Before beginning, we installed ProBuilder, a Unity tool that allows us to construct and customize 3D shapes and spaces with precision. 

Fig 1.9 Install Probuilder (29.10.2024 - Week 6)

Fig 1.10 Probuilder (29.10.2024 - Week 6)

Fig 1.11 MyRoom (29.10.2024 - Week 6) 

We can customized the size of cube using shape properties to adjust it thickness, position and sizing. 

Fig 1.12 Adjust Size (29.10.2024 - Week 6) 

Fig 1.13 Change color by adding materials (29.10.2024 - Week 6) 

Before starting, I downloaded IRIUN Webcam, which allowed me to connect my phone as a scanner. However, I later discovered that I could adjust the web settings to select iPhone directly, rather than using an external webcam option. 

Fig 1.14 IRIUN Webcam (29.10.2024 - Week 6) 

Fig 1.15 Insert image to Myroom (29.10.2024 - Week 6) 

Fig 1.16 Add Canvas- world space (29.10.2024 - Week 6) 

Fig 1.17 Outcome (29.10.2024 - Week 6) 

Week 7/Online Class

This week, Mr. Razif briefed us on Task 2, provided mockup examples, and encouraged us to use Figma for creating mockups, along with tips on setting up an AR camera. He also introduced key AR design guidelines, covering environment, experience size, movement, and realism. We noted that Task 2 is due this Friday.

ARCore is a platform for building AR apps. It harnesses the power of Android phones using these key technologies:

• motion tracking
• environmental understanding
• light estimation

Fig 1.18 Week 7 class (29.10.2024 - Week 6) 

---

INSTRUCTIONS

 Task 2/ Experience Design Project Proposal 

Instructions: 

• Develop a detailed proposal for your AR app, focusing on user experience enhancements, functionality, and unique value. 
• Proposal Components:Project Overview. 
• Define the problem (inconvenience of price tags and fitting rooms) and project goals (convenience, personalized sizing). 
• Research:Review similar AR solutions and identify gaps. 
• Define target audience, personas, and map the user journey. 
• Solution Details:Describe key features. 
• Visuals:Include sketches and high-fidelity mockups to show the user flow and AR features. 
• Creative Directions:Specify theme, color palette, typography, and any icons or mood board. 

Submission Requirements: 

• PDF of Proposal Document: A professional, complete proposal. 
• Video Presentation: Briefly present your project idea, flow, and expected impact. 
• Reflective E-Portfolio Post: Summarize your Task 2 progress and insights. 

3 ideas 

I came up with 3 ideas and documented my four ideas in a Google document, each followed by a visual image. For each idea, I included the problem, solution, target audience, process, as well as the pros and cons. 

After consulting with my instructor, I decided to choose an AR fashion details app for my final project. I believe this idea has great potential for growth and room for further development. 

 

Fig 2.1 Task 1 Ideation Document (16.10.2024 - Week 4) 

Introduction of AR App

Project Title:

QuickFit Shopper

Project Description:

The “QuickFit Shopper” is a mobile app with AR capabilities that aims to simplify the shopping experience by providing instant, essential information about clothing items. By scanning items with their phone, users can access price, available sizes, material details, and washing instructions. The app also offers personalized size recommendations by adding a feature that outlines the user's body, allowing them to see how clothes would fit their size and add to a virtual wardrobe. 

Problem Statement: 

Shoppers often face the inconvenience of locating tags to check clothing prices and sizes, and trying on multiple items to find the right fit is time-consuming. This project addresses these challenges by streamlining information access and offering personalized, time-saving recommendations. 

Project Goals: 

1. Provide a seamless, personalized shopping experience. 
2. Save users time by minimizing the need to try on clothes physically. 
3. Offer accurate, on-the-spot size and fit recommendations using AR​​.

Research

1.Competitive Analysis:

I have done some research related to AR fashion Retails app, and I found out most of the app doesn't really provide a feature which can scan the clothes and automatically come out with sizing, prices and all the details. So I believe the app that I want to launched is unique enough as long as retailer willing to update all the info consistently

WEARFITS: 

This AI and AR platform lets users try on virtual clothing, visualize heatmaps for size fitting, and get personalized size recommendations by measuring body dimensions through a smartphone. It also integrates with online stores, enhancing the shopping experience and minimizing returns​Wearfits

Fig 2.2 Wearfits (29.10.2024 - Week 5) 

ZARA:

• AR Feature: Zara has tested an AR feature that allows users to see models wearing outfits in-store. It overlays models onto the screen when users scan specific store displays.https://www.instagram.com/p/Bhd-U6yA99-/?utm_source=ig_embed&ig_rid=3dd5e19e-b285-4684-aa8d-f113e540991a 

• Gap: Limited to showing outfits on models rather than providing personalized size recommendations or item details. It lacks a direct user-focused fitting experience.

ASOS – Virtual Catwalk:

• AR Feature: ASOS introduced a “Virtual Catwalk” feature in their app, enabling users to view 3D models walking in the selected outfits.

Fig 2.3 ASOS (29.10.2024 - Week 5) 

• Gap: Provides visualization of fit on models but does not offer interactive, body-specific fitting or precise size recommendations. Users can’t measure themselves or see how the clothes might fit their own body proportions.

Conclusion:

• Most competitors require scanning tags, specific displays, or mirrors to access AR information. QuickFit Shopper’s direct clothing scanning feature allows for more seamless, immediate access to details, enhancing user convenience. 

• Few competitors offer a full suite of product details (price, size availability, fabric, and washing instructions) instantly through AR. By bundling these features into one scan, QuickFit Shopper could become a go-to for instant, in-depth clothing insights.

2.Target Audience:

QuickFit Shopper app target audience:

• Young Professionals (25-35): Tech-savvy and time-conscious, seeking quick access to clothing details and fit recommendations to streamline shopping.

• Fashion-Conscious Youth (18-25): Trend-driven and social, looking for interactive shopping with size guidance and easy social sharing. 

• Busy Parents (30-45): Practical and efficiency-focused, needing fast, accurate size and care details for themselves and their family. 

3. User Personas:

I have developed three user personas that would greatly benefit from using this app. The first persona is busy workers who lack the time to shop and try on clothes during their lunch breaks. The second is stay-at-home moms who struggle to find time to try on clothes, often being distracted by their children while doing so.

Click Here to View User Persona 

Fig 2.4 User Personas (4.11.2024 - Week 6)

4. User Journey Map:

I created a journey map for a traditional fashion retail app, highlighting key touchpoints, pain points, and gain points. I then compared it to the journey map for my AR fashion app, which gave me a deeper understanding of users' thoughts, feelings, and pain points—insights that have been invaluable in shaping my proposed solutions.

Download & Onboarding

• Touch Point: App store download, account creation, tutorial screens.
• Pain Point: Lengthy sign-up processes and overwhelming tutorials.
• Gain Point: Minimalistic onboarding that quickly introduces AR features and clothing details preview

Browsing Catalog

• Touch Point: Browsing through categories, filtering options, product descriptions.
• Pain Point: Time-consuming search for specific items, vague product details, lack of visual feedback on sizing.
• Gain Point: Providing navigation, detailed descriptions, clear filters, and personalized size/fit recommendations make shopping faster and more enjoyable.

Product Details & Try-On

• Touch Point: Product page with information on price, sizes, materials, and user reviews.
• Pain Point: Need to navigate multiple screens for complete details, inconsistency in sizing, lack of personalized fit visualization.
• Gain Point: AR fitting and personalized size recommendations eliminate guesswork and improve buying confidence.

Checkout

• Touch Point: Add to cart, choose delivery options, payment.
• Pain Point: Extra costs (e.g., shipping) appear too late; confusing payment options or difficult returns.
• Gain Point: Transparent pricing, easy checkout process, and clear return policies enhance trust and purchase satisfaction.

Fig 2.5 User Journey Map for AR fashion app (4.11.2024 - Week 6)

Proposed Solution

Here’s a user journey map for the proposed solution, QuickFit Shopper, focusing on how the app’s features enhance each stage of the shopping experience:

Features:

• Product Scanning: Users can scan clothing tags to view detailed information instantly (price, size availability, fabric details, and washing instructions).
• AR Measurement Tool: Users can measure their bust, waist, and hip sizes through AR, enhancing size accuracy.
• Virtual Try-On: A feature that outlines the user's body and shows how clothing would fit their proportions.
• Virtual Wardrobe Try-On: Let users virtually "try on" different clothing items from a virtual wardrobe. Once they scan an item in-store, they could save it in their virtual closet to mix and match outfits later.
• Virtual Fashion Store: Accessible from home, allowing users to browse and try on items without visiting a store.

Fig 2.6 Proposed Solution (4.11.2024 - Week 6)

Visuals and Mockups

Content:

1. Onboarding
2. Scanning
3. Fitting Assistance 
4. Virtual Wardrobe 
5. Recommendation
6. Check out / save

Fig 2.7 Sketch (4.11.2024 - Week 6)

Design in Figma:

Fig 2.8 Figma mock ups  (4.11.2024 - Week 6)

Creative Directions

1.Theme Colour
2. Typography
3. Iconography
4. Moodboard & References

Fig 2.9 Creative Direction (4.11.2024 - Week 6)

Fig 2.10 Moodboard (4.11.2024 - Week 6)

Submission:

Experience Design Project Proposal Document

Fig 3.2 Task 2 proposal (9.11.2024 - Week 7)

Final Presentation Slides:

Fig 3.3 Final Presentation Slides (9.11.2024 - Week 7)

Final Video Presentation:

Fig 3.4 Final Video Presentation  (9.11.2024 - Week 7)

---

REFLECTIONS

This task has helped me gain a deeper understanding of my AR app by conducting extensive competitor research, building user personas, mapping out user journeys, and exploring creative directions. I’m grateful for this stage because it made me realize how everything connects: understanding user pain points is essential before proposing solutions, and only then can I move forward with app sketches and mockups. Through Mr. Razif’s online class, where he shared references and senior projects, I’ve learned a lot about designing an AR app. This guidance has made me feel more confident and well-informed as I create mockups.

Over the last three tutorial sessions, I've also become much more familiar with Unity. I now understand more features, like creating a virtual gallery (VGallery) and adding tap-to-toggle videos, which expand the possibilities for my app.