Application Design II - Final Project: Application

on

Week 13 - 14

Ahmad Firas Bin Ahmad Fisal | 0345121

Application Design II | Bachelor of Design (Hons) in Creative Media

Final Project

Final Lighthouse Report (Blog Cover Image)

INSTRUCTIONS


Task Brief  (Status: Completed)

For our final project, we are required to bring to life our main MVP of the redesigned app from Application I and Application II using HTML, CSS, and JS.


Important Recap:

It is important to note that our lecturer was the one who helped us determine the main MVP flow for our redesigned application to minimise the number of screens that needed to be done. Given that my app is a wireless photo printing application. It is not necessary to showcase all of my other flows for different features. I'm focusing on the Wireless Photo Printing feature by selecting and printing the photos from our gallery to be printed as instant photos (polaroids).

Blog Link: 


This is my refined MVP 01 flow from Task 02:

Refined MVP 01 Flow

And after further planning, this is how the MVP has now expanded to (to view the changes of what I've made to the project, you could click on the Task 02 link to view all of the processes of amendments and updates):

Current AD2 Project's Artboard

I've attached the prototype testing link to see what the vision is going to be like for this flow to be a complete application. 

Prototype Testing:
*Please view the prototype in full screen and click 'Restart' once if it seems laggy.


Figma Artboard, Wireframes, Prototype:



Progression and Submission:

In continuation to Task 03, where I had mentioned the inability to focus on the interactive component due to the delayed timing for us to start each task due to hurdles that we all faced as a class, to maximise the usage of my time, it is better to start with the HTML and CSS first before incorporating any Javascript due to it being the foundation of creating an application. Without HTML and CSS providing the framework of an application, it's almost impossible to continue with Javascript.

**Note

I had faced a problem with my files in terms of the whole buildup of the HTML/CSS  that involves countless numbers of trial and error making the documents now too messy for me to continue my work on. I've decided to take the big step of redoing everything from scratch with newer knowledge gained from the weeks spent of trial and error with the help of ChatGPT answering my questions and YouTube tutorials along the way.

This is the complete HTML file.



This is the complete CSS file.



This is the complete Javascript (Usage of GSAP) file:



Uploading and Deploying:

When our lecturer posted the video on how to test and upload our work accordingly before final deployment in Netlify, I followed the video and stumbled across an obstacle that is worth mentioning back to my lecturer. I told him that I couldn't manage to get the PWA symbol even with a test file of an in-class assignment that we did in class, no PWA symbol was appearing in the inspection mode in Google Chrome. 

After he had been notified of this, he further checked and found that there was an update in Google Chrome against PWA's usual policy or terms. They no longer provide the PWA symbol. My lecturer decided to post this publicly in our announcement group I've tried and found this issue, so he advised that we don't put this as a priority at the moment and just continue to aim to finish our work thus far. He told me personally that he thought it would still work because the last batch that used this method was just a semester ago (our senior).

Our submission requirement is out now, and we are required to include our;

-Application Project Files (HTML/CSS/Javascript/Images)
- Video walkthrough / Presentation of my application
- Published Link (Netlify)
- Direct link to this Final Project blog

Regardless, upon following the tutorial closely we are required to make necessary steps like ensuring that we have created a manifest file, adding an icon, service worker file, etc. I will be adding the necessary images to showcase the whole process of what we did under Uploading and Deploying. However, there will be a section after this that explains the issues that I've encountered with my own project.

1. Files that are required before uploading:-

Final Project Folder

In this folder from the top to bottom; there are a couple of different things worth mentioning. As the tutorial video that I watched from my lecturer, we are required to do the manifest file and that requires us to have the icon images as well as u can see from the third file to the eighth file. Those are required to activate the favicon that shows an icon on the application image cover or if it's a website, there will be a small icon next to the name of the site at the bar. Other than that, those are the project files such as index.html, style.css, index.js, and images.

2. Lighthouse Inspector and PWA:-

Lighthouse Inspector View

This was one of the statuses that we had to check to ensure that nothing was going wrong in terms of deploying it, which was the service worker file, apart from the manifest file. This shows that my service worker status is activated and is running.

Service Worker Status

This was my initial first time trying out the lighthouse inspector, (Issues will be highlighted in the next section after this Uploading and Deploying section). At this point, I was bumped because I had seen this was coming due to issues that I encountered with my application which will be explained further below. However, my lecturer mentioned not putting these numbers in such a great deal that affects your progress in completing the application. That calms me down a little to not feel like a failure as much. 

First Try: Lighthouse Inspection

Next, I've decided to improve what I can. If you're familiar with this inspection, they will provide u suggestions on what you can improve to increase the number of those respective categories. As you can see I've managed to make the Accessibility to be at 100, and SEO to be at 45 almost immediately. There are some things that I needed to fix in the HTML file such as determining the language, alt attribute in the images, etc. These helped with the numbers.

Second Try

However, with Performance, I had an issue because the images that I used were in super large sizes in terms of just for application making. Sir had mentioned that we should maintain lower-resolution images because applications don't require as much as making a website. However if we are choosing to lower the resolution, doesn't mean that we should jeopardise the quality of the images. A balance was needed. Besides images, there are certain design choices that I've made that were affecting the numbers such as the decision to use such an intense gradient background and the secondary darker gradient shape staying for long on those screens which made the bit load quite high. Which would normally, as with mine, make the numbers for Performance go down.

This required multiple tries of inspection as well, I had lost count but off the top of my head, the images were mostly PNGs before but it was changed to JPEG and with lower resolution numbers, this made the number increase as well, though not as much.

Multiple tries of fixing what can be fixed

All in all, I managed to increase the number from 41 to 45. I was bummed but I had no choice but to accept the numbers as I know the issues that prevail with my application required a bigger change and my biggest enemy was time. 

Post-fixing the images

4. Netlify Deploy:-

We are required to manually deploy on Netlify as part of the submission. The way it works is that we drag the necessary project folder and let them deploy it for you, if changes are required, you drag the folder again for them to deploy your latest version of work.

You can even change the site name from a random URL to a better one for you to organise your assignments, which I did. After this process was over, I decided to do the Lighthouse Inspector check again.

Netlify Page

After trying out the Lighthouse inspector again to get my latest report, My SEO numbers went from 63 up to 100. I think it has something to do with my change in URL that made it even more optimised for search engines.

Final Lighthouse Report

Below are my Audits for each category, 

Accessibility Audits

Best Practices Audits

SEO Audits

Performance Audits

Installing the application on my desktop to see the favicon in action:

Instax Share Application (Desktop View)

Installing the application on my phone to see the favicon in action:

Phone View

Issues:

- Dimensions and Responsiveness

These two are my biggest obstacles throughout this whole project. Initially, my dimensions were set to iPhone 12 Pro which was one of Google Chrome's default inspection sizes. However after I finished them, there seemed to be a constant issue of gaps appearing all of a sudden. This was when I realised towards the end that my project had a responsiveness issue. 

At first, I was fine with it because I remembered that my lecturer had taught us that adding the usual codes to ensure that our projects are responsive will always work. However, when I added them it made it even worse. I decided to gain some feedback or instructions from ChatGPT on what AI think would be a plausible solution to this issue. Even after multiple tries from GPT's solutions, it made my project even worse and out of alignment. It's as if, remaining it as it is (non-responsive) is even better looking and functional. I take the hard decision to leave things as it is for my submission and to showcase proof that I've tried to make it work but with the limited time we have left, is not allowing me to fix it accordingly. I deeply apologise.

However, I've tried the application on my phone (iPhone 11 dimension), and it was quite okay but with minor issues such as needing to zoom out to make it fit my phone the animation and transitions are still functioning despite the responsiveness issue. I have a family member who uses an iPhone 12 Pro, so I decided to try it out and see how it goes, it's a little better in terms of the gaps no longer seen but still requires me to zoom out a little. The best walkthrough that I've tried myself is by using Google Chrome's inspector with the iPhone 12 Pro dimension selected.

In the final walkthrough video, I will provide the view from iPhone 11 and Google Chrome's perspective (with iPhone 12 Pro dimensions selected) to showcase my application.


Final Submission for Application Design II - Final Project


Video presentation of the application and explanation (Combined) :



Reflection

At the start of the semester, out of the other modules conducted by the same lecturer, I immediately thought that Application Design II would be the hardest for me to cope with due to the heavy coding module outline. I was heavily disappointed at first because this wasn't what I signed up for when applying for the UI/UX specialisation. I consulted with my programme director about the reasoning and found out that their goal is to teach us front-end codings along the way so that we could expand our scope rather than just the usual non-coding knowledge UI/UX Designer. However, that is a thoughtful approach, I feel like the sudden heavy coding projects are too much to the point that I feel like I'm not learning the UI/UX aspects of it as much due to the intense workload for the modules this semester.

I was frustrated because my application wasn't responsive even after I've tried fixing it, it keeps on getting worse than letting it be unresponsive. I took the tough decision to sit this project out by not continuing to fix the responsiveness of the project because having it not responsive is more of a finished outcome than trying to fix it with the short time I have left for this semester. 

However, the overall reflection of this module is that I'm still in awe of how far I've come in this ever-growing field I'm in. I feel so blessed to have such great groupmates who help each other along the way to debug any issues. A big shoutout to ChatGPT as well. There was this one time that not even my lecturer could help me out after debugging it together only for ChatGPT to fix it in one go. I'm forever grateful for the technological advancement we are in now that aids in a better outcome.


Comments

Post a Comment