Experiential Design: Task 1

In our first lecture, we were briefed with the module information booklet, and have been shown our senior's past projects to know what to expect in our future projects. We were also introduced to the fundamentals of AR and UX. Additionally, there is a personalized AI chatbot to aid with this specific module which I thought was really impressive and innovative to be integrated in the learning space. The future really is unfolding in front of our very eyes... I hope it won't eventually be a replacement for human lecturers though haha.

Lecture Slides

Week 2 (1/10/2024):

In this week, we attended a lecture about user journey and mapping. And we were instructed to do a group task which was to construct a user journey map; stating the gain and pain points whilst providing solutions including AR technology.

Fig. 1.0: Theme Park User Journey Map on Figma

We received constructive feedback after we presented our journey map in class. We were informed to be wary of some templates, such as the one we used, and that not every template is fit for the content we want to fill in. Therefore, we have to adjust it to our benefit. Additionally, our strength and weak points were not clear. By using color, shapes, and other UI elements, we could make the points even more comprehensive without reading through all the text.

2. Instructions & Tasks

Module Information Booklet

Exercise 1: Extended Visualization with AR

Imagine a scenario in two places. What would the AR experience be and what extended visualization can be useful? What do you want the user to feel?

1. Grocery Store

For my first scenario, I imagined the use of AR in the grocery store. I've researched existing AR usage in grocery stores, and it is primarily used for locating goods customers are searching for and if there are any sales. In my scenario, however, the AR is integrated into a grocery app, whereby you can scan the food product to look at its information, find recipes the product can be used in, reviews, and similar items. Furthermore, you can add items to the cart as well as add them to your wishlist. The users will benefit from the convenience of these features as well as feel more satisfied with their customer journey and experience. As the users will feel more informed and sure of their purchases.

Fig. 2.0: Grocery AR process on Illustrator

Fig. 2.1: Grocery AR process on Photoshop

I worked on this using both photoshop and illustrator back and forth. My initial design was an image of a wider shot of items on shelves, but then I changed it to a close-up of the specific item I was focusing on, the Batchelor's Pasta Sauce. The design is essentially an overlay of information on top of the camera using the mobile phone. After designing the interface, I photoshopped a hand holding the phone on top of the image because I couldn't find a suitable one.

Fig. 2.2: Exercise 1 Scenario 1 - Grocery AR

2. Medicine Cabinet at Home

For the second scenario, I chose a medicine cabinet at home, something that is universally owned. I thought it would be helpful to create an AR for keeping track of your medicines; including tracking your doses, instructions, side effects, and expiration dates. The users will feel less anxious about forgetting or missing their doses, and create a sense of security regarding medicine.

Fig. 2.4: Medicine Cabinet AR process
on Illustrator 2

Fig. 2.3: Medicine Cabinet AR process
on Illustrator 1

I primarily used illustrator to work on this. I chose the color palette of blues because it's the color commonly associated with medicine, and it is comforting to the eyes. This time, I gave the textual overlays some dimension to give the impression that it is in 3d space.

Fig. 2.5: Exercise 1 Scenario 2 - Home Medicine Cabinet AR

Exercise 2: Marker-based AR Experience

We were instructed to follow this tutorial, to learn how to create a basic marker-based AR experience on Unity. We needed to install Vuforia's package and import it onto unity to start the process.

Fig. 2.6: Image Marker "Mario"

Fig. 2.6: Marker-based AR - Cube Spawn

The tutorial was very clear, so following it was relatively easy. Although it was marker-based AR at it its simplest form, I was quite pleased with the cube spawning after it detects the image marker (which I set as the video game character Mario).

Fig. 2.7: Marker-based AR - Video Spawn

After the cube, I learned how to make it so a video will spawn at the presence of the marker, ensuring that it will start and pause at the desired positions.

Exercise 3: User Controls and UI buttons

Following week 3's class, or this tutorial, we learned how to create a simple UI with user controls. We first had to make sure the mobile build (android or IOS) was running to get the mobile aspect ratios. After that, we can start building the interface with canvas, panels, and UI buttons.

Once the design is finished, and the three scenes: Menu, Start, and Credit scenes are made separately, it was time to connect the scenes together so the buttons would direct the user to the correct destination. To do that, we had to add a bit of code to the script in Visual Studio code.

Fig. 2.8: User Controls and Buttons

Fig. 2.9: VS Code Script for Menu Scenes

There are 2 different ways to do it, as shown in Fig. 2.9, one is more efficient than the other. The first is to manually type down in the code for each scene where it would lead to. The second, which is hidden and inactive, is to type the command once, and choose the destination in Unity. The second way is more efficient when it comes to an interface with numerous buttons and pages, it would be inconvenient to write it down for every scene.

Fig. 2.10: Working Menu Page with Connected Scenes

The next challenge is to control when the animation starts and stops by using the pause/play button. To achieve this, C# script must be added to toggle the animation.

Adding Animation

To make the UI more interactive, we added subtle hovering animation to the spawned 3d object using the animation panel.

Fig. 2.11: 3D Object Hover Animation

Exercise 4: Marker-less AR Experience

In this exercise, unlike the previous one, we do not need a marker for the 3d object to spawn; we only need to detect the ground/any flat surface for the 3d object to spawn.

In the Vuforia package, it has a ground emulator picture we can use to check if the ground detector works. The way to try the marker-less experience is to connect your mobile device to unity and try it using the phone's camera.

Fig. 2.12: Android Phone Connected to Unity

Fig. 2.11: 3d Object Spawn by Ground Emulator

Task 1: Trending Experience

Current AR trends:

AR enables real-time interaction between the virtual and real world through a combination of hardware, software, and sensors. AR is no longer used solely for entertainment purposes and gaming businesses as it continues to evolve and become a more practical use in our everyday lives; it is becoming increasingly widespread among many sectors, especially mobile devices, but also education, healthcare, navigation, retail...etc.

1. AR in mobile devices

Mobiles have become one of the most used pieces of technology as we carry it everywhere with us. Therefore, AR features with high accessibility are found in mobile applications. Such as, social media filters, for example. And not only is it used for gamified engagement purposes, but also for e-commerce, to help visualize products better. For example, Ikea has an AR function in its app that enables users to visualize how furniture would look like in their houses.

2. AR in simulations

With the nature of AI, that is to integrate the virtual and the reality, it becomes very useful in simulating real world environments that can be very helpful in cases where it can replace real-world contact. Such as in healthcare or aviation.

3. AR in indoor Navigation

Not only do we get lost in outdoors, but also complicated interiors such as huge malls. Using AR navigation instead of simple maps helps consumers find their way in such places.

4. AR in Education

Implementing AR in education has made the learning experience much more engaging and enjoyable for kids. For example, kids can improve their understanding of anatomy structures by visualizing them and manipulating it through AR instead of simple figures on a textbook.

AR Project Ideas:

For our project, we have to propose at least 3 ideas whereby AR is implemented. Based on my research, I've come up with 4 different ideas, two of which I've previously thought of in the first exercise.

1. AR Art Supplies

Problem: People struggle to visualize how online-purchased art supplies would look and feel when used physically, making them unsure of which art supply to choose and buy.

Solution: An AR app that simulates how different art supplies (markers, paints, brushes) look like when used. Users can visualize their use through their mobile camera facing a blank surface, sketchbook, or over an artwork.

Target Audience: Artists, students, and hobbyists.

2. AR Interactive Children's storybook

Problem: Many children's stories lack interactive elements, making them less engaging for children especially in today’s age where they are more visual.

Solution: To create an interactive AR children's storybook offering a more engaging and educational reading experience by creating interactive experiences with 3d characters and animations. Children can interact with the characters by triggering actions. A gamified quiz can be made by the end of the story to ensure the child was paying attention.

Target Audience: Children, parents, and teachers.

3. AR Medicine Cabinet at Home

Problem: Many people struggle with managing their medications which can lead to missed or incorrect dosages. This can have significant health consequences.

Solution: To create an AR app for keeping track of your medicines; including tracking your doses, instructions, side effects, and expiration dates. The users will feel less anxious about forgetting or missing their doses, and create a sense of security regarding medicine.

Target Audience: Individuals with chronic conditions or that take pills on a regular basis, and caretakers responsible for managing medications for others.

4. AR Grocery Store App

Problem: Grocery shopping can be time-consuming especially for those trying to find specific products, discover new recipes, or ensure they're making informed purchases.

Solution: By creating an AR app that users can scan products to access detailed information, including ingredients, nutritional facts, and reviews, get suggested recipes that use the scanned product, and get help to plan meals and reduce food waste. Users can also add items to their virtual cart or a wish list for future reference.

Target Audience: Grocery shoppers, home cooks, and people with tight schedules.

Proposal Submission:

3. Feedback

Week 2 (1/10/2024):

I received constructive feedback on the in-class group activity. After we presented our journey map in class. We were informed to be wary of some templates, such as the one we used, and that not every template is fit for the content we want to fill in. Therefore, we have to adjust it to our benefit. Additionally, our strength and weak points were not clear. By using color, shapes, and other UI elements, we could make the points even more comprehensive without reading through all the text.

Week 5 (31/10/2024):

I asked to consult with the lecturer regarding which idea would be best suited to choose from and he advised to go with the children book, because there's so many creative ways to go about it compared to the rest of the ideas which are more rigid and there's not many features to even work with that is related to AR.

4. Reflections

4 weeks into this module, I feel like I'm properly introduced to AR and the basics of its functionalities. I have always heard of the term, but I've never gone beyond surface level in terms of information about the topic, so studying this course is a good opportunity to get introduced to it and hopefully learn how to fully utilize it.

At first I was intimidated by the software Unity; I heard it was complicated to get into. However, when I installed it and followed the lecturer's tutorial, it was pretty simple. The interface is straightforward, and so is the coding to get basic UI/UX actions such as the menu UI exercise we did.

Search This Blog

ALTAIFI, LEEN MAAN A (0367698)

Experiential Design: Task 1

Comments

Post a Comment

Popular Posts

Illustration and Visual Narrative: Full Compilation

Illustration and Visual Narrative: Self Titled