Application Design II: Task 3

13/11/24 - 13/12/24 // W8-W12

Mercy Chong HuiZiun // 0360929

Application Design II // BDCM
Task 3: Interactive Component Design & Development

This may contain: two colorful flowers with stars on them in the sky and one has a face that looks like a bird

Instructions

Fig 1.0 Module Information Booklet 
Task 3: Interactive Design Components

Task to-do
To choose 6 components from the app in task 2 and further animate them by using HTML/CSS/JavaScript.

Here are my chosen components to be animated on different screens.
  • Onboarding screens
  • Loading Screen after signing up
  • Bottom navigation bar
  • Verification Code Pop-up screen
  • Home Page CTA buttons (Search routes, Select)
  • Lifestyle image carousel 

Progression

1) Bottom Navigation Bar
Software: Adobe Dreamweaver 
Fig Coding progression in Dreamweaver

Used the 'Inspect' function on browser to have a better view on how will the overall layout would look like + which line my error occurred so it's pretty helpful.

Fig 'Inspect' tab in Firefox 


CSS/Java Issues
The main issue for this bottom navigation bar is that the circle indicator wasn't aligned with the active navigation as shown below.  

Fig Troubleshoot coding issues

Final Outcome

Fig Final Bottom NavBar video walkthrough


2) Verification code pop-up screen 
Fig 'Create Account' button to trigger the pop up screen

Fig Verification Code pop-up screen

Fig Verification Successful pop-up after clicking the 'submit' button



Final Outcome 
Changed a bit of the layout and added some subtle animations too. And here's the final result of the verification pop-up screen.

Fig Final Verification code pop-up screen walkthrough


3) Loading screen after signed up 
For this one it's the easiest out of the rest as it mainly involves with the circle enlarging animation and then a short text to notify users that their account is now ready to go and use the app.

Fig Circle animation with a short text

Fig Javascript coding of the loading screen 


Final Outcome 

Fig Final Loading screen animations walkthrough


4) Onboarding pages screen
Now this one is the hardest in my opinion among all of the other components. With my limited knowledge + limited time there's a lot of trials and errors for this one and even though the end result (which you'll see below) doesn't really look like how the Figma prototype is but it's really all about improvising your own work.


Version #1
Just typed in the HTML and trying to organise the layout using CSS styling. Was a bit confusing as the first onboarding page went missing and it only displays the second page.
Fig Messy onboarding screen layout 

Version #2
Now that the messy layout is done organised, the next interactive issue is unable to switch to the next onboarding page after clicking the "Continue" button. 

Also, I wanted the circle below to be like my prototype where after transitioned to the next page it'll go upwards and the curve goes downwards so I did a few attempts to make the transition work on both the onboarding container and also the circle.

Fig MyRapid PULSE onboarding screen page

Version #3
After the attempts of trying to animate the circle, it still doesn't work the way I wanted the page to be. Had to readjust the max height and width for this because it's a phone app. 

On the brighter side the "Back" and "Next" buttons can be hovered in color and is also clickable to the next page! So functionality wise it's a usable page and buttons just needed to adjust the layout styling. 

Fig Onboarding screen issue layout

Version #4
Redid the whole layout and the Javascript after failing to correct the styling. Here's the changes I've made on this current and latest version.
  • Bigger buttons for better visibility.
  • Adjusted background color.
  • Fixed circle's border radius.
  • Added pagination icons.
Issues
  • The next few page contents are not hidden and can be seen at the bottom of the circle.
  • The "Welcome to" heading text is not visible.
  • Unable to transition the pagination icon according to the active page.
Fig Current version of the onboarding page screen

Final Outcome

Fig Final (to refine) Onboarding screens walkthrough

Didn't get to perfect the onboarding page as I didn't have enough time (as seen in the video). Will be refining this page for my final project.


5) Lifestyle section Image Carousel

Fig Early stage of the image carousel section


Fig Dreamweaver + Inspect browser tab combo 


Final Outcome 

 
Fig Final Image carousel (Lifestyle section) walkthrough   


6) Home Page 
For this part, it wasn't as confusing at first but eventually I struggled with the CSS layout and again, the interactivity of the buttons so I also did some retries as well.

Issues/To fix
  • Gradient background line breaking
  • No hovering effects on the buttons
  • Contents all in one small container, need to remove or else it looks like a pop-up screen
  • Max width/height to readjust into phone screen size
  • To better styling on the whole layout
Fig Early stage of the home page layout

Fig Added dropdown menu + "Select" button after clicking the transportation options button

Added an enter button to proceed with the transportation options in dropdown menu form. Still need to adjust the layout sizing.
Fig Added enter buttons
Fig Further adjustments on the home page layout

Final Outcome 
 
Fig Final Home page button layout walkthrough

Another component that I didn't really get to perfect it on time hence it explains the styling of this page + dropdown menus are still looking inconsistent. Will be refining this too for my final task project.
Reflections

 
























Email Post

Popular Posts