Advanced Interactive Design - Project 1

14.04.20 - 14.05.20 (Week 1 - Week 5)
Tamara Audrey Saputra (0335846)
Advanced Interactive Design
Project 1

---

Instruction

---

Project 1 - Interactive Application

---

Week 1 - Week 2 | Flowchart, Wireframe, Design References

In this project, we are required to create an interactive online application for an online store.

I decided to go with an existing coffee shop chain called "Janji Jiwa". As it adopts a "grab-and-go" system that seems to suit well with the nature of the app. Moreover, it seems realistic to implement it on this chain as it is rapidly spreading across the country with more than 800 stores within only 2 years.

The main function of this app is to allow users to order their drinks without having to queue. Users will pay using e-wallet and will be notified when their drinks are ready. 

This app does not cover the scope of delivery, as it means that more personnel will have to be hired. Especially, when there's already another service that does the job well.

Week 3 | Creating Assets

The assets are made in Adobe Illustrator. Below are the process of making it. Several assets are remade in Adobe Animate for animation purposes. Such as the background, buttons, and etc.

fig 1: Process of making assets in Illustrator

fig 2:Process of making assets in Illustrator

fig 3:Process of making banner asset in Photoshop

Week 4 | Animating

The animations are done in Adobe Animate. Below is the process of it.

fig 4: Creating scrolling animation for the homepage

fig 5: Animating checkout summary page

After adding the increase/decrease script for the buttons, I thought of also altering the prices as the quantity affects the price and the total price. So, I tried to use my logic, and below is the script.

fig 6: Script for increasing and decreasing quantity and prices

 The circle mask (blue circle) is made for the card in-transition and the rectangular mask (blue rectangle) is made for the hands and food animation where it supposed to sit inside the card.

fig 7: masking the animation

While animating this, at first I used the motion tween but the result wasn't like what I expected. Therefore, I decided to convert it into frames and animate it one-by-one with the help of the onion skin feature.

fig 8: Animating the assets

Week 5 | Submission

Here is the Google Drive link for the ZIP file:
https://drive.google.com/drive/folders/1yv2pGRVkF6ti9un4TzWVTf5SzBC4huUc?usp=sharing