Experiential Design - Task 2

Name : Ivy Chung Ai Shin

Student ID : 0358429

Course : Bachelor Of Computer Science (Hons) 

Week 5 - Week 7 (22/5 - 5/5) 

EXERCISE 

Week 6 

In this week , we learn how to create a marker-less AR experience. In developing a marker-less AR experience , we will be applying two features which are ground plane stage and plane finder. In plane finder , we set the anchor stage as the ground plane stage and disable the duplicate stage. Then , we just add the 3D object as a child component in ground plane stage. This will allow the object to show up on when any ground platform is detected. 

In this exercise , we were asked to use furniture objects instead and display on the ground. I have went on to obtain free 3D asset which is a sofa. 

Image 1.0 - Sofa

The end result looks like this : 

Ideation Process 

Continuing from task 1 , I have proposed 4 AR ideas to create and develop. 

[ Idea 1 : AR Translation ]

Ideation :  I got the idea of using AR and translating languages in real-time. This applies mainly when we are overseas and we do not understand the language on signboards. 

Problem Statement :  Language barriers can hinder the exchange of information , cultural understanding and efficient workflow. Traditional methods of translation such as translation apps have limitations in providing real-time , context-aware translation. Traditional translation tools can often take time , requiring users to manually input or look up words. In situations such as foreign travel , signage instructions and conversation need to be understood instantly. 

Target Audience :  General Public 

Process : 

1. Simply use the application and scan the signboard with the writings
2. The AR will translate the language in real-time and overlay the translation over the language
3. Real-time text to speech

Advantages : 

• Applicable to all users
• Real-time Interaction
• Context-awareness

Disadvantages : 

• Complex 
• Google has already developed it 

[ Idea 2 : AR Automotive Identifier] 

Ideation :

Using AR , we can simply use it to help us to perform daily car inspection.

Problem Statement 

Car maintenance and repair are essential aspects of vehicle ownership, yet many car owners lack the necessary knowledge and confidence to identify and understand the various components of their car engines. This knowledge gap can lead to improper maintenance, increased repair costs, and safety hazards. Traditional methods of learning about car parts, such as manuals and videos, are often insufficient for those with limited mechanical knowledge, as they do not provide the hands-on, interactive experience needed to fully grasp the information.

Target Audience : 

• General Audience
• Automotive Industry

Process :

1. Simply scan the car the parts to be inspected
2. It will display and show the details of the parts such as the condition , information , name , etc
3. It will also show a short real-time tutorial on how to inspect / fix the parts

Advantages : 

• Useful for new car owners
• Real-time guidance
• Time efficient for learners
• Interactive Learning

Disadvantages : 

• Complex as different car models have different setup

[ Idea 3 : AR Credit Card ] 

Ideation :  Using AR , users can see the details of the credit card such as their transaction history , spending amount , etc. 

Problem Statement : 
Managing personal finances effectively is crucial in today's fast-paced world, yet many individuals struggle to keep track of their spending, understand their transaction history, and maintain financial discipline. Traditional methods of accessing financial information, such as bank statements and mobile banking apps, often lack the immediacy and interactivity needed to provide a comprehensive and engaging user experience. This can lead to poor financial habits, overspending, and difficulties in budgeting.

Target audience :

Public User

Process : 

• Simply point the camera towards the credit/debit card
• AR will display the card details 
• Users can also interact with the information 

Advantages : 

• Interactive visualization 
• Real-time financial data
• Personalized Insights

Disadvantages : 

• Privacy Issue 

[ Idea 4 : AR Music Player ]

Problem Statement : 

Music is a deeply personal and immersive experience , yet traditional music players and album formats often fail to fully engage listeners with rich stories and details behind the music. Album artwork , liner notes and artist insights are frequently overlooked in the digital age , where streaming services prioritize convenience over contextual enrichment. This lack of engagement can diminish the overall music experience , making it more transactional and less connected to the artistry and effort behind the music. 

Target Audience : 

• Public user 
• Music Enthusiast 

Process : 

1. Simply point the AR appp towards the album picture
2. AR will display the album cover consisting of the album name , details , album playing , etc 
3. The audio will also play in real-time 
4. Users can also interact with the album 

Advantages : 

• Enhanced interaction
• Immersive music experience
• Revitalisation in album art 
• Personalized Engagement 

Disadvantages : 

• Does not really bring value or impact to our daily lives

After consultation with Mr Razif , he very much liked the idea #2 on AR car automotive. He mentioned that this idea brings more impact and its applicable to all car owners who lack the unnecessary knowledge about car engine parts. With that , with this AR application , hopefully it can provide guidance and effective learning experience to perform necessary car inspection. 

The second idea that he liked was the AR album music where AR can be applied to provide more dynamic visual experiences that enhance the aesthetic enjoyment of music albums which can bring bring revitalization in album art. 

Finalised Idea [AR Automotive] : 

In the end , I have decided to go with the idea of AR car automotive. I personally find it very useful for the general public as it brings more value and impact to users. Following the document and guidelines provided by Mr Razif , I had then proceed to start researching on the details in developing this idea. 

I started off with coming up with the application name for this idea. In the end , I decided with mechARnic. I then proceeded to do project research on the product or service that I am offering to users , the target audience , and understanding from the perspective of user personas.

There are 3 user personas including Renna , Angeline and James. Each have their own background information , goals , challenges and knowledge level. 

User personas 

I also then created the user empathy map which helps to organize the user's behaviours , feelings , needs and thoughts to create a sense of empathy to better understand their concerns. With visualizing the user attitudes and behaviours , it helps better give deep understanding of the end users and reveal any holes in existing user data.

After creating the user empathy map , I proceeded to create the user journey map of day-to-day driving experience. I applied my knowledge in class from creating a user journey map and discussed on the pain point that a person can experience when driving. This allows me to imagine the scenario and think of the possibilities that a person will experience. It begins from starting the car , performing the necessary daily car inspections , driving and reaching to destination. 

From the pain points in the user journey map , it is then I had come up with proposed solutions that could possibly help to solve these problems. Based on each pain points , I have gave each a solution that my proposed application can help to solve or better assist. 

I then constructed a new journey map that writes down the gain points for each user journey scenario which comes from the proposed solutions. 

In my project research , I not just want to understand what the service to be provided to users but also the product to be provided. I went on to research about the car components especially the front car engine with its details and important notes. This is to ensure a quality of the application a user will be experiencing.  

Visualisation 

Before building the application , it is an essential step to process the overall flow and structure of the app. I first constructed the user flow diagram that will better help to explain how the application work and flow in user interaction. 

Then , following , the user flow diagram , the wireframing of the app is also constructed to portray the layout of the application demonstrating the interface elements. This overall provides a clear overview of the app structure , layout and interface elements.

The app mockup is built using Figma to show the application interface. In Figma , we are able to construct the components such as the button , icons and etc.

This first page of the mockup consists of the onBoarding and the main screen of the application. Users will start off from taking picture of their car to allow the application to identify the car model and brand. From there , the main screen will display a 3D model of their car and also display the conditions of the car parts from the inspection done. As for new users , it will not show anything.

The second page of the mockup shows the inspection screen. Users will come into this page if they want to do car inspection. They will first see a top view of their car in blueprint and then select which part of their car they want to inspect.Users will just have to click on the part of the car to be inspected , it will open their camera. When directing the camera to the part , it will overlay descriptions and name to help users to identify as well as determining the condition. There will be a short tutorial on how users can perform simple inspection on the part such as oil dipstick , filling the car radiator , etc. 

The third page of the mockup brings them to the roadside assistance. This is to help users in the situation of a car breakdown. It shows them a list of roadside assistance depending on the situation. For instance , users can direct the camera to the flat tyre and it will show a realtime tutorial on what they should do. 

Color Palette

This is the color inspiration that represents a futuristic and modernistic color style. Using a futuristic color scheme aligns with the high-tech nature of augmented reality and also the the advancement in automotive technology. The futuris and modernistic color palette captivate users with sleek , vibrant visuals such as neon blues and striking purple with metallic shades to create and engaging interface.

In the end , this is the finalized colours that I went for which is a cohesive , modern color palette consisting of neon green , purple and shades of dark blue.

Typography

Gugi 

Regular 

The logo was made from this font - Gugi. Before deciding on a font for the logo , I have searched for fonts that represents futuristic and modern aligning with the theme and concept. Personally , this font stands out different from the others and made a unique visual.

IBM Plex Mono

Bold

This is the font used for text in the application. IBM Plex Mono is a monospaced font which means each character occupies the same amount of horizontal space. Thus , this uniformity enhances readability especially in the technical contexts. IBM Plex Mono also gives off a modern look with a high-tech appearance that aligns with the concept of this application. Specifically , the bold font is applied to ensure better visibility in the application especially overlaying in the camera over the objects.

MoodBoard

This first moodboard provides the UI for the application. It offers the futuristic and modernistic style which is what gave me the inspiration to go for this concept style in the end. These inspirations mainly came from EV car applications that can be similarly applied in my project idea.

This second moodboard shows the inspirations for the Augmented Reality part. I also got the colour idea which is  neon green to be applied into the app. From the inspirations , each of the engine parts are highlighted or traced to allow users to easily identify each of the parts while also showing the overlaying description for each of the parts.

AR Document Proposal 

AR Proposal Presentation 

AR Proposal by IVY CHUNG AI SHIN

AR Proposal Presentation

Reflection 

In this design prepration process , I have explored many ideas that we can actually do with AR. However , the idea that was found interesting to me is how we can use AR to do car inspection. I particularly find this idea very valuable and impactful to users especially users who have the lack of knowledge in understanding their car parts. I , myself have also understood even better in car inspection throughout my research. Additionally , I have came to understand the importance of user experience such as the user needs from constructing the user journey map and empathy map. From there , it has helped in the designing process to make the application a simple and intuitive interface. Clear instructions and visual cues are essential to guide users who may not be familiar with car mechanics. I also want to thank Mr Razif for the great advice in how I can build this application following the module submission period.