Design Exploration - Final Compilation & Reflection

22/09/2025 -  ( Week 1 - Week 14 )

Ho Winnie / 0364866 

Design Exploration / Bachelor's of Design Honors In Creative Media 

Final Compilation Task 1-4

---

1. Task 1 - Project Proposal 

2. Task 2 - Project Development 

3. Task 3 - Final Project Showcase

4. Feedback 

5. Reflection

---

1. Task 1 - Project Proposal 

Requirements : 

Once you have decided the direction of your project, you will prepare a proposal brief explaining the reasons for your project and how you intend to carry it out. This area will consist of proposed research areas, data gathering methods and technical executions for your project. Be realistic with your proposal, as you have limited amount of time, resources and energy to do so but at the same time allowing you to exercise your creative skills beyond your comfort zone.

Progression : 

In Week 1, we were asked to research the current industry outlook and compare it with our own portfolio. The purpose was to identify whether our current skills align with what employers are looking for in the job market.

To begin, I focused on UI/UX design roles, looking into 10 companies that are currently hiring for internship and full-time positions. I analyzed job listings from platforms such as LinkedIn and JobStreet, then organized the data into a visual comparison chart that highlights each company’s job emphasis, technical skills, design tools, soft skills, and platforms used.

This analysis helped me better understand the core skills expected in the industry—such as proficiency in Figma, user-centered design, usability testing, and collaboration within agile teams. It also gave me insight into gaps I can work on, especially in motion design, prototyping, and accessibility.

 

Common Patterns & Insights :

After comparing 10 companies hiring for UI/UX design interns and full-time roles, I organized the key trends into six main categories: Core Job Emphasis, Technical Skills, Design Tools, Soft Skills, Platform Coverage, and Design Systems.

From this analysis, several clear patterns emerged:

• User-focused design is a universal requirement — nearly every listing highlights creating intuitive, visually appealing, and user-friendly experiences across platforms.

• UI/UX fundamentals such as wireframing, prototyping, and usability testing are consistently expected, even in creative or hybrid roles.

• Figma stands out as the industry-standard tool, often paired with Adobe Suite (Photoshop, Illustrator, After Effects) for visual and motion work.

• Collaboration and communication skills are repeatedly mentioned, especially the ability to work with product managers, developers, and marketers.

• Web and mobile platforms dominate the scope of work, with WordPress and responsive design also appearing frequently.

• Most roles emphasize design systems and brand consistency, showing how important it is to maintain visual identity across different products and channels.

These findings gave me a clearer view of what the current market expects from UI/UX designers and helped me identify skill areas I’m strong in (such as Figma, prototyping, and branding) and areas I can further develop — like motion design, data-driven usability testing, and accessibility standards.

Portfolio Arrangement : 

After completing my industry outlook research, I began organizing my portfolio to reflect both my existing strengths and areas I plan to grow in. I categorized my works into key design areas — App Design, Website Design, Typography & Type Design, Digital Illustration, Branding, Visual Communication, and 3D Modelling.

This arrangement helped me visualize how my projects span across different disciplines while revealing where my strongest foundation lies — particularly in digital and interactive design. It also showed where I can expand further, such as integrating more motion and user experience-focused projects to align with current industry trends.

Exploring AR as My Design Direction :

After reviewing my portfolio, I realized that many of my works already explore interactivity, storytelling, and user engagement, which naturally align with augmented reality (AR). This inspired me to dive deeper into the field of AR — combining design, technology, and user experience in a more immersive way.

With that in mind, I proposed a series of AR-themed projects as my initial ideas, focusing on how digital interaction can enhance cultural appreciation, public engagement, and learning experiences. This exploration marks the start of my journey toward developing stronger UX-driven AR designs that go beyond visuals and into meaningful user interaction.Building on my growing interest in immersive design, I proposed three AR-focused project ideas that explore different ways augmented reality can enhance everyday experiences:

1. Project 1 – MBTI x Malaysian Mamak Food Webapp + AR Card
   A playful microsite that combines personality quizzes with Malaysian food culture, where users can scan an AR card to reveal their “food personality.”

2. Project 2 – AR Pop-Up Decoration in Starhill + Shopping Bag AR
   An AR installation concept for Starhill’s shopping district, featuring pop-up cultural decorations and an interactive shopping bag filter for visitors to use during festivals.

3. Project 3 – CulturaLens: Enhancing Muzium Negara’s Experience Through Interactive AR
   A cultural exploration project integrating AR body-tracking filters and an interactive AR map to bring Malaysia’s diverse heritage to life inside the National Museum.

Among the three, Project 3 stood out as the most meaningful and feasible — combining cultural preservation with user-centered design and aligning closely with my interest in AR storytelling and experience design. Mr Asrizal also highlighted that since I already did a research on Muzium Negara before for my Minor Project, he thinks that I can continue working into it. 

Final Outcome : 

Design Exploration Task 1 by Winnie Ho

2. Task 2 - Project Development 

Requirements : 

You have 9 weeks to work on your project by developing your proposed ideas into an actual outcome through independent research for solutions and peer feedbacks to help you gain audience insights about the project from the development process to final output of designs i.e. fully functional UIX and ready to publish designs or broadcast time-based media like short film or animations. Remember, constant updates and feedbacks will help you build better outcome."

Progression -

Part 1 : Determining Mood Board

The foundation of each filter lies in understanding the cultural symbols, visual motifs, and emotional tone that define the identity of each community. Before sketching or moving into digital execution, I began by identifying the essential elements that would appear in each filter and curating moodboards to guide the overall aesthetic direction.

This stage ensures that every filter—Malay, Chinese, Indian, and Indigenous—feels authentic, recognisable, and respectful, while still maintaining a cohesive style across the full collection.

A. Chinese Filter 

The Chinese AR filter focuses on capturing the energy, festivity, and cultural richness of Chinese celebrations by combining dynamic and symbolic visual elements. Key motifs such as hanging and floating lanterns, a folded fan as the central backdrop, a lively lion dance figure, zongzi dumplings, and soft plum blossom sparkles work together to reflect the rhythm and vibrancy of Chinese tradition. Guided by a moodboard of red, gold, and peach tones, the design draws inspiration from Lunar New Year festivities, incorporating classic icons like paper fans, lanterns, and stylised clouds. The result is a bright and sparkling ambience that expresses joy, prosperity, and cultural celebration.

B. Malay Filter 

The Malay AR filter is inspired by the warmth and festivity of Hari Raya, traditional crafts, and meaningful cultural symbols. Key elements such as the crescent moon and star, ketupat, a pottery-inspired bowl backdrop, wayang kulit, kuih desserts, and soft flowing clouds come together to express the gentleness and hospitality of Malay culture. Guided by a moodboard of soft neutrals and festive golds, Islamic geometric patterns, Raya lanterns, and night-sky ambience, the overall design uses organic shapes and warm gradients to evoke togetherness, celebration, and cultural harmony.

C. Indian Filter 

The Indian AR filter draws inspiration from classical dance, intricate traditional motifs, and symbols of light that define many Indian festivals. The selected elements—a glowing diya, mandala backdrop, Bharatanatyam dancer, kuthu vilakku, laddoo sweets, and floating rangoli shapes—work together to express the vibrancy, spirituality, and celebratory nature of Indian culture. Guided by a moodboard featuring purple, gold, and warm orange tones, as well as references to mandala and rangoli patterns and Diwali’s luminous atmosphere, the filter captures both the elegance of classical movement and the festive richness of Indian heritage.

D. Indigenous Filter 

The Indigenous AR filter celebrates the deep connection between culture and nature, drawing inspiration from the heritage of East Malaysia’s communities. Key elements such as a totem pole inspired by Orang Asal carvings, the rhinoceros hornbill, bamboo backdrops, the Rafflesia flower, tribal arrows, and various natural textures come together to create a strong sense of place and identity. Guided by a moodboard of earthy greens and browns, bamboo and forest ambience, tribal geometric patterns, and motifs drawn from hornbill feathers, the filter embraces a raw, organic atmosphere that reflects the authenticity and spirit of Indigenous culture.

Part 2: Sketching the Overall Layout – Creating a Unified Backbone for All AR Filters

After determining the cultural elements and finalising the moodboards, the next stage of development was to map out the overall layout structure for the AR filters. Although each filter represents a different cultural identity, I wanted the entire collection to feel stylistically consistent and visually related. This meant designing a shared backbone layout that could adapt to the unique symbols of each culture without losing coherence.

This step is crucial because it ensures the final AR collection feels like a cohesive set rather than four independent artworks.

1. Establishing the Core Layout Structure

All four filters follow a similar composition system built around three main layers:

A. Central Anchor (Backbone Structure)

Each filter features one major cultural icon placed directly behind the human silhouette.
This creates a strong vertical axis and acts as the “identity pillar” for that culture.

Examples:

• Malay → Bowl / vessel silhouette

• Chinese → Folded fan

• Indian → Mandala

• Indigenous → Totem pole

This central anchor immediately communicates the cultural theme and visually stabilises the entire composition.

B. Supporting Side Elements (Left & Right)

Once the backbone is established, secondary elements are arranged symmetrically on both sides.
These side elements usually represent food, handicrafts, or cultural performance icons.

Examples:

• Malay → Kuih, Wayang Kulit

• Chinese → Zongzi, Lion Dance

• Indian → Laddoo, Brass Lamp

• Indigenous → Rafflesia, Bamboo, Tribal Arrow

The symmetrical placement helps maintain balance while still allowing each culture to shine through its unique artefacts.

C. Foreground Motion & Atmosphere

Soft, flowing elements like clouds, smoke, petals, or sparkles are added to create depth and movement.
These elements:

• Tie the composition together

• Give the AR effect a sense of animation

• Keep the overall visual tone cohesive across all four filters

By maintaining consistency in stroke style and placement, the atmosphere feels unified even though the cultural motifs differ.

Part 3: Creating the Visual Elements for Each AR Filter

After defining the overall layout and establishing a consistent backbone structure, the next phase of development focused on designing the individual elements that would populate each filter. This step is where cultural research, moodboards, and sketch foundations come together—translating symbolic references into clear, stylised visuals that can work harmoniously in AR.

To ensure each AR filter authentically represents its respective culture, I developed a full library of modular visual elements for Chinese, Indian, Malay, and Indigenous themes. These assets include cultural objects, food items, performance icons, festive motifs, and atmospheric details. For the Chinese filter, elements such as the lion dance figure, lanterns, paper fan, plum blossom, and zongzi were created. 

The Indian filter features a mandala, diya lamp, Bharatanatyam dancer, laddoo sweets, and floral motifs. The Malay filter includes ketupat, kuih desserts, crescent moon, traditional bowl design, and a wayang kulit character. For the Indigenous (Sabah & Sarawak) filter, I designed a totem pole, bamboo clusters, Rafflesia flower, hornbill, and tribal arrow.

To make the AR experience more immersive and lifelike, I incorporated subtle movement across both the environment and the visual assets. Instead of static illustrations, elements such as floating flowers, drifting clouds, sparkling particles, and gentle fireworks were animated to create atmosphere and depth. Key cultural assets also feature light motion—for example, lanterns sway softly, petals fall gradually
, and symbolic objects pulse or glow. These animated effects enhance user engagement by making each filter feel alive, dynamic, and responsive, transforming the cultural motifs into an interactive environment rather than a flat overlay.

Part 4: Spatial Assembling of Elements & Body Detection Integration

With all visual elements prepared and animated, the next major step was arranging them spatially inside the AR environment and ensuring they interact correctly with the user’s body. This stage is crucial because AR is not just about visuals—it is about how visuals behave around a moving person. Proper spatial design and accurate body tracking ensure the filter feels natural, responsive, and believable.

1. Spatial Assembly: Designing a Layered AR Environment

In AR, every element must be intentionally placed to avoid clutter while still creating impact. For this project, spatial assembly focused on three core principles:

A. Foreground, Midground, Background Structure

To create depth, each filter was built using a layered composition:

• Background Layer
  The main cultural anchor (fan, mandala, totem pole, bowl) sits behind the user, forming a stable base.

• Midground Layer
  Supporting cultural objects (foods, crafts, performers) are placed on the left and right of the figure.
  These elements are visible but do not obstruct the user’s face or major body movements.

• Foreground Layer
  Small atmospheric effects—cloud wisps, floating petals, lanterns, sparkles—move gently in front of the user to create immersion.

This multi-layer system allows each filter to feel dimensional and alive rather than flat.

2. Body Detection Using 3D Body 

For my project, this GLB file acts as the body-tracking anchor that helps the AR system understand where the user’s torso is. Even though the 3D model isn’t visible in the final filter, it works in the background as a reference mesh. The AR engine maps the user’s real body onto this template so it knows exactly where the chest, shoulders, and upper body are located. The green cube shown in the model preview marks the attachment point where all my AR elements will lock onto.

As the user moves—turning left or right, leaning, or shifting forward—the AR engine uses this mesh to keep my visual elements stable and properly aligned. This ensures that my mandala, fan, totem pole, clouds, and other cultural assets follow the body smoothly instead of floating around randomly. In short, this body AR detection model is what allows my filter to feel responsive, stable, and believable.

Part 5: Adding Pop Up Enter Effects For AR Assets 

To enhance the visual impact of each AR filter, I introduced pop-up entry effects that animate the cultural elements as they appear on screen. Instead of placing all assets statically at once, I designed each component to “enter” the scene with motion, timing, and visual energy. This makes the filter feel more dynamic, immersive, and engaging from the very first moment the user activates it.

1. Giving Each Element a Meaningful Entrance

Different cultural elements enter the scene in ways that match their personality and visual identity.
For example:

• Lanterns may float upward gently,

• Flowers may drift in softly,

• Fans or mandalas may expand outward,

• Food items might pop in with a bounce,

• Tribal arrows may slide in from the side,

• Lamps and diyas may fade in with a warm glow.

These motion choices reinforce cultural tone—festive, graceful, celebratory, or grounded—while keeping the viewer visually engaged.

2. Timing, Staging & Layering

Pop-up effects were timed sequentially so the scene builds gradually rather than appearing all at once.
Large anchors (like the fan, mandala, bowl, or totem pole) typically appear first, followed by secondary elements on the left and right, and finally the floating atmospheric details. This structured reveal creates a sense of stage opening, guiding the user’s eye naturally.

3. Enhancing AR Presence Through Motion

By giving assets an animated entrance, the filter feels more alive and responsive. These pop-in effects help establish spatial depth and make the overall experience feel like a curated performance rather than a static overlay. The small motions also help soften the transition into the AR world, making the filter more enjoyable and immersive for first-time users.

Part 6: Adding Sound Effects To Each Filter 

To elevate the immersion of the AR experience beyond visuals, I incorporated sound effects tailored to each cultural filter. Audio plays a crucial role in shaping mood, signalling cultural identity, and enhancing the emotional resonance of the filter. By pairing each visual composition with subtle, culturally inspired sounds, the filters feel more alive, atmospheric, and engaging.

1. Matching Sound to Cultural Identity

Each filter uses sound cues that reflect its cultural tone:

• Chinese filter: soft chimes, lantern bell jingles, festival drum accents, and light sparkles to match the celebratory ambience.

• Indian filter: gentle temple bells, classical dance ankle bells, soft diya flickers, and rhythmic percussion to complement its spiritual and festive mood.

• Malay filter: calm flute melodies, subtle wind chimes, festive “Raya ambience,” and night-sky sparkle sounds that evoke warmth and hospitality.

• Indigenous filter: forest ambience, bird calls (hornbill-inspired), bamboo rustling, and soft tribal drum beats to emphasize nature and grounding.

Final AR Filter Turn Table - 

Chinese Culture AR Body Filter :

Malay Culture AR Body Filter :

Indian Culture AR Body Filter :

Indigenous Culture AR Body Filter :

3. Task 3 - Final Project Showcase

Requirements : 

Final Project consist of the finalized project output developed i.e. fully functional UIX or ready to publish designs or broadcast time-based media like short film or animations

Progression :

Part 1 : Finding Real People To Test Filter & Improvements

As the filters reached a polished state, the next step in preparing for the final showcase was to test them with real users. This phase was essential because AR experiences behave differently depending on face shape, height, lighting conditions, and user movement. To ensure the filters felt natural and worked consistently across diverse individuals, I reached out to classmates to help test the filters 

Part 2 ： Creating Loading Page For All Filters 

During the final stage of user testing, Mr. Asrizal and my peers suggested adding a loading page scene to introduce the filter before it appears. This loading screen acts as a brief visual preview, giving users a rough overview of what the filter represents and what cultural elements they can expect. 

Instead of the AR assets appearing abruptly, the loading page creates a smoother transition and sets the tone for the experience. It also helps first-time users understand the theme of each filter—whether it is Malay, Chinese, Indian, or Indigenous—before the full AR scene animates onto their body. This enhancement added clarity, anticipation, and a more polished entry point for the final showcase.

Part 3: Recording User Interaction & Final Filter Showcase Video 

After finalising the loading pages and AR interactions, I recorded a friend using all four AR filters to document how they perform in real-world conditions. This step allowed me to showcase the filters in action, capturing how the body-tracking, animations, spatial arrangement, and sound effects respond naturally to user movement. Recording a real user helped demonstrate the usability and stability of the filters beyond static renders.

The footage was then edited into a short showcase video, combining clips from all four cultural filters. Transitions, timing, and pacing were refined to clearly highlight each filter’s visual identity while maintaining a smooth viewing flow. This final video serves as both a demonstration of the AR experience and a key presentation asset for the final showcase, effectively communicating the concept, interaction, and immersive quality of the project.. 

Part 4: Creating the Final Showcase Experience

The final stage focused on designing a complete showcase that clearly communicates the concept, interaction, and outcome of the AR filters. This showcase includes a cover page to introduce the project, an intro page to explain the cultural context and purpose of the filters, and a series of turnover visuals that display each filter from different angles. These elements help viewers understand the design intent and visual structure before seeing the filters in motion.

In addition, I mapped out the user flow, illustrating how users move from scanning the QR code, viewing the loading page, activating the AR filter, interacting with the visuals, and completing the experience. By presenting the project through a structured narrative rather than isolated visuals, the showcase provides a clear, professional overview of both the design process and the final AR experience, making it accessible to first-time viewers and evaluators.

Final Submissions :

Compiled Submission Link -https://docs.google.com/document/d/1QNO95WuLBHMK1M6qxMHKJUt-SGvK6fy72BZZDoKlV5Y/edit?usp=sharing

Google Drive Link -https://drive.google.com/drive/folders/1LVVx4U4kN2xLDQ3ylR7N83R6QH03bxa8?usp=sharing

Presentation Final Slides - 

Design Exploration Final Slides by Winnie Ho

AR Filter Used By Real People - 

 AR Filter Turnover -

Final Presentation Video -

https://drive.google.com/file/d/1g3DJ8a9uAYzUyw6SwmVogbo6K-cXNE8C/view?usp=sharing

Project Management Document -

---

4. Feedback

Please refer to Project Management Document for weekly feedbacks

---

5. Reflection

Experience

This project gave me the opportunity to explore body-tracking AR, which is something I have always wanted to try but had not fully explored before. Designing AR filters for different cultural groups allowed me to combine visual design, interaction, and cultural storytelling in a new way. I enjoyed experimenting with how digital elements could respond to body movement, creating an experience that feels more immersive and engaging than static visuals.

Observation

Throughout the process, I observed that body-tracking AR can make cultural content feel more approachable and personal, especially compared to text-heavy displays. Even when using vector illustrations, thoughtful layering, scale, and motion helped create a sense of depth and presence. I also realized the importance of keeping interactions simple so that users can focus on experiencing the culture rather than figuring out how the AR works.

Findings

From this project, I learned that effective AR design is not about complexity, but about meaningful interaction. Body-tracking AR can be a powerful tool when it is aligned with clear cultural themes and user experience goals. This project strengthened my interest in AR as a design direction and helped me gain confidence in experimenting with interactive technologies beyond traditional UI and visual design