Collaborative Design Practice - Task 3

4 June 2024 - 18 June 2024 / Week 7 - Week 9
Leem Sejin / 0362419
Design Exploration / Bachelor of Design (Honour) in Creative Media
Task 3 - Prototype

---

INSTRUCTION

<iframe allow="autoplay" height="480" src="https://drive.google.com/file/d/12P0xowiyM-Yup8_LGiqdtodLsIAq_7A9/preview" width="640"></iframe>

TASK

Week 7

During the prototyping, me and derin are in charge of the pitch video. As we are doing animation, we worked with the background , character and props in the adobe illustrator, and animate it in the after effect. We asked Glen and Adifa ( entertainment design students) to vectorising the elements.

Progression of vectorising the background

First, I tried with the same colour palette that we choose for app design for the consistency, but we find that the orange colour is too strong. We continued to explore different colour script to find the suitable background colours.

Fig 1.1 first attempt bathroom

Fig 1.2 first attempt office

Fig 1.3 colour script exploration

First draft of the vector

Fig 1.4 first draft of the scene

However, we found that the background colour is too strong, and the character is not stands out. After the feedback, we decided to change the colour tone to monotone. I take the homeowner parts for further exploration.

Toilet scene

Instead of using the tile texture, I manually create the tiles pattern because the tile pattern that we used are too realistic and not fits to our overall visual.

Fig 1.5 second draft of the toilet

Office

As similar reason to the toilet scene, I created the background into brick pattern.

Fig 1.6 second draft of the office

Ver 2

Fig 1.7 final vector image

We find that the overall mood is improved, and we decided to work for animation

Week 8

Animating the pitch video

Before proceeding for the after effect, i divided the vectors into different layers for easier animation.

Fig 1.8 Diving into layers

Scene : toilet

Fig 1.9 animation of toilet scene

For the toilet scene, i animated on character's arm for brushing teeth, and a little bit of eye blinks.

Scene : office

Fig 1.10 animation of office scene 1

Fig 1.11 animation of office scene 2

For the office scene, there is a head banging due to the frustration, so i need to find the way to animated the character's head. Thus, i utilise the puppet tool, and rotate the neck angle slightly and make a smooth transition to character head banging.

Scene : computer

Fig 1.12 animation of screen 1

Fig 1.13 animation of screen 2

I zoomed in the screen of the computer, and play with the scale and opacity to make it like website pop up. Also, I think that adding the glitch from the website to the blue screen is more appealing, so I searched in the youtube for the tutorial.

Scene : hit the table

Fig 1.14 animation of hitting the table 1

Fig 1.15 animation of hitting the table 2

Adding transition

Fig 1.16 transition 1

Fig 1.17 transition 2

After compiling the all the animation, I find that it is boring and weird when moved on to the different scene. Thus, I applied motion blur and swipe animation using the wavy lines as the transition.

The reason of choosing the wavy transition is to show the water splash from the toilet bowl. 

Compilation of the home owner side

Fig 1.18 compilation of homeowner side

Week 9

I received app prototyping from Takuto, and record down some of the features to showcase in pitch video.

I speed up the scene, and created the vector image of phone and apply mask to fit into the vector

Followed by messaging part, I re-created the message box from the app prototype, and adjust the scale and opacity to give pop up.

FINAL SUBMISSION

Final pitch video

Presentation slide

---

FEEDBACK

Week 7 

Colour is bit strong, maybe use the monotone or sketchy for the background

Week 9 

App design: Xie Yi suggests to not have the overview for the main page for the contractor's side
Microsite
- More emphasis on the download button (Make it big?)
- Have more clarity on the sign up and log in section as it isn't clear on the microsite
Pitch Video:
- Have the narration follow through the actions in the animation
- Some colors like the yellow for the light bulb seems out of place as it wasn't use in the app, be more creative with our palette
Billboard
- The design doesn't really tell that it is promoting an app

---

REFLECTION

The whole process was tedious for me because it was taking a lot of time to figure out the colour script for the animation. Utilising the given colour palette and producing the appealing artwork was challenging. However,  I think i worked well with group mates, especially with Derin, to update on the animation process. Throughout the project, I improved on communication skills by sharing the process, giving and receiving the feedbacks, and compare each other work and find the ways to improve the quality.