App Design 2: Final Project

11/12/2024 - 06/01/2025
Ng Zheng Kai 0359424
Bachelor of Design in Creative Media
App Design 2
Final Project

INSTRUCTIONS




Final Project

Improvements

After reading a tutorial I found online, I tried to input navigation bar animations to my homepage to add more life to the app, and it turns out better than I expected.

I also added another animation for the "payment confirmed" page, using CSS keyframes and JavaScript.

Navigation Bar

For the navigation bar, I used CSS keyframes animation and also used JavaScript with the aid of AI.

Fig 1.2 Navigation Bar





HTML, CSS, JavaScript Code 


Payment Confirmed



Fig 1.5 Payment Confirmed



HTML, CSS Code




Flow Map

Masterplan


Firefly Final Wireframes






Final Video Presentation








App Walkthrough



Final Reflection

Completing this project has been a transformative experience that challenged me to grow as a UI/UX designer and pushed me out of my comfort zone. This journey has been a blend of technical learning, creative problem-solving, and personal development. By applying my skills in HTML, CSS, and JavaScript, I was able to create an interactive and visually engaging app while navigating the hurdles that come with coding and design integration.

Adding animations to enhance the app’s interactivity was one of the most demanding aspects. Creating smooth transitions and interactive buttons required not just technical know-how but also patience and experimentation. Debugging and refining these animations proved to be a steep learning curve, but it taught me valuable lessons in perseverance and precision.

Throughout the development, I continuously refined the interface to improve usability and clarity. Small changes, like restructuring navigation elements and simplifying layouts, had a significant impact on the overall experience. Each improvement came from user testing and feedback, which reinforced the importance of designing with empathy and intention.

Looking back, the most rewarding part of this process was seeing how much I grew from the initial stages to the final product. What began as a daunting challenge became a stepping stone to developing deeper confidence in my coding abilities. While there were moments of frustration, each problem I encountered presented an opportunity to learn and adapt.

This project has left me with a strong appreciation for the intricacies of app development. It’s not just about writing code but about crafting experiences that feel intuitive and enjoyable. I know there is still a long road ahead, but I’m excited to build on this foundation, explore emerging tools and techniques, and continue refining my craft in future projects.

In summary, this experience has been invaluable in shaping both my technical and creative skills. The challenges I faced have only strengthened my commitment to becoming a better designer, and I look forward to taking these lessons with me as I continue my journey in app development.


Comments

Post a Comment

Popular posts from this blog

Intercultural Design

Image
Week 1 - 7 Ng Zheng Kai 0359424 Intercultural Design / Bachelor of Design in Creative Media (hons)`  Project 1, 2 & 3: Hanhaba Obi  INSTRUCTIONS A proposal to concretise ideas, supported by research, for a final design revolving a given theme that reflects students’ understanding and interpretation of global issues and design aesthetics. The general theme is “Cultural Sensitivity in Design” You are to study a cultural phenomenon, or a particular subculture that is perceived as ‘sensitive’, and “frame” your study within the chosen theme. You are to convey this cultural aspect without altering the actual facts but within a presentable interpretation and adaptation that raises awareness from the viewers. Produce some preliminary ideas on how to visually express you interpretation using design language. Each idea is to be supported by a sh...
Read more

Experiential Design: Project 1

Image
4/11/2024 - 12/11/2024 Ng Zheng Kai 0359424 Bachelor of Design in Creative Media Experiential Design Project 1 INSTRUCTIONS Ideation process: Project 1: Anatomy Educational AR App Problem : Limited access to detailed and interactive anatomical models of the human body for educational purposes. Solution : An AR-powered platform allowing users to explore and interact with detailed 3D anatomical models of the human body. Fig 1.1 Anatomy AR App Feedback from Mr Razif: Animation on 3D models showcasing how different biological systems works could be interesting but animating 3D models might be hard to do. Project 2: Furniture Placement AR Problem: Difficulty visuali...
Read more

Experiential Design: Exercises

Image
23/09/2024 - 20/10/2024 Ng Zheng Kai 0359424 Bachelor of Design in Creative Media Experiential Design Exercises INSTRUCTIONS Week 1 -Introduction to the module and expectations of the class Week 2  -Journey map group activity In this group activity, we were to come up with a user journey map on an existing place. We cam up with Genting Skyworlds Theme Park and used Miro to create the journey map Fig 1.1 Group Activity User Journey Map Fig 1.2 Miro User Journey Map Task 1: AR Animals Task: Launch google.com on your phone browser search for dinosaur or dog, cat, tiger View in 3D View in AR (Life Size) Fig 1.3 View in 3D Fig 1.4 View in...
Read more