Experiential Design - Task 1: Trending Experience

22/04/2025 - 14/05/2025  / Week 1 - Week 4

Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media

Experiential Design

JUMPLINK:

1. Lecture
2. Instruction
3. Task 1: Trending Experience 
• Topic
• Visual Mock Up
4. Feedback
5. Reflection

1. LECTURE

These are notes that I've taken from watching the lecture, but I don't think we received the PPT for the slides, so it's not the complete info from it.

Week 1 – Ideation, Research, and Setup

This week kicked off with a deep dive into past sdent projects and some useful references. We looked at YouTube playlists of final outcomes and browsed a few blogs, like Ivy Chung’s, Abigail’s, and Michelle Angeline’s, to get a feel for the standard and expectations.

From there, we were asked to come up with three different project ideas. The goal is to propose these ideas to our lecturer and get feedback before proceeding. It was emphasized that we shouldn’t just throw random features together—each idea should lead to a focused Minimum Viable Product (MVP). The idea of doing one thing well (quality) is better than overloading with too many half-done features.

Idea Directions:

• Something similar to IKEA furniture placement in AR

• One feature = one MVP

• Possibly include a rotate function for objects

• Consider adding scanning features (must work on iPhone 12 Pro or 14 and above)

A key takeaway here was the importance of documenting the design journey. If the final result strays too far from the initial concept without explanation, we risk losing marks. So, we need to log:

• Hardships faced

• What we learned

• How we solved design issues

We also discussed building a quiz-based interaction that ties into a VR experience. That way, we don’t need to create too many standalone components—the immersive experience can carry a lot of the weight.

Technical Setup:

• Install Unity (with WebGL Build Support)

• Add GitHub Copilot for help with coding

• Register GitHub using our school accounts

• Prep ideas and refine them for next week

---

Week 2 – Mapping the User Journey

This week, we explored what separates UX (User Experience) and CX (Customer Experience). The main difference is that not all users are customers—someone might buy something for another person, which affects how we market and design for them. Then there’s BX (Brand Experience), which tries to unify both UX and CX under the brand’s identity.

We also covered Information Architecture—how to structure content and features in a way that makes sense for the user. This plays into the design hierarchy and what gets shown first.

UX Exercises:

• Empathy Mapping: Understand what users think, feel, say, and do

• Journey Mapping: Focus on pain points and gain points within a user’s experience

We were encouraged to not just stick to templates but to create layouts and journeys that match the context of the product.

Reference: Nielsen Norman Group's UX Mapping Cheat Sheet
https://www.nngroup.com/articles/ux-mapping-cheat-sheet/

We also started a practical journey map exercise, choosing our own scenario and breaking it down into steps. My group had a hard time doing this due to all of us having our own perception on our journey map and having different pain points. Some of the members also just put the pain points without the solutions to it, resulting in mostly me doing the solutions. Two of the members were taking an elective on this module, so I feel like they don’t quite understand what we need to do. One of them also just didn’t contribute anything—just had their cursor click on the post-it, so we couldn’t even move or change it. I would present it if I could, but I really don’t understand what the contents of this are, I can’t explain it, so it feels futile to even try to present it.

TAYLOR's UNI STARBUCKS JOURNEY MAP - Miro

Fig 1.1 User Journey Map, Week 2 (29/04/2025)

---

Week 3 – XR Technology, Testing, and Feature Breakdown

This week focused heavily on XR (Extended Reality)—VR, AR, and MR. The comparisons were helpful:

• VR allows you to experience things that aren’t possible in the real world.

• MR blends digital elements with real-world interactions. We’re using MR through mobile, not headsets like HoloLens.

MR Experience Considerations:

• Use multi-modal input (voice, touch, gestures)

• Add sound for feedback since there's no real-world friction

• Use visual cues like highlights to signal interaction

• Make sure the visuals match the user’s actions quickly

We also reviewed marker-based vs. markerless AR:

• Marker-based: Uses GPS, scanned models, or printed markers to trigger AR

• Markerless: Doesn't rely on physical markers—more flexible but harder to set up

Design Thinking Framework:

1. Empathize

2. Define

3. Ideate

4. Prototype

5. Test

Everything should start with a solid problem statement, followed by competitive analysis and design space analysis:

• Who else has done this?

• What can we learn or improve?

• What kind of interactions do we want? (Touch, rotate, sound, etc.)

Group Task Scenario:

• Scene: A shopping mall

• Feature: A floating virtual shopping list + aisle navigation

Challenges:

• Visualizations need to be fast and clear

• Tie the voiceover or text to what’s happening onscreen in real time

• Each feature must have a strong visual representation

• Public speaking and presentation clarity matter (note to self: don’t be lazy, practice presenting confidently)

Technical Notes:

• Use VuForia Engine for marker tracking

• Plan out licenses and target management in Unity

• Images need to be high-quality JPEGs

• Test MVP features first before building the full experience

• Install Iriun Webcam for testing on PC/phone setups

For this group project, the only discussion we had was at the beginning, to decide the scene and the AR features. After that, we wrote down the expansion of the features. The de facto group leader wrote down most of the information, and I mostly just did the mock-up visuals. I learned the difference between AR and VR too, since they’re similar and both have been integrated in the real world, so there’s a lot of examples of it on the internet.

Week 3 Experiential Design – FigJam

Fig 1.2 AR Feature Exercise, Week 3 (06/05/2025)

Fig 1.3 AR Feature Exercise - Mockup, Week 3 (06/05/2025)

Week 4 – Technical Setbacks & Catching Up

My laptop died just before class, so I had to bring it in for repairs afterward. Because of that, I couldn’t really write down any proper notes during the session. From what I caught, it was mainly a Unity tutorial session. I will do the tutorial as soon as I get my Unity working.

Unity Issues

Even before the laptop crash, I hadn’t started the Unity tutorial yet—mostly because Unity itself has been giving me trouble. I managed to install the engine, but every time I try to open a new project, it just refuses to load. Miss suggested uninstalling and reinstalling the engine, which I tried, but it didn’t work. I also tried deleting the engine files directly from the folder, but somehow they’re still there.

It’s frustrating, especially since I want to start prototyping soon. But this is part of the process, I guess. Documenting setbacks is just as important as documenting progress.

2. INSTRUCTION

3. TASK 1: TRENDING EXPERIENCE 

Description

Students are given a series of exercises that explore the current, popular trend in the market to give them a better understanding of the technologies and the knowledge in creating content for those technologies. Students will conduct research and experiments to find out the features and limitations, which will later allow them to make a decision on which technologies they should proceed with in their final project. 

Requirements

1. To complete all exercises to demonstrate understanding of the development platform fundamentals 

2. To write a short reflective report on their blog based on their findings.  

3. To propose 3 potential ideas for their project.

Submission

Online posts in your E-portfolio as your reflective studies 

1. Topic

For this one, we need to make 3 AR proposals for our next task. This is the initial/unpolished idea of each topic, the structured ideas is presented in the doc below. 

Sound Sanctuary

Sound Sanctuary started with a simple observation: music is usually something we hear, but rarely something we see. While watching Sam Bowman’s lyric videos, I was struck by how his calm, minimal visuals gave more weight to me than the usual music video. I started wondering—what if those visuals could surround you in AR?

In this concept, the user scans a printed lyric card or quote. This action opens a quiet, floating scene: a soft sky, blurred backgrounds, and lyrics slowly moving through space. A small, hand-written-style notebook appears nearby. Tapping it opens different pages—one showing the artist’s credits, another sharing a short story or reflection behind the song, maybe a next song?

The challenge for this project will be bringing movement and mood into the scene, without overwhelming the user. I’m exploring how to add animations, ambient sound, and interactive details to the AR. 

---

PLLI Portal: A Digital Booth for PLAVE Fans

The idea for PLLI Portal came from a real life problem in fan communities. When the virtual K-pop group PLAVE released new merch, international fans missed out because of time zones and shipping limits. That made me wonder: what if fans could access a PLAVE-themed booth in AR, no matter where they are?

In this project, scanning a PLAVE-related item (like a sticker or card) brings up a mini AR pop-up. It’s styled like a small event table and includes different zones: a floating screen plays short clips or dance loops, rotating merch models can be tapped to show artist notes or trivia, and a scroll card invites users to try a quick lore quiz. Each member is represented through small symbols and effects—like an emoji glowing beside their favorite song or a spark effect linked to their rap verse.

There are many directions this could go, including the ability to move around the booth or explore different versions. But keeping it accessible and joyful is key. The aim is to give fans a small digital space to visit their idols.

---

Journey of Light

This one is the most open-ended of the three ideas. Inspired by the peaceful world of Sky: Children of the Light, this concept imagines a soft AR island that appears when you scan the ground. the initial idea that it's just a space you can explore, observe, or just be in.

The island might include green hills, clouds drifting by, and winged creatures. Scattered around are paper boats—tapping one shows an encouragement sentence or quotes. There’s also a small origami icon that opens a short tutorial on folding a paper boat in real life.

Other ideas for this space include choosing different island styles (like Forest or Flower Hill), or placing candles. I’m also thinking about adding calming interactions, like hiding creatures that softly appear and disappear. Also a song playlist so the user can switch the songs as they please.

Fig 3.1 AR Proposals, Week 4 (13/05/2025)

2. Visual Mock Up

Before starting any actual development, I made visual mock-ups of the three AR concepts using Adobe Illustrator.

I kept the designs simple and used grey tones to focus on the concept, not the visuals. Each mock-up shows the main features the user would see in AR, like objects they can tap or areas they can explore. I added labels to explain what each part does.

The goal was to show the core idea of each concept—not the full app or user interface. I didn’t include mobile phone frames, buttons, or menus yet. That’s something I realized I forgot after making them.

Fig 3.2 AR Proposals Visual Mockup, Week 5 (20/05/2025)

Fig 3.3 AR Proposals Visual Mockup, Week 5 (20/05/2025)

Fig 3.4 AR Proposals Visual Mockup, Week 5 (20/05/2025)

Fig 3.5 AR Proposals Visual Mockup, Week 5 (20/05/2025)

What I’ve Realized

• I didn’t include a phone frame around each image, which would’ve helped viewers understand that this is meant to be seen through a mobile screen. That’s something I plan to add next.

• I also haven’t explored the actual UI or UX journey—like how the user opens the app, what buttons they press, or how navigation works. These mock-ups focus mostly on the AR world after the experience is triggered.

• Despite that, making these scenes helped me solidify the interactive points and the emotional tone I want to aim for in each concept.

• Using text labels directly in the design also helped me test which interactions feel natural and which ones might need better framing later on (e.g., "tap to flip page" or "tap to view message").

4. Feedback

Week 4: 

Specific Feedback:

• Make the information simpler.

5. Reflection

1. Experience 

Creating the visual mock-ups for the AR concepts was a helpful and grounding step in my process. Using Adobe Illustrator, I translated rough ideas into visual scenes that show what each AR experience could feel like. Even though I haven’t made any prototypes yet, this step gave me a starting point to work from and made each idea more tangible. It was my first time building mock-ups like this for AR, so I kept the layout simple and focused mostly on showing the main interactive elements.

2. Observation

As I worked on the mock-ups, I noticed some gaps in my design. For example, I didn’t include the mobile phone frame or the UI elements that would guide users through the experience. The mock-ups show what the AR scene might look like, but not how the user gets there or interacts with it through their phone. I also realized that the designs don’t yet show how the app should respond to touch, motion, or other actions. This made me aware that I still need to think through the user journey more clearly.

3. Findings

Making the mock-ups helped me understand the importance of visual storytelling early in the design process. Even simple diagrams can help communicate an idea and reveal what’s missing. I learned that a clear layout can bring focus to the concept, but that UI/UX thinking needs to come in earlier. I also found that labeling interactive parts directly on the mock-up made the concept easier to explain and remember. Going forward, I plan to add mobile UI overlays and think more about how users actually move through the experience from start to end.