Minor Project - WarisanXR

27/09/2024 - 09/01/2025 / Week 1 - Week 14
Joey Lok Wai San / 0350857
Minor Project / Bachelor of Design (Hons) in Creative Media 
WarisanXR



TABLE OF CONTENTS



INSTRUCTIONS


https://drive.google.com/file/d/1pXzUjN0mE-XOAiNdTX7ux72luwcHXivd/preview

Module Briefing
During the first week of classes, Mr. Mike briefed us on the module and presented three topics/ clients we could work on for our Minor Project. We were tasked to form groups and choose a topic to work on. 


https://drive.google.com/file/d/1wYURNVcfybAoJVZ1YpoX6RgKRkUkfmKP/preview


TASK 1: PROJECT PROPOSAL

1) Group Formation & Chosen Project
In the first week, we formed a group consisting of 7 members and chose our topic WarisanXR by the company, TrueXR. The project aims to immerse visitors in Malaysia's rich cultural heritage by blending the physical environment with digital content. 

Group 8 Members:
1. Reema Arif Hamza (Leader) 
2. Joey Lok Wai San
3. Thanaphorn Daensaad
4. Michael Chan Henn Loong
5. Samiha El-ghobbas
6. Ian Choo Xin Zhe
7. Johnny Lam


Fig. 1.1 Chosen Project - WarisanXR Project


Fig. 1.2 Chosen Project - WarisanXR Project

2) Contextual Research
After choosing our groups, we did some contextual research on TrueXR, the technologies used (AR glasses), and the cultural elements listed. We also researched any relevant case studies of other museums that have MR (Mixed Reality) Experience.

We each researched separate parts and chose the ones we would like to do. This ensured we did not repeat our research and were more efficient in completing our parts.
  1. Technologies - Johnny
  2. Immersion Features - Micheal
  3. Cultural Elements First Half - Ian
  4. Cultural Elements Second Half - Samiha
  5. Mixed Reality Experiences in Other Museums - Joey
  6. What makes an engaging and immersive MR experience - Han
  7. Interview Questions - Reema
I did my research on MR Experiences in other museums around the world. There are quite a few experiences such as "Forest Fire" by Raden Saleh, "The Smithsonian Institution", "The Carnegie Museum of Natural History" and an "MR Museum in Kyoto".


Fig. 1.3 Contextual Research of Museum MR Experiences


Fig. 1.4 Group Contextual Research

3) Client Meeting (CEO of TrueXR)
We had our interview with Justin, the TrueXR CEO, to ask anything we are unsure about from the project brief. We clarified all our inquiries with the CEO during the meeting. 

Interview Notes: 
https://docs.google.com/document/d/1YpBfQvqHVKsqGbsiJgBD2E6rm2OLdgd2OvAJATacbn8/edit?usp=sharing


Fig. 1.5 CEO of TrueXR - Online Meeting Summary

4) Survey
To gain insights and validate the visitors' pain points, we conducted a survey as our research method. The survey consisted of 23 questions which was divided into seven sections, and the questions were grouped together. 
  1. Demographics
  2. Museum Visitation
  3. Cultural Interests
  4. What makes a good MR Experience
  5. Worries of MR 
  6. Familiarization with AR Glasses and Content
  7. Customer Touchpoints and Engagement
Google Survey Form: https://forms.gle/MYL6YvXnjbZnB5QS7

The survey was distributed using social media and through known contacts.  The survey collected 100 responses, from which we analysed the collected data based on the sections above.

Fig. 1.6 Survey Analysis 

5) User Personas

Based on the interview we had, we can start creating survey questions and our user personas. In order to find out our main three personas/ target audience, we conducted more contextual research. Through this, we found data and statistics on Muzium Negara's demographics to base our personas. 

Based on the contextual research we did, we based the user personas on the data we got. We narrowed our personas down to the following nationalities: 
  • Local
  • China
  • Singaporean/ Indonesian

Fig. 1.7 Contextual Research of Muzium Negara's Demographic

Before receiving feedback from Mr. Mike, we created 6 different user personas as shown below. We were asked to generalise the personas more. Our survey is meant to find people in your network, they are the most convenient ways to get the numbers. The personas don’t have to be based on people who visited Museum Negara, it can be anyone who visits museums. 


Fig. 1.8 Initial User Personas - Before Feedback

These are our main personas after making changes based on discussion from our feedback.

Main 3 User Personas: 
  1. Local family head
  2. Cultural foreign/ tourist
  3. School and university students 

Fig. 1.9 Initial 3 Main User Personas - Before Survey

Once we got our survey completed, we updated the user personas based on the data we got back to accurate user personas that more accurately represent the demographics.  


Fig. 1.10 Finalized 3 Main User Personas - After Survey

6) Empathy Map
After analysing the interview responses, we created an Empathy Map as well as user journey maps to better empathise with our users.


Fig. 2.1 Empathy Map


7) Insights, Problem Statement & How Might We Questions
After completing our surveys and analysing the results, we developed the 'Insights, Problem Statement & How Might We Questions' with Mr. Mike. These helped define our project and help us stay on track of what we want to accomplish.


Fig. 2.2 Insights Discovery


Fig. 2.3 Problem Statement


Fig. 2.4 How Might We

8) TrueXR Visit 
We got a visit from Mr. Justin so that he could show us the AR glasses that were used for the experience. From this, we got to see all the content and how it would be displayed as well as interacted with.

Fig. 2.5 TrueXR Visit - Trying out AR Glasses

9) Muzium Negara Site Visit
After that, on the weekend, we went on a tour to Muzium Negara to get a better view of the layout and space. We basically played tourist on that day.


Fig. 2.6 Muzium Negara Layout

 
Fig. 2.7 Field Trip (+Playing Congkak)

10) Brainstorming (Ideation)
We then started brainstorming our ideas for the project, mainly in terms of the following categories. These are just rough ideas to get us started, and most things don't even make it to the final product.

Content Design Ideas 
For our content design, Ian and Micheal first came up with a bunch of ideas of parts of Malaysian heritage we would like to create. The ideas came from the existing assets that TrueXR already had for their WarisanXR experience.

We developed our ideas further by choosing the ones that would appeal to people best and teach about Malaysian heritage best. Once that was done, sketches were created and we made a flow of how the content would be displayed. Some of the reference images we had aren't loading in the picture below so they do not appear.

Fig. 2.8 Content Design

Marketing Ideas
I came up with the marketing because slay PR & Marketing director things. Marketing ideas were separated from pre-launch, on-site, post-visit, community engagement and others. These ideas would help promote the WarisanXR experience to their target audience. The ideas match each user persona, for example for the local family head, it is marketed as a family discount package.

Fig. 2.9 Marketing Ideas

Physical Design Ideas
The physical design ideas acted as stations that the users could interact with to open the AR experience. Johnny made these, and halfway through we decided to test the art direction colors on the stations.

Fig. 2.10 Physical Design Ideas

Art Direction Ideas
Ian contributed to the art direction ideas. As shown below, initially there were quite diverse styles that we wanted to approach. After we got feedback from Mr. Mike, we made it so it would better fit the theme of modernity and heritage. In the end we chose this 

 
Fig. 2.11 Art Direction Ideas, Before (Left) vs After (Right)

At this time, I found a bunch of inspirations on Pinterest that would work for our design and created a mood board and colour palette for it. We ended up voting for the theme we liked best that would feel historical but also timeless.


Fig. 2.12 Color Palette

We compiled our final art direction with the approved colour palette. We combined it to get our overall art direction, which honestly looks like such a slay. The colours and design style really work.


Fig. 2.13 Final Art Direction

Spatial Design Ideas
Reema and Han worked on the spatial design which included references of how we wanted to design the space provided and utilize it to the best. 


Fig. 2.14 Exhibition Spatial Design Ideas

The whole group was also asked to understand the principles of spatial design, especially for MR experiences since we weren't really quite familiar with it yet.


Fig. 2.15 Research on Spatial Design

11) Proposed Idea
Mr. Mike encouraged us to develop a storyline and a theme that matches our problem statement so that the content has a proper flow between stations and makes sense as a whole.

We were trying to connect our ideas together to form one mega idea basically. While in class, I cooked and had a brain-baby and came up with this idea where we connected it through Malaysia's pride and diversity.

Fig. 3.1 Idea Drafted on Paper

"An immersive MR exhibition called WarisanXR focused on celebrating and sharing Malaysia’s cultural heritage through an interactive experience that unites Malaysians and introduces non-Malaysians to the pride and diversity of Malaysia. The project includes a multi-station exhibit highlighting traditional clothing, celebrations, games, food, and arts & crafts."

From this, I came up with a storyline that would make sense. The storyline came first and then we discussed it with Mr. Mike to make everything make sense. 

"On Merdeka day in the 80s/90s, a kid wears traditional attire (Station 1) then goes to the Merdeka parade (Station 2) to watch the celebrations. He then goes home to play street games (Station 3) with his friends and family. Later in the day, they cook then food and eat (Station 4). After, they settle together and do arts and craft (Station 5). The day/ experience ends with watching fireworks."

Fig. 3.2 Storyline


12) Developing the Idea
When the idea was approved and we had a clear idea of what our project will be, we started developing the idea further as well as including everything we needed for our proposal presentation in the upcoming weeks.

Content Design 
I worked on creating the content design since I already had the idea in my mind after birthing out the storyline idea. It shows the format of how each station will be. Once that was done, Johnny sketched out some of the items.


Fig. 3.3 Content Design and Sketches

Navigation 
I also worked on the navigation design which included combining ground and air navigation to easily guide users through the stations and through the experience. I also made the word limit for the experience as users wouldn't want to read too much.


Fig. 3.4 Navigation Design

UI Design
Micheal designed the UI which will be used for the glasses. These are wireframes made to better visualize the layout and placement of images and text.


Fig. 3.5 UI Design

Art Direction
This is the refined direction with the final color palette as well as chosen typography. The chosen typography uses Faculty Glypic as the headline font and Space Grotesk as the body font. 


Fig. 3.6 Chosen Colour Palette


Fig. 3.7 Chosen Typography

Exhibition Design
Reema did the exhibition design using the station designs that Johnny created earlier on. The idea is to have the top of the exhibition be transparent so visitors are able to see what is going on and to keep the space more open. 


Fig. 3.8 Exhibition Design

User Journey Map for Stations
The last thing that was done was creating a user journey map for the stations, which shows the experience that each user goes through at each station.


Fig. 3.9 User Journey Map for Stations

13) Storyboard
Based on our idea and everything we developed around the idea, we created a storyboard for our proposal to help better visualize what we intend to create, as well as show the flow of the experience from start to finish.

Initial Storyboard
Han created the first storyboard, but midway through we had to redesign them.

Fig. 3.10 Initial Storyboard

The night before the presentation we all stayed on call and finished up the storyboard as there were a lot of slides and drawing to be done.

Proposal Presentation
On Week 8, Reema and Micheal presented our proposal to the TrueXR team via Microsoft Teams.


Fig. 4.1 Final Proposal Presentation


Fig. 4.2 Final Proposal Storyboard



TASK 2: DESIGN MANAGEMENT PROTOCOLS

After getting feedback from our proposal presentation with TrueXR, we started refining our idea to match what was said especially on what could be improved on.

1) Floorplan
The floorplan was refined by Reema several times to get the optimal layout. From the feedback, it had to include queuing, set up space, collection area, and photo booth.


Fig. 5.1 Floorplan

Visitors can enter in queuing area and wait to enter the exhibition. Once they reach the front someone at the desk can help them setup their glasses. Upon entering the first clothing station will be directly visible. After that visitors can move to the next space where they can freely explore the four other stations.

At the exit hall, there is room to add our end game experience (scare away the monkey and retrieve the pendant). Upon exiting visitors can drop off their AR glasses and collect the photos of their experience. They can also take additional photos and the photo booth area.

Fig. 5.2 Final Space Flow Plan

2) Art Direction
The art direction was refined to be less neon as mentioned by the TrueXR team. Following this, we went on to improve the color palette. The initial colour palette works but during the presentation our moodboard didn't really reflect that so there was some misunderstanding.


Fig. 5.3 Art Direction

This art direction is inspired by the Malaysian flora and fauna which includes more earthly rich tones that reflect the Malaysian heritage yet sticking to a modern cohesive look, the colors are referenced from the fruits and plants in malaysia.

Using secondary colors for gradient and a minimal accent. The primary colors are the first row as they are used to highlight main elements while the secondary colors are in the second row are used for mostly background.

Fig. 5.4 Final Art Direction

3) Overall Content
We also included a gamification aspect to make the game more engaging. This is the storyline we finalized on:

The experience follows a kid celebrating Merdeka (Malaysian's independence day) in the 80s/90s where technology is not a thing. This gives a more personal connection to Malaysia’s heritage

On Merdeka day in the 80s/90s, a kid wears traditional attire (Station 1) then goes to the Merdeka parade (Station 2) to watch the celebrations. He then goes home to play street games (Station 3) with his friends and family. Later in the day, they cook then food and eat (Station 4). After, they settle together and do arts and craft (Station 5). The day/ experience ends with watching fireworks.


Fig. 5.5 Final Storyline with Gamification

4) Interactions
We came up with the main interactions, keeping the gestures as simple as possible so it would not confuse users. 

1. Tap
2. Pinch to Zoom
3. 2 finger rotation
4. Swipe right and left (drag)


Fig. 5.6 Interactions

5) Station Content
The content for all the stations were seperated as we did for the previous tasks. We each came up with the content, found 3D assets for them, relate it back to the user personas and finally create sketches of how the content will be displayed.

The order of the station was changed later on, but this is in order of how we have done it for most of the project.

Station 1 - Traditional Clothing


Fig. 6.1 Station 1 Content

Station 2 - Celebration Performance


Fig. 6.2 Station 2 Content

Station 3 - Traditional Street Games


Fig. 6.3 Station 3 Content

Station 4 - Traditional Food


Fig. 6.4 Station 4 Content

Station 5 - Traditional Arts & Craft


Fig. 6.5 Station 5 Content

6) UI Design
We also worked on the UI design. The idea was to have it look like a post card and stamps, so it would add something interesting instead of just a boring old box.


Fig. 6.6 UI Design

7) Key Visuals
The key visuals were one of the main aspects of the final. We were told to focus on developing the key visual for one station until it was perfect and then apply the same concept for the other stations. We started off by doing a rough sketch of how each station would be laid out.


Fig. 6.7 Key Visual Sketches

As seen below the key visuals went through a lot of changes to the point me and Han nearly lost our minds. We first changed from a vector style to a more realistic style, which we constantly improved on to match the theme of our art style like Mr. Mike mentioned. I then played around a lot with the layout based on the feedback. Finally, Han and I adjusted the coloring and enhanced the perspective.


Fig. 6.8 Key Visual Progress

11) Storyboard
For the storyboard, we were advised to seperate it into layers, especially for the stations. Basically, one group of elements on one layer. We used the key visuals from the stations to make the storyboard.

Fig. 6.9 Storyboard Planning by Layers



TASK 3: FINAL PRESENTATION

We had the final presentation on 9th January 2025 (Thursday). All the final documents are compiled below.

Final Project Tracking Document

Fig. 7.1 Final Project Tracking Document - PDF

MIRO Board

Fig. 7.2 WarisanXR (Group 8) - Miro Board

Final Project Presentation
Click here for the Canva link! 


Fig. 7.3 Final Project Presentation

Final Project Storyboard 

Fig. 7.4 Final Project 
Storyboard 



REFLECTION

WEEK 1
In the first week, we were briefed on the three various clients and projects we could take on, each with a different task. We were instructed to form a group of a maximum of 7 students, and 2 students per specialization. Mr. Mike showed us examples of senior’s work from the previous semesters which helped gave us an idea of the quality of the work we would produce. There were some really innovative ideas that could be really helpful to the community if it was developed. During the lesson, Mr Mike talked about being a designer versus an artist; a designer makes the work for a client/ others but the artist does it for themselves. As a designer, we have to find ways to solve an issue, we need to listen to users and create the best product/etc.. 

WEEK 2
On the second week, we had a meeting with the CEO of TrueXR. Before the meeting we did some contextual research on our topic to familiarise ourselves a bit more of the task at hand. If there was anything we are unsure about from the brief, we wrote our questions done in a document and later clarified it with the client itself. From this meeting, our confusion was answered and we better knew what we need to do.

WEEK 3
The third week of class was focused on creating our user personas and survey questions. Since we got our interview with the client done earlier, we were able to create these before our lesson this week. We finetuned our work before showing it to Mr. Mike for feedback. Since we split the tasks between each other, I focused on creating survey questions. The feedback we got from Mr. Mike was to generalize the user personas more, and for the survey questions think of it this way - “What do you think the responses will be if we ask an open-ended question? Will the responses help us in any way or are the questions going to help our project?”

WEEK 4
In the fourth week of the module, we focused mainly on distributing the survey to get the minimum amount of responses/ until our survey reached saturation. From what Mr. Mike taught us, saturation is the point when there is enough data to draw necessary conclusions, and any further data collected will not produce additional insights or change the conclusions. Once the survey reached 100 responses and the conclusions barely changed, we distributed the tasks among ourselves. I took on the task of survey analysis which included analysing the collected data and finding the relevant patterns and trends. This made me more understanding of the opinions of the public on using AR glasses and MR experience. 

WEEK 5
This week, we got to try on the TrueXR glasses brought by the CEO himself. It was a very interesting opportunity to try on the product we will be working on for the next several weeks, especially since it gave us a hands-on experience with AR glasses. The interface of the glasses is very user-friendly and easily understandable, making it easy for first-time users to navigate. From this, I saw various 3D-scanned artefacts and experienced a virtual lion dance which made the experience quite fun. Although I do think it could be more immersive with additional features, I understand the need to keep it simple for users to understand. I also noticed that the glasses are very lightweight unlike the bulkier kinds that I have seen/ tried on before. Furthermore, during this week, we got feedback on our survey analysis. One key takeaway was to ensure that our content maintains a neutral tone and meets international standards, meaning it shouldn't cater specifically to either local or international visitors.

WEEK 6
On the sixth week of our project, we visited Muzium Negara to get an understanding of the space right after our second meeting with TrueXR. It was very interesting to learn about the history of Malaysia as well as to visually see the space we will be designing. Following our visit, we each brainstormed ideas of different categories to achieve the final outcome to be given to TrueXR - I chose to do the marketing concept. With guidance from Mr. Mike in class, we refined our problem statement and crafted “How Might We” questions to complete the define stage. The problem statement and “How Might We” is something we will always refer back to during the project. Furthermore, all our insight statements and problem statement must relate back to our three user personas as well as their needs.

WEEK 7
On Week 7, we came together to decide on an art direction that we were satisfied with - something that matches what the client wants (futuristic and dreamlike) while also maintaining history elements. We had a meeting to decide on the final color palette, as well as plan the flow of our contents and what we would like to feature. During the feedback from Mr. Mike, he commented that our journey does not make much sense and lacked a cohesive flow. It should have a theme - and it should flow based on geography, time, etc. We then went on to brainstorm again on our ideas and I came up with the thought of making it about Merdeka day, or the day when all cultures are united, instead of just showcasing one culture of Malaysia or focusing on one aspect of Malaysian heritage.  This shift made the experience more personal and nostalgic, strengthening the thematic direction of our project.

WEEK 8 & WEEK 9
There was no class on Week 8 and Week 9 due to Independent Learning Week and Mr. Mike being away, respectively. The feedback provided on the slides, presentation notes, content, and design was from our presentation with TrueXR on Week 8. We first did our presentation proposal to them and received feedback. The feedback given by TrueXR themselves is mainly about several aspects, including immersive engagement for exhibition stations, contextual AR experience in the storyboards, cohesive art direction, a smoother ticketing system, meaningful user takeaways, gamification, and balancing heritage with futuristic design.

WEEK 10
This week, we had a feedback session with Mr. Mike regarding our content. He emphasized the importance of creating engaging and interactive content for visitors. His suggestions highlighted the need to connect our storyline with gamified ideas, which had been a challenge for us. Additionally, he advised us to maintain consistency across all stations, ensuring that no station felt significantly better or worse than another. He also mentioned the importance of consistent interaction methods to enhance the overall user experience.

WEEK 11
This week was a very insightful and productive week in which most of our content was finalized - all that was left was executing the idea and bringing it to life. We focused on creating visualizations of how the content will look like. I focused on the street games station which displays all the games on a field where users can click on the one they want. After that, we had a consultation with Mr. Mike. The main thing that was brought to our attention was layering our storyboard in order for our content to be easily viewed. Another thing he suggested was to have a consistent art style throughout as well as testing and developing on one station before implementing it to other stations. This makes sure we can get everything we want right in one station which will be a guide for the rest.

WEEK 12
This week we focused on finalizing our art direction references, specifically for each layer of the storyboard. After much back and forth and us doubting our idea for the thousandth time, we settled on doing the OG kampung, jungle, retro Malaysian vibes. Once we had decided our art direction, we split the storyboard layers and began working on them. This was helpful in order for us to experiment on one station/ item before moving onto another, so one station would be perfected. The storyboard is important for us to convey our visual ideas to the client without going to the extreme length of animating it.

WEEK 13
This week we worked on our storyboard and developed our key visual for Station 4 - Food. One of the main things we did was to make the key visual as dreamlike as possible, which we spent on matching our art direction. Mr. Mike also suggested us to consider raising our models so that it would be displayed in a way that is easy for users to interact with. This insight emphasized the importance of user-friendly design in creating engaging experiences.

WEEK 14
This week, we finalized our key visuals by refining them to better align with our theme. We made adjustments to improve the perspective of various elements within the visuals. Alongside this, we began working on our storyboard and additional required content such as posters, wristbands, UI designs, and an animated map. There was a considerable workload to manage as we prepared for our upcoming presentation next week.



Comments