Minor Project - Final Compilation

In the first week, our lecturer, Mr. Mike, briefed us on the overall framework of the Minor Project, which included seven different themes. Each of us was required to select the topics we found most engaging and begin collaborating accordingly. It was recommended that we thoughtfully choose projects that align with our programme and skill sets, focusing on those we are genuinely interested in.

After my consideration, I decided to pursue to the WarisanXR project. This project aims to

Deepen public connection to Malaysia's heritag through immersive, interactive storytelling.
Drawing both local and international visitors with interactive digital experiences.
Celebrating Malaysia's diversity and strengthening unity, especially among youth.
Building a long-term digital archive hologram experience of Malaysia's heritage.
Potentially Exporting immersive cultural content to promote Malaysia globally as a pioneer in digital heritage.

It's mainly suitable for someone with a background in UIUX and graphic design. Therefore, I am eagerly looking forward to this project. After finnish choosing our project, we then write our name into the Google Sheets that prepared by Mr Mike.

Figure 2.1 Grouping - WarisanXR (Group 1)

After that, Mr Mike told us that we need to complete the myTimes's lecture and quiz every week.

Figure 2.2 myTimes lecture

Notes:

We need to work with others from different course on this project.

Week 02: Contextual Research Board

In this week, we need to start with our contextual research which state inside the Miro Board.

📌 Group Miro Board Link: Click HERE

Our group start on questions before start with the contextual research. For examples:

Who are our client? What iss the project about? Why are they doing it?
What are the Information of the Musuem? (Visiting Info/Types of People who go to Musuems)
Why choose Istana Satu as the location? (Historical/Cultural?)
How can musuems use AR?
What are Malaysia National Heritage Themes?
UX Dessign in AR spaces?
Musuems with AR technology?
Case studies in AR Exhibition

Based on these questions, we conducted research on them. For my part, I will conduct the research on "Information of the Musuem". I found all the information from the Official Website (Click HERE) of Museum Negara and knowing the number of visitors from the website of Jabatan Muzium Malaysia (Click HERE).

To Do List:

1. Each of us need to start with contextual research, which can help us get to know more about the topic, and do research about the existing competitors.

Feedback by Mr Mike:

Figure 2.3 Feedback on Contextual Research Board

Week 03: Refine Contextual Research Board

In this week, we had refined our contextual research board. The attached image was the refined version of Contextual Research Board from each of us.

Figure 2.4 Refined version of Contextual Research Board

The attached image below was the refines version of Contextual Research from me.

Figure 2.5 Refined version of Contextual Board - Tze Wei

In the contextual board, we followed the feedback from Mr Mike to make refinement. Also, we added more supporting data (such as website link).

To Do List:

1. Each of us need to start our user personas in order to conduct the next stage.

Week 04: User Personas

This week we need to confirm our personas, by targeting local visitors, foreign visitors, and students.

📌 Group Miro Board Link: Click HERE

Figure 2.6 Compilation of User Personas

(a) User Persona - Local Visitor

Figure 2.7 User Persona 1

(b) User Persona - Foreign Visitor

Figure 2.8 User Persona 2

(c) User Persona - Student Visitor

Figure 2.9 User Persona 3

Feedback by Mr Mike:

Figure 2.10 Feedback for User Personas

Note:

Persona confirmed.
Start to conduct interview questions and google survey questions
Before sending out our survey questions, we need to ask for feedback from Mr Mike.

Week 05: Google Survey and Interview Questions

After we have confirm our user personas, we then starts to think about our questions based on our user personas.

📌 First version of our Google Survey Questions: Click HERE

Feedback by Mr Mike:

Figure 2.11 Feedback by Mr Mike for the first version of Google Survey Questions

We had refine the questions after recieved the feedback.

📌 Refined version of our Google Survey Questions: Click HERE

Later on, is our interview questions, Click HERE, our group have prepared 2 versions of interview questions, one is formal version and one is spoken language version.

Figure 2.12 Interview Question (Formal)

Figure 2.13 Interview Questions (Spoken Laguange)

After we settle all the questions, our group member , Zhi Ching help us to insert to Google Form.

Figure 2.14 Complete of Google Form

📌 Google Form Link: Click HERE

To Do List:

Starting on next week, what we're going to do are:

Figure 2.15 What we're going to do starting on next week

Week 06: Site Visit to Muzium Negara

This week, our group has conduct a site visit to Muzium Negara. Our group leader Jie Xuan has task us what should we need to do during the site visit.

Figure 2.16 Task allocated by our group leader during our site visit

Instead of just having interview with visitors who visit the Muzium Negara, our group member, Janaan suggest that we also can share our Google Form to people at there by scanning the QR code. At the meanwhile we can reach 80-100 respondents as fast we can.

Figure 2.17 Suggestion from Janaan

📌 Photo I took from the Muzium Negara: Click HERE

Since I am incharging the "Musuem Information" in contextual board, while we finnished our site visit, I also have updated the contextual board.

Figure 2.18 Done insert today photo to Miro Board

Figure 2.19 Update Contextual Board - National Museum Visiting

📌 Group Miro Board Link: Click HERE

To Do List:

After finnished the site visit, our group leader, Jie Xuan has tasked us on:

Figure 2.20 To Do List tasked by group leader after site visit

Outcome:

📌 Group Miro Board Link: Click HERE

(a) Interview Transcript

Figure 2.21 Interview Transcript

(b) Interview Video

📌 Complete Interview Video: Click HERE

Week 07: Analysing Data Survey (Google Form and Interview)

In this week, Mr Mike showed us how should we analyse our survey and interview data. He has assigned us to complete the 5 findings and key insights part, after we complete then we also need to complete the How Might We part.

What Mr Mike told our group:

Figure 2.21 Week 07

After our respondses of Survey Form reach 70 people, our group member, Zhi Ching starts to analyse the data. Check our Group Miro Board for the survey and interview analaysis (Click HERE).

Outcome:

(a) Survey Analysis

Figure 2.22 Suvey Analysis

(b) Interview Analysis

Figure 2.23 Interview Analysis

(c) Overall Summary of Analysis

Figure 2.24 Overall Summary of Analysis

To Do List:

Jie Xuan told us that, Mr Mike want to check our progress on:

Figure 2.25 To Do List

Figure 2.26 What we need to complete

Feedback by Mr Mike:

Figure 2.27 Feedback from Mr Mike for 5 Findings

After the feedback, Jie Xuan and I completed the 3 insights and categories of findings part.

Outcome:

(a) Top 5 Findings

Figure 2.28 Top 5 Findings

(b) Categories of Findings

Figure 2.29 Categories of Findings

(c) Key Theme and Insights

Figure 2.30 Key Theme and Insights

(c) Problem Statement and How Might We

Figure 2.31 Problem Statement and How Might We

Week 08: Site Visit to Istana Satu and meet Client

In this week, Mr Mike has conduct a site visit to Istana Satu and to meet with our Client, which is TrueXR. After finnished the site visit I then write all my idea into our Group Miro Board (Click HERE).

📌 Picture that took from site visit: Click HERE

Figure 2.32 Summary of information after visit Istana Satu

To Do List:

Jie Xuan, our leader told us she will task us on the proposal presentation slides.

Figure 2.33 Task Allocated

Week 09: Group Proposal

This week, our group will be focused on our proposal slides. What Mr Mike told us was we can refer to the reference he sent (Click HERE) to complete our proposal.

Before our group starts to conduct the slides, we first need to confirm our topic and theme, thus our group leader, Jie Xuan have create a document (Click HERE) for us to insert our topic idea into it. After we had confirmed our topic and theme, we then continue to the presentation slides.

Figure 2.34 Insert idea and topic into the document create by our group leader

Jie Xuan has summarize what information should our presentation slide which include:

Figure 2.35 Information that need to include in the presentation slide

To Do List:

Jie Xuan, our leader has task each of us what should we do:

Figure 2.36 To Do List

Outcome:

1st Version of Proposal Slide: Click HERE

Feedback by Mr Mike:

Figure 2.37 Feedback from Mr Mike for our proposal idea

Thus, our group have made changes to our topic and theme again.

Week 10: Presentation Week

After we have meetings, we reconfirmed our topic and theme for the proposal. We then also decided to change a new presentation deisgn (Click HERE).

Feedback by Client:

Figure 2.38 Feedback from Client (TrueXR) for our Proposal

To Do List:

Jie Xuan, our leader has task each of us what should we do for the following weeks:

Figure 2.39 To Do List

What I choose is UX and Interaction team.

Figure 2.40 Grouping with Chelsea

Week 11: Refine Group Proposal

This week, we refined the previous proposal based on the feedback give by Client last week and add more detailed information to it. We also create a new design for the presentation slides. (Click HERE)

What I have contribute was UI Design for the AR glasses.

Figure 2.41 First Version of UI design for the AR glasses

To Do List:

Jie Xuan, our leader has task each of us what should we do:

Figure 2.42 To Do List

Jie Xuan and I discussed and collaborated to complete and refine the customer journey map.

Figure 2.43 Complete Customer Journey Map

📌 Final Proposal Presentation Slide: Click HERE

Week 12: UI Prototype

This week, Jie Xuan, our group leader send us a document name "Task Execution".

Document - Task Execution

Inside this document, I took on the role of the Model/Prototype UX Team. Due to unforeseen circumstances within my group, I had to take full responsibility for the entire UI/UX and website development on my own.

My design work starts from slide 74 to slide 84 of the presentation slide (Click HERE), where I focused on replicating what users would see after putting on the AR glasses. In addition to that, I was also reponsible for creating the AR filters and the website of our project.

Outcome:

(a) UI Button

First of all, I started with the basics, which is creating the UI buttons, this is because they are used frequently thoughout the interface. Before designing them, I referred to several design references (from the ex UI design team) to ensure consistency and usability.

Figure 2.44 References for UI

These UI button designs were created by Ser Chen and Joey. However, their designs do not align with our project's theme and are insufficient to support the storytelling aspect of the AR glasses experience. The currrent set lacks the depth and quantity required, especially considering that the storyboard alone includes more than 5 distinct UI elements. Thus, the existing designs are not feasible and need to be completely redesigned to better match the narrative and visual direction of the project.

Figure 2.45 1st attempt of UI elements design by Ser Chen and Joey

After I gathered the references images, I began create the UI in Adobe Illustrator, aiming to blend cyberpunk aesthetics with traditional Mak Yong costume patterns.

Figure 2.45 UI Kits (Chosen Font and Colour Paalette)

We decided to use this UI kit to ensure consistency and visual harmony throughout the interface. The selected fonts and colour palette reflect both the cyberpunk style and incorporate elements inspired by traditional Mak Yong aesthetics.

For typography, we differentiate between header and body fonts to enhance readability and visual hierarchy. The colour palette features a range of teal and light tones to create a clean, modern, and tech-inspired look while maintaining clarity and user-friendliness.

Figure 2.46 Working Progression 1

After finnished the UI button part, I then export them out to transparent background PNG file.

📌 Google Drive: Click HERE to check the UI button PNG file.

Figure 2.47 Black Version and White Version (1st Attempt)

(b) Walkthrough in AR Glasses

I focused on replicating what users would see after putting on the AR glasses.

First was the glasses template. I find some of the reference in Google and created one in Adobe Illustator. The attatched image below was the Glasses Template.

Figure 2.49 Glasses Template

After I have the template, I then tried to import all the files that I need into Adobe Illustrator and start to conduct the walkthrough progress.

Figure 2.50 Working Progression 2

For the background design, since we only had a vague concept at the beginning, I sought help from ChatGPT, which successfully generated many highly relevant and accurate background images. I then imported these images into Adobe Photoshop (Click HERE) for further editing, adjusting them to blend seamlessly into the AR glasses template. After that, I exported the edited images and moved them into Adobe Illustrator for a second round of refinement, where I added the UI buttons directly onto the visuals.

📌 Google Drive: Click HERE to view used Background Image

Figure 2.51 Working Progression 3

After complete the whole section, I then export them to PNG transparent background file.

📌 Google Drive Link: Click HERE to view Final Walkthrough in AR Glasses

Figure 2.52 Final Walkthrough Compilation

(c) AR Filters

This AR filter is an extension of our main theme, Mak Yong. Our goal is to use this filter as a medium to help the public better understand and appreciate the unique elements of Mak Yong. After group discussion, we unanimously decided that the filter should include key traditional features such as the Setanjak (headpiece), shawl, and distinctive Mak Yong makeup.

📌 Google Drive Link: Click HERE to view image used in mockup of AR Filters

Figure 2.53 Commpilation of Image Used in mockup of AR Filters

I used these images and imported them into Figma to create a mobile-style prototype. And also create a new one with combination of all three (Setanjak (headpiece), shawl, and distinctive Mak Yong makeup).

Figure 2.54 Compilation of Mobile-style prototype

Week 13: Refine UI Prototype

This week, I presented my outcome to Mr. Mike, and he approved my work. However, he suggested a few changes. Specifically, he recommended reducing the number of lines in the taskbar panel, as he felt it appeared too cluttered from his perspective. He advised simplifying the design to make it cleaner and more user-friendly.

Changes after Feedback by Mr Mike

Figure 2.55 Old version of Panel (Left) and New Version of Panel (Right)

Have made update version to Google Drive. Overall for UI, walkthrough and AR Filter part is good.

Week 14: Develop Website Prototype and Refine Poster

This week, I was assigned to develop the website prototype after the Graphic Team (Joey and Ser Chen) expressed concerns about their task distribution, they think their workload is unreasonable. As a result, our team leader, Jie Xuan, entrusted me with full responsibility for the website development. I will be focusing on developing a consistece website of our project concept into an interactive and visually consistent web experience, ensuring it aligns with our overall design direction and user engagement goals.

Outcome:

(a) Website Prototype

The website prototype was developed in Figma. To maintain consistency with our theme and topic, I decided to use the same colour palette previously applied in our UI design and posters.

Working Progression

Video 01 Inital Draft of the website

After completing the framework of the website, I incorporated the images created by Janaan into the design.

Figure 2.56 UI Kits

Figure 2.57 Images created by Janaan our group member

Final Website Prototype

Figure 2.58 Home Page

Figure 2.59 Merchandise Page

Figure 2.60 About Us Page

Figure 2.61 Contact Us Page

Figure 2.62 Explore Page

Video 02 Final Walkthrough Website Video

(b) Refine Poster

The attached image shows the previous version of the poster. Since the Graphic Team (Joey and Ser Chen) expressed concerns about their task distribution, considering their workload unreasonable, I helped refine the poster after completing my UI task.

Figure 2.63 Previous Version of Poster

Outcome:

Before starting the refinement, my groupmate Zhi Ching created a sketch illustrating the entire Mak Yong story, ensuring consistency with our theme.

Figure 2.64 Sketch 1

Figure 2.65 Sketch 2

Working Progression

Figure 2.65 shows the step-by-step development of the refined Mak Yong poster. The process began with a gradient background , followed by the placement of the Mak Yong dancer illustration. The circular element was then added to enhance composition and visual focus. Next, the title and tagline were inserted, with adjustments to font placement and color to match the overall theme. Finally, lighting effects and additional details were applied to create a polished and dynamic poster design.

Figure 2.66 Working Progression 1

For the second poster, I attempted to replicate the original design but was unsuccessful, so I moved on to develop a new concept instead.

Figure 2.67 References for Working Progression 2

Figure 2.68 Working Progression 2

Final A3 Poster

Figure 2.69 Final A3 Poster (Launch)

Figure 2.70 Final A3 Poster (Pre-Launch)

Figure 2.71 Final A3 Poster (Pre-Launch)

Week 15: Final Presentation

After everything that our leader tasked us is done, we then start to create our final presentation slides in canve before the final presentation day (06 August 2025).

📌Canva Link: Click HERE

To the TOP ⬆

3. FINAL SUBMISSION

3.1 Final Proposal Presentation Slide

📌Canva Link: Click HERE

3.2 Final Submission of Presentation Slide

📌Canva Link: Click HERE

3.3 Final Product Prototype (Design File)

📌 Figma Link: Click HERE

3.4 Final UI/AR Glass Prototype (Design File)

📌 Figma Link: Click HERE

3.5 Final UI/AR Glass Prototype (Phone View)

📌Figma UI/AR Glass Prototype Link: Click HERE

3.6 Final Website Prototype

📌 Website Prototype Link: Click HERE

3.7 Research Responses

(a) Survey Form - Click HERE

(b) Site Visit Interview Video - Click HERE

(d) Task Allocate Document - Click HERE

📌 Click HERE for more links.

3.8 Complete Miro Board

📌 Complete Miro Board Link: Click HERE

3.9 Complete Gantt Chart

📌 Complete Gannt Chart Link: Click HERE

3.10 Google Document Project Management

📌 Complete Google Documemt Project Management: Click HERE

To the TOP ⬆

4. REFLECTION

Throughout the 14 weeks of the Minor Project, I experienced significant growth both as a UI/UX designer and a team collaborator. From the initial brief to the final prototype, this project challenged me to step beyond my comfort zone, take initiative, and adapt to real-world project demands.

Early in the project, I was drawn to the WarisanXR theme because of its strong alignment with my background in UI/UX and its meaningful purpose by preserving Malaysian cultural heritage through immersive digital experiences. I was excited by the potential to blend traditional elements like Mak Yong with futuristic AR and cyberpunk aesthetics.

As the project progressed, I took on a major role in the Model/Prototype UX Team. Due to internal team circumstances, I eventually became solely responsible for the entire UI/UX and website development, which was both challenging and rewarding. From designing UI buttons and AR glasses walkthroughs to creating AR filters and the final website prototype, I handled every steps, from conceptualization and research to design execution and refinement.

One of the most rewarding aspects was seeing the transformation of vague ideas into detailed deliverables. For instance, I used AI tools like ChatGPT to help visualize environments when our concept was still unclear. I then manually refined those outputs in Adobe Photoshop and Illustrator, integrating them with our custom UI elements for a consistent and immersive user experience.

Despite the heavy workload, I appreciated the continuous feedback from Mr. Mike and the TrueXR client, which pushed me to refine my designs. For example, simplifying the taskbar panel to enhance clarity and reducing visual clutter. These iterations strengthened my understanding of user-centered design and real-world application standards.

Working with Miro, Figma, Google Docs, and Adobe software also enhanced my ability to manage files, organize thoughts visually, and collaborate, even in moments when tasks had to be independently managed.

In conclusion, this Minor Project not only strengthened my technical and creative skills but also tested my resilience, responsibility, and adaptability. It was a valuable experience that prepared me for future industry-level collaborations where both cultural sensitivity and technical execution are essential. I’m proud of the outcomes and grateful for the journey.

To the TOP ⬆