Application Design II / Final Project
14.06.2023 - 17.07.2023 (Week 11 - Week 15)
Lulu Luisa Linardi / 0349358 / Bachelor of Design (Hons) in Creative Media
Application Design II
Final Project: Micro-interactions and Animated Micro-Interaction Prototype
 |
| Fig 1.0: Thumbnail |
INSTRUCTIONS
Final Project: Micro-interactions and Animated Micro-Interaction Prototype
For the final project, students will be building what has been compiled from Project 2, the important pages of our mobile app and its micro-interactions. This will greatly elevate the user experience of the app. The aim of this task is to get the students to explore and make creative decisions on the type of interactions they would want to integrate into their app. The output of this task is a prototype that showcases the functional micro-interactions and need not necessarily be a complete app yet. However, the output must be viewable and work on smartphones.
So after finished making the animation plan for my mobile app, I started to do the layouting of my mobile app. The final pages that I will work on are 10 pages in total, which includes:
3. Login Page
4. Landing Page
5. Product Page
6. Payment Page
7. Payment Verification Page
8. Payment Confirmation Pop-Up Page
9. Payment Successful Page
10. Watch Page
I added new micro-interactions for my splash screen that wasn't proposed during the animation plan (Task 2).
Fig 2.1.1: New Micro-Interaction for Splash Screen
From the animation plan, I cut off 3 pages which are the pages after payment successful. On the payment successful page there are two buttons, one is to enter the venue (Go to Watch Page) and the other one is to back to the home page. This back to home button was actually directing the user to the same home page. However, there's an additional badge above the notification icon in the navbar. Users can click on that and see the latest notification, which in this case is to see the notice page of what we just purchased now.
 |
| Fig 2.1.2: Removed pages |
Here are the final pages which will be built into a mobile app using HTML, CSS, JavaScript + GSAP.
 |
| Fig 2.1.3: Final Layout of Beyond LIVE |
The prototype and interactions on Figma can be accessed below.
All of my HTML, CSS, and assets can be found in this Google Drive folder below.
https://drive.google.com/drive/folders/1eh7YCpd0fe49WDYZMB-IhrdRzRF8ZYPp?usp=sharing
Below here are my walkthrough video and a short presentation to explain my app and how my app works.
Turns out there's a last-minute addition from Mr. Razif. We were told to have a Progressive Web App (PWA) for our app. So after watching his tutorial video I finally get the PWA approved and installed it on my phone.
Lastly, here's the published Netlify link.
https://beyond-live-by-lulu.netlify.app/
REFLECTIONS
After a very long journey, me doing Beyond LIVE Mobile App has officially come to an end. I have been tied up with this Beyond LIVE since App Design I, so I can say that it was a very tiring yet exciting experience for me. For some reason, I got excited while working on this. Maybe because I choose to do an app that has content of my favorite artist? But first of all, I wanna thank God for allowing me to finish this masterpiece. Even though I know it's not the best out of all, I will proudly say that this is one of my favorite masterpieces. I knew I would be able to finish this well from the beginning. I think my confidence made me achieve this.
Of course, there was a tiring part when I was working on this project. I can confidently say that I'm good at designing the UI/UX part, but I won't dare say I'm good at coding :/ There were so many issues from the beginning of this final project, especially when I did the layouting. Layouting was fun, but it is indeed the most difficult part. But I was worse at animating than layouting. I might have added more micro-interactions than what I proposed in the previous task, but honestly, there are also animations that I could not make happen. I also got some minor issues when loading the animation. When moving from page a to page b, you will see an error which is the original content (unanimated) is showing for like 1 second and it will dim for a while and only then the micro-interactions will start to come out. I have looked up for the issue anywhere and even asked ChatGPT, and it says that this behavior can occur because the browser needs to load and render the HTML, CSS, and JavaScript files associated with the page before executing JavaScript code. It is said that during the loading and rendering process, the content may briefly appear on the screen before the GSAP animation is triggered. So, I guess I cannot do much about it and in the end, I left this issue out.
Anyways, it was fun building a progressive web app from scratch by myself<3