Experiential Design - Task 2: Experiential Design Project Proposal

16.5.2025 - 30.5.2025 ( Week 4- Week 6)
Gam Jze Shin / 0353154
Experiential Design / Bachelor of Design in Creative Media
Task 2: Experiential Design Project Proposal


Index

1. Instructions
2. Task 2: 
Experiential Design Project Proposal
3. Feedback
4. Reflection


Instructions

fig 1.1  Experiential Design MIB


Task 2

In this task, we must develop an experience design project based on a chosen topic, focusing on either screen or physical space. We are required to create a professional proposal that includes user experience analysis, comparisons with existing solutions, sketches, and mockups from the user’s perspective. The goal is to demonstrate creativity, a clear understanding of experience design, and the ability to effectively communicate and break down our ideas.


Week 5
In today's class, we continued learning Unity by focusing on the coding aspect. I learned how to link a button to the code so that clicking the button triggers specific effects based on the script written.

fig 1.2 Week 5 Class Exercise

We also learned how to insert a video as a pop-up AR object. When the image is scanned, the designated video will appear on the camera view.


fig 1.3 Script in Visual Studio

The coding is done in Visual Studio. It controls the effect of the play button—when isPlaying is false and the button is clicked, the video starts playing. Then, the isPlaying will become true now. This is the basic concept behind the logic.


fig 1.4 - 1.7 Script Screenshot

Here is a sample screenshot of the script and the warning effect shown in Unity. When the click count exceeds the predefined limit, certain effects that we’ve set will be triggered.

fig 1.8 Graph Editor in Unity

We can also use the graph editor in Unity to control and design specific effects for certain objects. This provides an alternative method to scripting for creating interactions.

fig 1.9 Week 5 Class Exercise Video

This video demonstrates that after clicking the button three times, an explosion effect will be triggered.

Week 6
This week’s class was held online. I followed Mr. Razif’s instructions to learn how to create different screens in Unity and navigate between pages by clicking buttons.

fig 1.10 Week 6 Class Exercise Video

First, we learned how to navigate between different screen pages. An important thing to always remember is to add the screen page to the build settings in Unity; otherwise, the page will not appear.

fig 1.11 Week 6 Class Exercise Video Part 2

After that, Mr. Razif taught us how to create a button that, when clicked, displays information. He told us to make a button that closes the information. Once we finished, we had to demonstrate it to him as proof of attendance for that day. I implemented two different methods: one where clicking outside the information closes it, and another using an 'X' button within the information. When the 'X' is clicked, both the information and the 'X' button close together.

Task 2 Progress
fig 1.12 Progress in Google Docs

First, I wrote the project proposal based on my chosen topic, which is an AR road sign learning app. I conducted research on the topic and used the findings to write the introduction.

fig 1.13 News related to Road Sign

I discovered that some accidents in Malaysia were caused by confusing road signs. Therefore, I included this information in my proposal as part of the problem statement for my project.

fig 1.14 Road Sign Knowledges

Before creating the design style and app mockup, I researched the common road signs used in Malaysia. This helped me categorize them more easily and gave me a clearer idea of how to incorporate them into the interface of my AR app.

fig 1.15 Road Sign Categories 

I listed down the six common categories of road signs in my project proposal to organize the content more clearly and support the structure of my AR app design.

fig 1.16 Progress in Canva

Based on my three target audiences, I created a user persona for each and designed a user journey map using Canva. After that, I identified the problems and pain points they faced, which helped me develop a new user journey map aimed at improving their overall experience and addressing those issues.

fig 1.17 Color Palette

For the color palette, I chose purple and yellow as the main colors for my app. I tested this combination using Color Hunt.

fig 1.18 Final Color Palette

However, after applying the color palette in Figma and testing it in the mockup, I made slight adjustments to improve the overall look of the interface. The original colors appeared too bright and were uncomfortable to view, so I refined the palette to create a more visually pleasing and comfortable user experience.

fig 1.19 Test font in Figma

I decided to use the Sora font for the app and tested it in the Figma mockup. Sora is optimized for digital screens, making road sign information easy to read. Its clean and modern appearance also complements SignAR’s AR-based and innovative concept, which is why I chose to use it.

fig 1.20 References in Pinterest

I researched on Pinterest to find inspiration for the AR app. The images I gathered reflect the style and concept I hope to use as references for my design.

fig 1.21 Wireflow in Miro

I noticed that previous seniors had created wireframes and user flows for their apps. Therefore, I decided to create a wireflow using Miro, based on what I had learned before. This helped me understand the structure of the app more clearly and allowed me to refine it before developing the final mockup in Figma.


fig 1.22 - 1.23 Below navigation bar

For the bottom navigation bar, I wanted to make the current page more noticeable. Initially, I tried using yellow to highlight it, but it looked out of place and didn’t match the overall design. So, I switched back to purple and added a yellow dashed underline to give it a highlighted effect while maintaining visual harmony with the rest of the interface.


fig 1.24 - 1.25 Comparison between real and illustrated images.

I used illustration images in my mockup instead of real-life photos. However, for the final version, I may consider using real-life images to provide users with a more authentic road experience.

fig 1.26 Mockup Progress in Figma

Here is the mockup for my AR Road Sign App created in Figma. I used the Android Compact frame to match the screen size of my phone.

Final Experiential Design Project Proposal
AR Document Proposal
Click here to view the AR Document Proposal in Google Docs.
fig 1.27 Project Proposal in Google Docs

Presentation Slide
Click here to view Task 2 Presentation Slide in Canva.
fig 1.28 Presentation Slide in Canva

AR App Prototype
Click here to view AR App Prototype in Figma.
fig 1.29 AR App Prototype in Figma

fig 1.30 AR App Mockup in Figma

Presentation Video
Click here to view Task 2 Presentation Video in YouTube.

fig 1.31 Task 2 Presentation Video


Feedback

Week 6

General Feedback
Create a single user journey map for the app proposal without separating it by different personas.



Reflection

Experience
Since I have experience working on proposals before, I already had a basic understanding of how to approach this project. By referring to previous work from seniors, I was able to list down all the essential components needed for the app project proposal. This gave me a clearer direction and helped me identify the areas that required further research.

One of the most important aspects of this project was developing the mockup. Before starting the design, I carefully considered the color palette, typography, and visual style. I followed a step-by-step process that I had previously used when creating an app, which helped me stay organized and efficient throughout the project.

My familiarity with Figma also gave me an advantage. Since I was already comfortable using the tool, I was able to spend more time exploring transition effects between pages and adding creative touches to the interface design.

Observation
I observed that tackling different design topics often leads to new ideas and perspectives. Each project encourages us to think in unique ways and helps us develop new skills that will be valuable in future work. This continuous learning process is something I truly appreciate.

Learning to use new applications also gave me more opportunities to experiment with different design outcomes and expand my creative thinking.

Findings
Through this project, I realized that Augmented Reality (AR) is becoming increasingly popular and has a lot of potential in the design field. As technology continues to evolve, AR is being integrated into more user experiences, creating new ways to interact with digital content.

From a design perspective, this trend opens up exciting possibilities. Designers now need to think beyond traditional screens and consider how users interact with 3D space and real-world environments. Understanding AR not only enhances our design capabilities but also prepares us to create more immersive and innovative solutions in the future.



Comments