Experiential Design - Experience Design Project Proposal (Task 2)
22/10/2024 - 10/11/2024(Week 5 - Week 7)
Katelyn Tan Kye Ling (0354148)
Bachelor
Of Design In Creative Media (Experiential Design)
Task 2 - Experience Design Project Proposal
LECTURES
Week 5 - 22/10/2024
In today's class, we did:
- Pop up animations on image target and the animations can stop and play
just by clicking on it.
- Video toggle where you could pause and play just by clicking on the video
or with a toggle button.
After that we had a simple task to go home and complete.
Task:
- Add "Play" button
- Make Play button change to Pause when clicked and vice versa.
Video with all the exercises we did above:
Week 6 - 29/10/2024
This week, we learnt how to use pro builder. We create a room that will pop up
when you scan the image target. We also learnt how to put images and a button
onto the room as well as adding colour to it so that it is more colourful (Fig
1.1).
Fig 1.1 Week 6 Exercise
Week 7 - 5/11/2024 (Online Class)
For today's class Mr. Razif gave us a tutorial on figma and also some tips on how to use the platform for an AR app. He then gave us a lecture of UI animations (Notes below). Then at the end of the class, I had a consultation session with Mr. Razif.
Essential Elements:
- Instructional icons
- Animated guidance indicators
- UI Design Considerations
Transparency Techniques:
- Semi-transparent interface elements
- Glass morphism design
- Allows visibility of background environment
- Glass morphism design
- Allows visibility of background environment
Navigation Design:
- Universal iconography principles
- Recommended Design Techniques
- Use minimal, transparent interfaces
- Implement subtle animation cues
- Provide clear interaction guidance
- Consider multiple user movement scenarios
INSTRUCTION
Attempt 1: Click
here
for GlamAR Document
GlamAR
Out of all my 3 ideations, I decided to go with GlamAR as I had interest in
that topic. We are required to create a professional experience design
proposal document that explains our project idea and how will the experience
be for the user. The proposal should contain analysis of current experience,
comparison with similar solutions and how it can be better, Sketches to
visualize the experience, Mock design of how the final outcome should be from
the user’s perspective.
Thought Process:
Introduction
I started off by listing out all the things I was required to put into my
document. The information in the introduction section was already mostly done
in my 3 ideations. Therefore I just added other necessary information and
edited any text that was needed.
Research
After that, I did 3 of the user personas. I already knew my target audience
from my 3 ideations which made it easier for me to do.
Next, I did the user journey map. I first did one map before the app existed
and listed the pain points. Then I made a chart that gave solutions to the
pain points. Lastly, I made a second user journey map but an updated version.
It showed how users can use the app and what are the pain and gain points.
Attempt 2: Click here for EcoLoop Document
EcoLoop
After doing some work, I consulted with Mr. Razif about my document. He
suggested that GlamAR didn't have much depth and that the idea about the food
chain app had more depth to it. To be honest, I also felt that GlamAR didn't
have much to it, it only had one path and also the last part where there will
be highlights on the face would be quite hard to execute. After a bit of
discussion and thinking, I decided to switch to my second idea which is
EcoLoop.
I started by putting all my information from the ideations in my document like
what I did for GlamAR. So the introduction and research parts are the same
process. Same goes for the user personas and user journey map, I had 3 target
audiences so I did one user persona each.
Visualisation
I used back the sketch from my 3 ideations because I didn't really change many
things. One thing I did change in the mockup was the animation of the animals
in the food chain exercise page. I couldn't find assets that had animals
celebrating or crying, so instead I used confetti and raining gif to represent
when the user gets the exercise correct or wrong.
Fig 2.1 - Sketch
Mood Board & Reference
Before I did my mockup, I searched up some visual references of kids app UI
designs and also AR educational apps. My visual reference apps were mostly 1
toned colours with simple designs as I was afraid having too many colours
would be distracting.
Mockup
For the mockup, I used Figma. I first decided on my colour palette and
typography. I went for a blue palette as it felt more welcoming. Same for the
typography as well, I went for something bubbly and fun since this game was
made for children.
Click
here
for Figma mockup.
Fig 2.2 - Colour Palette
Fig 2.3 - Typography
Fig 2.4 - Icons
This is my mockup, there are 2 flows. One showing the correct food chain sequence animation and pop up message and the other one is when the user gets the food chain wrong.
Fig 2.5 - Mockup in Figma (Correct Food Chain Ver.)
Fig 2.6 - Mockup in Figma (Wrong Food Chain Ver.)
Fig 2.7 - Button - Micro Animations
FINAL SUBMISSIONS
Figma Prototype :
Experience Design Project Proposal - PDF:
Video Presentation:
FEEDBACK
Week 6 - 29/10/2024
- GlamAR doesn't have much depth, EcoLoop has more depth to it.
- GlamAR harder to execute (The filter on face part)
Week 7 - 5/11/2024
-Expand AR
-more dramatic/clear animation for when the food chain exercise is wrong
and right
(Maybe can add a hint or pop up telling its wrong)
REFLECTION
Experience
For this task, it tested and used my planning skills. There were many parts to the document that we have to plan out and research on. I struggled a bit at first because I wasn't so confident about doing the AR app for GlamAR as I wasn't sure how to execute it. After consultation with Mr. Razif and also some self-thought, I think that I had to let go of my first ideation even though I liked it so much. However, I fancied my second idea quite a lot as well as it had more depth to it and it can help students learn better.
Overall, I pretty much enjoyed this task especially the mockup part. The part where I had to do the button transitions and seeing the app have some "life" to it was really fun.
Observation
I find that designing an AR app is different from a normal app. The buttons have to be slightly translucent so that the background of your surroundings can be seen. Over the last few weeks, I noticed how each AR tool we learned adds a new layer of user interaction. I observed that creating AR elements in an app is not simple but really fun to learn. I hope to apply all of the tutorials to my future assignments.
Findings
These classes and feedback helped me see how important clear design and interactive feedback are for AR, especially in educational apps. Adding animations that respond to user actions, like celebrating a correct answer, improves user experience and keeps learning fun. I now plan to refine my projects with more intuitive and engaging interactions to make them enjoyable and easy to use.
Comments
Post a Comment