Application Design 2

 

Kyra Binti Rizal Hamzah / 0337085 / Application Design 2 / March-July 2021

Part 1 - Collaborative Project

Week 1

Module introduction

Exercise: Use HTML & CSS and create your own portfolio website with 3 sections; Home. Portfolio, Contact. 

Week 2

This week we met up with the business and computing teams for the Collaborative Project we will be carrying out together. The client (business team) intends to create an e-commerce app for clothing, that contains a virtual fitting room for customers to pick clothes without having to physically try them on. Our class split into 2 groups to work on this - my group consisted of me, Kenny, and Hannah. 

Week 3

We created some initial user journeys and a user flowchart of the app and presented them to both Mr Razif in class and to the business/computing teams as well. 

User journeys - We came up with two as the app is intended to be usable both in a physical store as well as from home or anywhere else as a fully online shopping platform.

User flow.

After meeting with the other teams and presenting what we've done so far, we realised that we misunderstood one part of their request: the virtual fitting room. We thought that by that they wanted an AR fitting room ie. you open your camera and then the clothes display onto your body, but turns out they meant that a virtual model of the clothes would appear on an avatar created by a user. 

Besides that they asked that "enter body measurements" is moved to the beginning of the flow, and that it would be a part of the registration process for using the app rather than something you do each time you use it.

Week 4

This week we created wireframes for the prototype (lecturer feedback is marked in orange !)

After discussing with Mr Razif, we concluded that the best thing to do moving forward would be to combine aspects from my group and the other group's wireframes as having two options might confuse the business team.

Week 5

The finished wireframe can be viewed here

Week 6 - 8

The next step was for us to work on the proposal for the app. We split the work between the 6 of us using a random picker online since none of us really had any strong or weak points in this task that we knew of. 

Week 9

Last but not least, we finalised the visuals for the high fidelity prototype.

I didn't manage to get progress photos as we updated this area during class as sir gave the feedback, but all the notes on what was change is in this screenshot in red. Most things were just a matter of reorganising the hierarchy of the information but one area where we went back and forth on quite a bit was the first cart page (top left). Initially, there was no continue shopping button there. We initially felt as if we could do without it and wondered whether to have the navbar on this page or not. Yesika said that other apps she found did not have it, and I felt like if we had the navbar it could potentially cover up information / give less space for the list view of items in cart, if someone were to buy many things. Mr Razif thought that it was fine to have it as it would give someone the option to go back and shop more, but I argued that it would be weird for them to need certain options like the scan button or profile button at this stage. He said that that made sense, but it would still be optimal for the page to have some sort of encouragement to buy more, and we initially thought to remedy this with a recommended items tab but instead settled on the continue shopping button.

He didn't have much to say about the rest of the app as this portion was quite straightforward ; the only changes we had to make were to add some drop shadows to some elements, and to indent the size/color options on the product page variation section (bottom left)

Final wireframe:

Part 2 - Creating the App

There were a few things to make note of before coding the final project:

• We only needed to create some of screens designed, not all; login, the main page, the QR scanner and virtual fitting room , the product page, and a splash animation screen on launch. 
• We are free to change the colours or visual design of the app
• We are to add animations to the microinteractions. 

Before proceeding, I did make some changes to the design. 

Then, I made use of jQuery's themeroller to create the colour palette for the different screens in my app. This way made it a lot easier as if I didn't use it I'd have to {background: #color !important} a loooot of lines. !important !important !important .

Now that that was done, on to the coding!

Creating the main HTML of the app was fairly simple, especially with jQuery's grid systems. 

Landing/ log-in page.

Storefront/homepage after you log in

Product index page

Navbar (Used on Storefront and product pages) and Scanner page.

As this was just a mockup we were not required to make the scanner functional

Virtual fitting room page

The CSS was fairly straightforward as well given that the only new thing in this project that we hadn't learnt previously was the use of GSAP animations. However, using jQuery did make it a bit more time consuming as some elements already had styling built into jQuery, and it took some time to find the right class for said elements to be able to style them independently.

I have a bad habit of not really organising my code much and tend to leave everything on one line for each element ... Time to clean up!

I then split everything so that everything was easier to read and change when necessary.

The next step was to add in the animations! This was a bit difficult at first as I tried to get started before Mr Razif gave a tutorial on it, so  it was just me and the GSAP documentation. Thing is the documentation examples did it differently as a seperate file from the html whereas the initial tutorial Mr Razif gave in week 4(?) did it together within the html. I didn't think it would seem that different but there were a few other things that looked different as well that I couldn't really understand such as what to declare as a var and what you don't need to? Something like that ... 

My first attempt didn't go so well; I messed around with some lines similar to what sir showed us but for some reason my code wouldn't animate unless I created it into a timeline rather than standalone keyframes. I suspected it had something to do with the fact that my app had more than 1 page, as another issue I had was that even after creating the timelines, the animations would only run on my first landing page and not on any other pages. 

After Mr Razif gave a tutorial I learnt that the issue was that I needed to separate my pages with the line jQuery("").on("pagebeforeshow",function(event). I left my initial timelines there as my splash animation seemed okay as is. 

I wanted the transitions all across the app to be consistent so most of them similarly involved scale and opacity. 

Here's how the transitions turned out: