Application Design II / Task 4
8.7.2024 - 7.8.2024 (Week 11 - Week 15)
Loke Yan Ling / 0344602
Application Design II / Bachelor of Design in Creative Media
Task 4 - Interactive Component Design & Development
Instructions
Task 4: Final Project
The pages consist in the app:
Loading page (Logo)[done]Onboarding pages 1-3 [done]Log in[done]Register[done]- Home page
- Sidebar
- Category
- Clinic Nearby
- Filter Page
- Clinic Detail
- Booking Appointment
- Appointment Confirmed
- Homepage with confirmed appointment
Fig 1.1 CSS stylesheet
Fig 1.2 Home Javascript
The homepage only left the animation, button and bottom navigation bar linking to other pages. The animate only apply on the white border, so the transform only apply on it. Javascript control and trigger the animation when came in to Homepage.
All the animation (clinic nearby, filter page and booking appointment) that have similar behaviors like sliding up in this app, I have applied with the same logic on css and javascript.
Fig 1.3 Error on background
Fig 1.4 Success javascript
Fig 1.5 Success css
I have facing issue in adding opacity background in sidebar menu. Either the opacity background cover the whole page from the start, or it just cover on the side bar. I having consult with Mr Razif and find out the issue is on the position, the screen is set fix position at first, therefore the error keeps showing.
The same logic of the opacity background is applied to the filter page.
Fig 1.6 Responsive
The fix value width of every pages has been removed only left padding and margin to make sure the pages can be responsive.
Fig 1.7 Booking Appointment Panel
Fig 1.8 Date Carousel
Fig 1.9 Time active
Fig 1.7 is the booking appointment panel, to make all of the date and time pressable, it have to control and generate in javascript, but the style of it still need to control in css. This method is being used is because there is no buttons being active at first, the active state only be triggered when the button being pressed.
Fig 1.10 Bottom navigation bar css
Fig 1.10 Bottom navigation bar toggle js
Fig1.11 Left Prototype, Right Real Page
Originally, the bottom navigation bar was planned for the home, category, and clinic nearby pages. Upon review, I found that the bottom navigation bar is redundant on the clinic nearby page. To maintain focus on clinic information, it's best to exclude it from this page.
Fig 1.12 javascript for the homepage container
Fig 1.13 homepage html
Following booking confirmation, users are redirected to the homepage. A 'confirmed appointment' container is dynamically displayed on the homepage using JavaScript. This container replaces the original content in the same HTML location. The "currentPage = 0" is preventing the page being scrolling horizontally and jumped to intro 1-3 pages. This happen before.
Fig 1.14 Simple Web Server
Mr. Razif introduced us to a tool called Simple Web Server. This platform allows us to preview our app directly on our mobile devices without the need to repeatedly upload files to Netlify. Any modifications made to the app files on our laptops are instantly reflected in the mobile preview.
Fig 1.15 File
Initially, the JavaScript code was embedded directly within the index file. However, I discovered that separating the JavaScript into a dedicated file, similar to the CSS file, proved to be a more efficient approach for managing and navigating the codebase.
Final Submission
Netlify Link: https://pet-nexus.netlify.app/
Fig 2.1 Final Presentation Video with Walkthrough
Reflection
Completing the Pet Nexus app was a transformative experience that significantly deepened my understanding of UI/UX design principles. As a UI/UX student, this project offered a unique opportunity to bridge the gap between theoretical knowledge and practical application.
The initial stages of the project were marked by a steep learning curve. Conducting thorough user research was crucial to gain insights into pet owners' needs and behaviors. Developing user personas and empathy maps helped me to understand the target audience on a deeper level. This process challenged me to think critically about problem-solving and to prioritize user needs over personal preferences.
A notable gap in my experience was the absence of animation and transition planning. While I focused on the core functionality and user interface, I recognize the significance of these elements in enhancing user experience. Animations and transitions are the unsung heroes of app design, often overlooked but crucial for creating a seamless and delightful user experience. I am eager to explore animation and transition design in future projects to create more engaging and intuitive interactions.
Overall, completing the Pet Nexus app has equipped me with a strong foundation in UI/UX design. I have developed a keen eye for detail, a user-centric mindset, and the ability to translate complex information into intuitive interfaces. This project has ignited my passion for creating meaningful digital experiences and has prepared me to tackle future design challenges.
Comments
Post a Comment