Application Design 2

Mohamad Irfan (0326620)
28/8/2019 - 27/11/2019 (Week 1 - Week 14)
Application Design 2

---

EXERCISES

Last semester in Application Design 1, we came up with a concept for our potential app. We looked at other apps that are similar to our ideas and had to come up with a unique feature and concept that isn't common on the app store nowadays. I came up with the app 'PetTrak' and made a flowchart for the architecture of the app to a low-fidelity design in Adobe XD. After conducting a final usability test I made a high-fidelity final design.

Introduction to JavaScript

This semester I decided to continue with PetTrak as we had to build the app using HTML and Javascript with the JQuery Mobile framework and GSAP (Greensock Animation Platform). Before starting any of this Mr Razif taught us the basics of Javascript.

The basics of JavaScript such as variables, arithmetic, and logic operators.

JQuery Mobile Exercise

Mr Razif showed us how to insert the JQuery Mobile CDN into our HTML and install PhoneGap to preview our mobile app on our phone or browser. Mr Razif then tasked us to exploring the JQeury Mobile features by creating a Portfolio for ourselves.

I started will re-learning HTML and CSS and slowly built my screens with navigation, hover, styling, popups, etc.

First Attempt at JQuery Mobile

The icons weren't appearing as there was an issue so I redid it on a newer version of JQuery Mobile. This time I fixed the icons and played more with the buttons. This time I also experimented adding a hamburger menu which can be enabled by clicking 'More' on the top right and I also added swipe left to enable it as well using JavaScript.

Second Attempt at JQuery Mobile and JavaScript

JavaScript DIV Exercise

This week we learned about GSAP. It uses JavaScript to animate HTML elements and anything else JavaScript can touch. For this exercise we were tasked with having 3 Panel buttons and when clicked on will animate to that respective panel (clicking the Panel 2 button will move the panels to the left to the green panel). I also tried experimenting with GSAP timeline animation where when the 'Click to Animate' button is pressed it will start the timeline and play an animation with movement, ease in/out, and rotation.

Panel exercise

Animating Logo Exercise

This week we used GSAP to animate a logo. I decided to straight away start with animating the intro to my app. I animated each individual letter using some neat effects.

---

PROPOSAL 

As mentioned before I stuck to PetTrak which I had already designed last semester and chose to improve on it. Mr Razif showed us examples of how to show the micro-interaction and macro-interaction of a mobile app. There is no standard way of doing it but an effective way is the IX Flow. It basically describes each micro and macro-interaction by the triggers, feedback, rules, and more.  I adapted this method into my proposal.

I also made some design iterations to certain parts of my app which I know could be improved such as the Homescreen, hamburger menu, and some general UI improvements.

---

FINAL PROJECT

Below is a walk-through of the app. I did not manage to complete the sections ahead of the Homescreen but everything from registering a PetTrak account to creating and joining a Community and using Google Map API to a search an address mockup is functioning.