Fig. 1.1 AR Experience with Video Playback (YouTube).
In Week 5, we learned how to integrate video playback into an AR experience using Unity and Vuforia. The key feature introduced was the ability to trigger a video when the AR camera detects a specific image target. Key Steps Covered:
Video Format: The video must be in .mp4 format.
Importing the Video: The video file should be imported into the Assets folder in Unity.
Setting Up the Video Player: A Video Player component is added to a GameObject (usually a plane) that will serve as the screen for the video.
Assigning the Video Clip: The imported mp4 file is then linked to the Video Player.
Target Detection: Using Vuforia’s ImageTarget, the video will begin playback as soon as the target image is scanned.
💜 Self-Reflection: This week’s session was a great step forward in enhancing interactivity within AR experiences. Learning how to embed and trigger a video using Unity helped me understand how multimedia can make AR more engaging and informative. It was exciting to see how scanning a simple image could activate a video, opening up possibilities for storytelling, education, and even advertising. Overall, it made me realize how important visual content is in creating immersive and meaningful AR interactions.
Week 6
Fig. 1.2AR User Interface & Screen Navigation in Unity (YouTube).
In Week 6, we focused on how to create basic user interface (UI) elements in Unity and implement screen navigation, which is a crucial feature for creating interactive AR experiences. This session builds on previous lessons by allowing users to move between different UI panels or screens using buttons.
💜 Self-Reflection: This week’s lesson gave me a solid foundation in building and navigating user interfaces within Unity, which is essential for guiding users through an AR experience. I found it satisfying to see how simple it is to switch between panels using button clicks, and it helped me understand how to structure interactive flows. It also made me think more about how UI design affects user experience in AR, especially when information needs to be clear, accessible, and easy to interact with.
2. INSTRUCTIONS ⊹ ࣪ ˖₊˚⋆˙⟡
Fig. 2.1 Module Information Booklet - Experiential Design.
GreenLens focuses on seeing the world through an eco-conscious "lens" using AR. This AR experience is designed to simplify and improve household recycling by helping users sort waste items correctly using visual feedback.
Problem Statement
Recycling can be confusing for many people, no matter their age or background. Unclear labels, differing local guidelines, and a lack of clear instructions often leave individuals unsure of what goes where, leading to recyclables being thrown into the wrong bins. This not only contaminates recycling streams but also reduces the effectiveness of recycling efforts. GreenLens - AR Recycling Sorter seeks to bridge this gap by providing a simple, engaging way for users to get real-time recycling guidance, making it easier to do the right thing for the environment.
Aim & Objectives
To enable users to scan household items and receive instant AR guidance on the correct recycling bin.
To educate users on item-specific recycling practices through interactive visual cues.
To promote long-term sustainable habits by making recycling simple, engaging, and accessible.
Week 3
Project Research
Product Service
GreenLens GreenLens - AR Recycling Sorter is an augmented reality (AR) mobile application designed to make recycling intuitive, educational, and engaging. By using AR technology, the app provides real-time visual guidance for sorting household waste correctly. Users can scan items using their mobile device to receive immediate feedback on the correct recycling bin (e.g., plastic, paper, metal), along with practical tips like "rinse before recycling."
Key Features of GreenLens - AR Recycling Sorter
Real-Time AR Guidance: Instantly identifies scanned household items and provides visual AR overlays indicating the correct recycling bin (e.g., plastic, paper, metal). Showing a recycle bins color and classified related info (e.g., which classified items that might corresponding to which color of the bins)
Interactive Recycling Tips: Offers actionable tips such as “Rinse before recycling” or “Remove caps” to ensure proper waste sorting.
Educational Content for All Ages: Provides recycling facts and educational prompts tailored to parents, young adults, students, and the general public.
Gamified Experience: Includes badges and rewards for consistent recycling habits, encouraging repeated app usage and habit formation.
AR Bin Locator: Users can select their location to find the nearest recycling bin. After scanning an item, the AR will show the correct bin type and guide them to the nearest suitable bin for disposal.
Target Audience
GreenLens targets four key user segments: eco-conscious young adults, parents with children, teachers with students, and the general public. It aims to foster sustainable habits by transforming recycling into an interactive and informative experience, reducing recycling errors and promoting environmental awareness.
Primary Target Audience:
Eco-Conscious Young Adults (Ages 20–30)
Profile: University students or young professionals in urban areas.
Needs: Quick, reliable recycling help tailored to a busy lifestyle.
Motivation: Want to live sustainably and reduce waste, often involved in environmental activism or minimalism.
Behavior: Tech-savvy, active on social media, familiar with AR and gamification features.
Secondary Target Audience:
Parents with Children (Ages 30–45)
Profile: Parents who want to teach their children good recycling habits at home.
Needs: Fun and educational tools to teach kids about recycling at home.
Motivation: Want to raise environmentally responsible children and include them in daily recycling tasks.
Behavior: Use educational apps, family-focused tools, and mobile games; value interactivity and ease of use.
Teachers with Students (Any Level)
Profile: Educators teaching environmental topics, leading green clubs, or organizing sustainability campaigns.
Needs: Interactive, visual tools to make environmental education engaging and memorable.
Motivation: Want to promote hands-on learning and encourage eco-responsibility in the classroom.
Behavior: Use digital learning tools, value educational impact and alignment with school curriculum.
Tertiary Target Audience:
General Public (Ages 18–60+)
Profile: Everyday individuals, including older adults and working people.
Needs: Straightforward, non-technical instructions for sorting household waste.
Motivation: Want to contribute to environmental efforts but may be confused by recycling symbols or regional rules.
Behavior: Use smartphones for basic tasks; prefer simple UI and minimal learning curve.
User Personas
Fig. 3.1 User Personas.
User Empathy Map
Fig. 3.2 User Empathy Map.
Initial User Journey Map and Table
Fig. 3.3 Initial User Journey Map with Pain Points.
Fig. 3.4 Initial User Journey Table and Paint Points Summary.
Week 4
Proposed Solutions
Revamp User Journey Map and Table
Fig. 3.5 Revamp User Journey Map and Table with Gaint Points.
About Recycling in Malaysia
Through our research, we found that unlike many countries that follow internationally standardized colors for waste sorting (e.g., blue for paper, green for glass, yellow for plastic), Malaysia adopts its own localized color coding system for recycling bins.
Fig. 3.6 Colored Recycling Bins.
According to local sources such as Mui Fatt and guidelines from the Waste Management Association of Malaysia (WMAM), the commonly used recycling bin colors are:
🔵 Blue – Paper
🟤 Brown – Glass
🟠 Orange – Plastic and Metal
⚫ Black / Grey – General Waste
This variation shows that we can’t rely on colors alone. So in our project, we emphasize reading labels on bins to sort waste correctly.
Week 5-6
Visualization
Mood Board
To establish a consistent look and feel, we created a mood board that reflects our app’s tone. Our visual references include AR UI examples, eco-themed illustrations, and a clean interface layout to guide our design direction. The goal is to make recycling approachable, educational, and even fun.
Our color palette includes both brand and functional colors. Brand colors like light green, dark green and black, while green, white, and light yellow express sustainability and freshness. We also include recycling bin colors – blue, orange, brown, and black – to match Malaysia’s real-life bins, helping users connect the app with real-world actions.
For typography, we use Poppins, a clean and modern sans-serif font. We apply different font weights to establish hierarchy, from bold titles to readable body text. This ensures clarity on all screens, especially on mobile devices.
Fig. 3.7 Mood Board of GreenLens.
We used a 5-column auto-width grid system based on the iPhone 14 Pro Max frame with a 16-pixel gutter to ensure consistent spacing and mobile-friendly alignment across the app UI.
Fig. 3.10 GreenLens AR App Wireframes and Mockups (Figma).
Loading and Launch Pages: The app opens with a clean loading screen featuring our brand icon. Then, users are guided through three launch screens — Scan & Sort, Learn and Recycle, and Find Nearby Bins — which briefly explain the core features of the app in a friendly and simple way.
Home Page: On the home screen, users can see how many coins they’ve earned, how many items they’ve recycled, and how much CO₂ they’ve saved. This gives a quick sense of personal environmental impact.
Scan Interface: Users can scan an item, and our AR system identifies the material and guides them to the correct bin with visuals and instructions.”
Recycling Tips Page: After scanning, the app shows item-specific recycling tips — like whether to remove labels, flatten bottles, or which bin color to use — ensuring that users recycle correctly.
Bin Finder Page: Bin Finder uses location services to help users find the nearest recycling bins, matched by the user’s location.
Recycling Summary Page: Once recycling is completed, users are shown a summary screen with stats: total items recycled, coins earned, and CO₂ saved — turning eco-actions into trackable progress.
Game Pages: In the gamified mode, users are instructed to throw virtual waste into the correct bins. If they make a mistake, they get feedback like ‘Oops! Wrong bin.’ If they get it right, they’re rewarded with a cheerful animation saying ‘You sorted it right!’ — encouraging continuous engagement.
Fig. 3.12 Task 2 Presentation Video by Yan Zhi Xuan and Tan Sin Mi. (YouTube/Google Drive).
*** Please select 1080p (HD) for better quality.
4. FEEDBACK ⊹ ࣪ ˖₊˚⋆˙⟡
Fig. 4.1Online Consultations with Mr. Razif.
Week 2
We focused on our proposal. If we are working as a group, we need to come up with six ideas first. Once you approve them, we will choose one idea to continue developing — including creating user persona, user journey map and etc. The six initial ideas will be submitted in a document, and the final proposal for the chosen idea will be prepared as a Canva slide presentation.
Week 3
After discussing with Mr. Razif, he approved our target audience, allowing us to proceed with developing the user personas based on either imagined users or actual interview data. He also emphasized the need to add more detailed features to the document, ensuring a comprehensive breakdown of the AR Recycling Sorter’s functionalities. Additionally, for the user journey map, he suggested we include proposed solutions to address identified pain points, aligning them with the AR experience to provide a more complete and impactful user flow.
Week 4
Mr. Razif provided constructive feedback, noting that our key features are on the right track, and we can proceed as planned. For the user persona, we need to identify the primary and secondary target audiences, focusing on their specific needs and pain points. The empathy map and user journey map were also approved, with no major adjustments required. Regarding the Canva slides, he suggested increasing font size and prioritizing main points, removing unnecessary content to maintain clarity. With these adjustments, we are now ready to proceed with the mockup development, bringing the AR Recycling Sorter to life visually.
Week 5
Mr. Razif mentioned that the first version of the logo needs revision — some text should be enlarged, and additional spacing is needed to avoid crowding, making the layout more spacious and user-friendly.
Week 6
Mr. Razif has approved the new brand logo. As for the visual elements on the game page, he said there's no need to overly decorate them because the design is meant to interact with real-world spaces. He also suggested adding a "Pause Game" icon and a gameplay demonstration.
5. REFLECTIONS /ᐠ - ˕ •マ
This task was the turning point where things got more focused and creative. After immersing myself in trend research, it was time to ideate and propose my own experience design concept. We felt a mix of excitement and pressure because we wanted our idea to be both innovative and practical. We began by brainstorming topics and eventually settled on a concept that connected with our personal values and design interests.
Crafting the proposal required me to think deeply from the user’s perspective. I had to ask myself: What is the user's pain point? What’s lacking in the current experience? How can our idea make it better? This task also made me realize the importance of competitor analysis. By comparing existing products or services, I could better define what made my idea unique.
We spent a lot of time sketching out wireframes, drafting mock-ups, and thinking about how users would interact with my design. It wasn’t just about having a great idea—it was about presenting it clearly and persuasively, supported by rationale, visuals, and structure. We also learned that proposals need to strike a balance between creativity and feasibility. This task sharpened my ability to justify decisions, organize thoughts, and bridge the gap between abstract concepts and real-world solutions.
⭐ 6/2/2024 - 19/3/2024 (Week 1 - Week 7) 🎀 Yan Zhi Xuan | 0369425 💜 Design Principles | Bachelor of Design (Hons) in Creative Media | Taylor's University 📚 Final Compilation TABLE OF CONTENTS 1. Links to Each Task 2. Submissions / Final Design 3. Final Reflection 1. LINKS TO EACH TASK Design Principles GCD60804 - Task 1: Exploration Design Principles GCD60804 - Task 2: Visual Analysis Design Principles GCD60804 - Task 3: Design Return to the Table of Contents 2. SUBMISSIONS / FINAL DESIGN Fig. 2.1 Final Design. Yan Zhi Xuan_Preserve the Blue_Task 3 Return to the Table of Contents 3. FINAL REFLECTION Respond to the questions below: • What have I learnt in this module? • What did I enjoy the most? • What did I not enjoy the most? • What have I learnt about myself through this module? • What has changed and what has not in my learning journey? • What could be improved in this module...
Comments
Post a Comment