EXPERIENTIAL DESIGN - FINAL PROJECT

-

Week 1 - Week 14

Phoebe Ansel (0340165)

Experiential Design

Final Project 

INSTRUCTIONS
Proposal 

For our final project, we were asked to come up with an AR app that will serve a purpose / solve a problem. I came up with two ideas. 

My first idea was to come up with an app for safari ride visitors. It is impossible for visitors to get out of the car to read information during safari rides, therefore they aren't able to learn much about the animals. The idea was to have users scan a code and explanations and fun facts of the animal will show up. 

My second idea was to create an AR storybook app that will bring the story characters to life will help children visualize the stories more clearly and keep them interested to continue reading.

After presenting my ideas, I decided to go with the Storybook AR app. This is my proposal slides:

 
After presenting my proposal, Mr Razif said that it would be better for me to create the animation in unity and make it 'pop up' instead of having the animation play 'flat'. 

Storybook Design 

First, I started by designing the pages for the storybook. I chose 'Little Red Riding Hood' as the story and created 2 pages of the story. 

storybook design process

Audio 

Before I started animating, I also created the audio needed for my animation. I recorded my own voice and edited it in audition to make it sound more 'child-like' and added background music and sound effects as well.

audio editing process on audition

Animation 

I needed my animation assets to retain their layers for animating. However, I realized that unity only accepts PSB files (photoshop), so I also created the character and assets that I needed for the animation in illustrator, then exported it to photoshop to save. 

other animation assets on photoshop

the character for animation on photoshop

I then imported the assets to unity. I was quite confused because the color of my illustrations looked a bit different in unity than in photoshop and illustrator, but it wasn't too different so I didn't bother fixing it. I watched a few animation tutorials on youtube to help me understand the animation process on unity.

This was the tutorial I watched to animate my character movements. 

 

I then created the skeletal structure for my character in unity using the sprite editor. I struggled with it at first because I had to carefully choose the particular areas that will be affected by each 'bone', and also edit the 'weight' to make the movements look natural. 

skeletal sprite editing process on unity

I also realized that if I wanted my character to be able to 'talk', I would have to create a separate file for the mouth shapes. 

I found this 'blinking animation' tutorial on youtube and tried to apply the same method for my mouth movements.

 

Then, I started to animate my character according to the sound, and I tried to match the animation to the sound as accurately as possible so that the mouth movements and vocals will match.

The animation process was very stressful for me, as the skeletal structure was quite difficult to work with, due to its sensitivity. Every single bone movement would always affect other parts of the body, even when I didn't need that part to move. So for every tiny movement that I made, I would also have to fix every other body part to make sure nothing looked out of place. 

Animating the mouth was also very challenging because I had to match the timing with the sound and also study the mouth 'shapes' a character would make when they pronounce certain words or letters.

animation process in unity

I ended up doing a 40-second animation. This is the screen recording of the animation in unity (and I also added the audio to the recording) :


Results

This is the app mockup:


This is the storybook I designed for the target image:


This is the app walkthrough:

Comments

Post a Comment

Popular posts from this blog

Professional Developement Week

-
REFLECTIVE REPORT As this semester is my final semester, it was compulsory for me to attend  6 workshops or webinars during Professional Development Week. All the webinars I attended were very insightful and meaningful, and I learned a lot from them. Here are some of my key takeaways. I joined 3 different webinars on the first day, the first workshop I attended was the " Financial Literacy for Fresh Graduates " workshop by Maybank. This webinar taught me so much, including the budgeting rule, which states that individuals should split their money 50 percent on needs, 30 percent on wants, and 20 percent on financial goals. Furthermore, adhering to a budget plan is critical for tracking spending prior to generating the budget. Maybank also assisted me in gaining a better understanding of some of the elements. The first is Investment Preparation, which entails self-assessment and the creation of emergency reserves while understanding risk tolerance. The second section is Steps ...
Read more

APPLICATION DESIGN II - FINAL PROJECT

-
Image
Week 1 - Week 14 Phoebe Ansel 0340165 Application Design II Final Project  INSTRUCTIONS     Final Project For our project, we had a collaboration with the business school and IT school. We were tasked to create a mobile app for the business school. They wanted to create a virtual fitting room app that would allow users to see how the clothes would fit them virtually so that wouldn't have to try them on. We were first divided into 2 groups to work on the user flow, user journey, and wireframe.  We did our work on miro: We then had a meeting with the business school students and made changes after receiving feedback from them. After doing the user flow and user journey, we started working on our wireframe. The idea was for both teams to create wireframes and then choose and combine them together to create a better version of it. my group's wireframe We had a meeting again with the business students and also showed Mr Razif our work, he then chose which elements ...
Read more

TYPOGRAPHY - FINAL PROJECT

-
Image
30/10/19 - 20/11/19 (Week 10 - Week 13) Phoebe Ansel (0340165) Typography Final Project LECTURES INSTRUCTIONS PROJECT Week 10 For our final project, we were told to create protest placards  about our belief about design and society. We had to bring a 5-7 foot long stick, a A2 size cardboard, some markers or paint, newspaper, and chinese ink. I decided to use the phrase "Design is Empowering, Enlightening, Endless" fig 1.1: sketches for protest card fig 1.2: final design of my protest card  Week 11 This week we were told to create posters by digitalizing our previous protest placards. We were told that the design does not have to be exactly the same. We were also told to use the given typefaces. I created several designs for the poster. fig 1.3: screenshot of my illustrator artboards (initial ideas) Week 12 After showing Mr Vinod and Mr Shamsul the designs, I decided to choose and improve the first poster I created. This is the design I c...
Read more