LIEW XIAO HUI / 0353121
BACHELOR OF DESIGN (HONOURS) IN CREATIVE MEDIA / APPLICATION DESIGN II
Final Project: Completed App
JUMPLINK
Instructions
Final Project: Completed App
Reflections
Final Project: Completed App
In
this final project, we are required to synthesize the knowledge
gained from previous tasks, refine the prototype, and develop a
fully functional and complete product experience for one specific
task flow. Additionally, we are required to create a presentation
slide that provides a brief overview of the process involved in
building the app, along with a video presentation showcasing the
product.
During the process of building the MyUMobile application using coding, I found a few minor errors. I refined these issues in the code and updated the prototype in Figma accordingly.
Figure 1.1, 1.2 Minor error.
In Task 3, I had previously coded some pages containing interactive components. However, considering the time constraints for this task and the requirement to code one complete and functional task flow, I reviewed my work from Task 3. I realized that most of the pages I had already coded aligned with the first task flow from my Figma prototype. Given the time limitations, I decided to focus on completing the first task flow, which is the "Top Up" process. To streamline the flow, I reduced the number of pages in this task flow to ensure users can log in and top up their service line more quickly and conveniently.
Final App Flow & Wireframe
Visual Asset
Figure 1.5 Animations.
The task I need to complete involves refining and adjusting the pages developed in Task 3 to ensure they meet the desired standards. Below is the list of pages that I needed to code for this project, representing the main features and task flow in the MyUMobile application, focusing on logging in and topping up a service line:
- Payment Method
- Transaction
- Bank Authentication Pop-Up
- Top-Up Successful
- Home Page (after Top-Up)
Once the refinements are made, the next step is to link all the pages together to form a complete and functional task flow.
Onboarding Page
Initially, the onboarding animation
featured a complete circular animation within a single file.
However, when I attempted to link the onboarding page to the login
page, transitioning automatically after the onboarding animation
finished, I encountered an issue. The animation did not transition
smoothly. The circle would zoom out first, and only then would
transition to the login page.
The effect I desired was for
the circle to zoom out with the login page already loaded
underneath, ready to view as the circle animation concluded.
To
achieve this, I refined the coding for the circular animation. I
separated it into two parts:
- In the onboarding file, the circle expands to fill the page and transitions to the login page.
- In the login page file, the animation starts with the circle zooming out, revealing the login page, which is already loaded and ready to view seamlessly.
This adjustment creates a smoother and more cohesive transition between the onboarding and login pages.
|
| Figure 2.1 Previous java script. |
Figure 2.2, 2.3 Refined java script.
The login form requires users to input their UMobile number and a 6-digit PIN. Previously, it was created using <div> elements, which did not allow any data entry. To enhance its functionality, I refined this part by replacing the <div> elements with <input> fields and setting the "type" attribute to "number". This update makes the input fields fully functional, allowing users to enter their numbers directly. As a result, the login process is now more intuitive, complete, and user-friendly.
Figure 3.1, 3.2 Refined html.
Payment Method Page
When the RM20 top-up amount is
selected and the "Pay Now" button is clicked, the page will
transition to the payment method page with a fade-in animation.
Based on the task flow I created, I made the last payment method
functional, but the others are not. When the credit card option
(the last payment method) is selected, the "Proceed" button will
fade in.
Figure 4.1, 4.2, 4.3 Code details.
Transaction Page
The transaction page will fade in
when the "Proceed" button on the payment method page is clicked.
If the user clicks the back button on this page, an error
prevention pop-up will appear, asking the user to confirm if they
want to leave the page or if it was clicked accidentally. Based on
the user's selection, they will be navigated to the corresponding
page.
Figure 5.1, 5.2, 5.3 Code details.
Bank Authentication Pop-Up
If the user does not click
the back button and instead clicks the "Pay" button, a pop-up will
fade in, prompting the user to switch to their bank application to
complete the bank authentication. However, since this is not a
real app, the pop-up will automatically fade out after a few
seconds, and the page will transition to the next step.
Figure 6.1, 6.2, 6.3 Code details.
Top-Up Successful Page
After the bank authentication
pop-up, the page will automatically transition to the "Top-up
Successful" page. On this page, the following details will be
displayed:
- The amount the user chose to top up.
- The date and time when the payment was made.
- The current balance of the service line after the top-up.
- The payment method the user used to complete the transaction.
Figure 7.1, 7.2, 7.3 Code details.
When the user clicks the "Done" button on the "Top-up Successful" page, it will transition back to the home page. The home page will display the updated balance amount and the next top-up due date for the service line.
Figure 8.1, 8.2, 8.3 Code details.
Netlify Deploy
After completing the coding for all the
pages, I deployed the application using Netlify. I then tested each
page to ensure that they are fully functional and that the
transitions between pages occur smoothly.
|
| Figure 9.1 Netlify deploy. |
Final Completed App
Netlify Link *Best
viewed on iPhone 14 Pro Max.*
Link to Netlify
File Compilation
Link to Google Drive
Presentation Slides
Video Presentation
Figure 10.2 Video presentation.
Video Walkthrough
Figure 10.3 Video walkthrough.
REFLECTIONS
Experience
In this project, I initially felt a bit stressed. Although I was familiar with coding from previous tasks, the limited time and the many pages required to complete the MyUMobile App task flow were challenging. After reviewing my task flow and wireframe, I decided to make some changes and refinement, not only to lighten my workload but also to enhance the user experience. I streamlined the top-up flow to make it more convenient for users who need to top up quickly. While coding the task flow, I often encountered minor errors, which I refined and redeployed repeatedly to minimize bugs and ensure a smooth application.
Observation
I've observed that coding an application or website rarely results in a perfect outcome, as performance can vary across devices, browsers, and deployment platforms. For example, my animation worked well in Dreamweaver's live preview but shifted positions when deployed on Netlify, even when viewed on the same phone. This highlights the need for continuous observation and improvement, much like the frequent updates we see in modern apps and websites.
Findings
I've realized that being a software developer or coder requires great attention to detail and precision. Even a single missing letter can cause functionality issues or errors. With the variety of devices available today, an application or website may work on one device but not another, as iOS, Android, Windows, and browsers all have their own rules and restrictions. Developers must continually refine their work to ensure it is functional, compatible, and safe for users.
Comments
Post a Comment