Application Design II - Task 2 : Interactive Design Application Animation Prototype
Week 1-Week 14
Tan Pei Yun / 0345386
Application Design II /Bachelor of Design in Creative Media
Task 2: Interactive Design
Gong Cha App Animation Prototype
|
|
Task 2 - Application Design - Interactive Design App Animation Prototype |
Task 2 here I come again , where this time we have to plan how's the
interaction could be applied into our own app , at first I thought it
was quite limit for me where I feel there's nothing much for me to
animate after Mr Razif show some of his work along with one of our
senior previous animation prototype, Mr razif also recommend us to search and look
into Youtube where we could dive into what can be done in Figma with
micro and macro interaction.
After reviewing the senior's blog, I realized I might be taking a
different approach. For me, it didn't make sense to start planning and
writing the app flow first without a clear understanding of how Figma
interaction works. In my case, I prefer to dive into Figma first, figure
out how the interactions can be implemented, and then proceed to craft the
overall app flow and storyboard. This way, the idea and direction become
clearer in the process, therefore let's get the things DONE !
Figma Progress
There will be different section and pages that I have planned to animate it and also some with design interaction in either micro or macro , There are :
1. On-boarding
2. Splash Screen
3. Registration
4. Home Page
5. Menu - Customisation
6. Check Out
7. Track Order
8. Delivery Status
9. Profile
10. Rewards
Add on : Navigation Bar
This 10 section will be written and note down the progress and some failed attempts that I have tried and overcome it along with some tutorials that I find it useful
1. On-boarding Progress
At first attempt, I was confused why some page transition so fast and so
bouncy which looked not pleasing and unsatisfied. This is where I get to understand about how's the "ms" works where In
Figma prototypes, "ms" stands for milliseconds which indicates the duration
of a specific animation or transition. After knowing the concepts, I get to
know how to control it and the outcome have turn become better.
.gif)
|
|
Attempts #1 - Bouncy & Failed results |
After delays : 100ms
Smart Animate - Bouncy : 800ms
Smart Animate - Bouncy : 800ms
|
|
|
At first attempt, I was confused why some page transition so fast and so bouncy.This is where I get to understand about how's the "ms" works where In Figma prototypes, "ms" stands for milliseconds which indicates the duration of a specific animation or transition. After knowing the concepts, I get to know how to control it and the outcome have turn become better, below are the results :
.gif) | |
|
After delays : 600ms
Smart Animate - Gentle : 900ms
Smart Animate - Gentle : 900ms
Here's the comparison after adjust the effect along with the milliseconds , what i have adjust is the effect from bouncy to gentle , and from :
 |
| Progress : On-boarding Animation Pages |
.gif)
|
| Comparison Between & After |
Now i think it had become better and looks more "natural" and more pleasing
looking which can moving on to the next splash screen part.
Interaction Used :
-After Delays
-On Click > Navigate To > Smart Animate > Gentle
2. Splash Screen
While scrolling through youtube and search for some inspiration that can be applied to Figma, I find that this gave me idea of having some boba tea drink effect , where's there will be a liquid progress from the bottom of screen filled till the top
Sample of Splash Screen Animation Tutorials
It was a sudden idea to add splash screen to the figma, where I think that having splash screen able to provides and showcase the app's logo and reinforce brand identity, which able to leaving a lasting impression on users as they move from the onboarding stage to the registration page.
And also can add and creates a smooth transition effect, giving users a momentary pause between onboarding and registration. This brief interlude enhances the overall user experience by preventing abrupt shifts and allowing users to mentally prepare for the next step.
 |
| Progress : Splash Screen Animation Pages |
.gif) |
| Result of splash screen turns out |
The splash screen link from on-boarding > splash screen > registration , therefore there's a connection from each other. These are the interaction that I used :
After delays : 1ms
Smart Animate - Slow : 300ms
Smart Animate - Slow : 300ms
Smart Animate - Linear : 300ms
3. Registration
After the splash screen which be linked to the registration page , To demonstrate the sign up progress, I making it to a mouse hover effect to see how it will be roughly turns out ,once user fill in the details, user able to interacts by clicking the "Create" button and a transition effect will occurs and direct to home page
 |
| Progress : Registration Animation Pages |
.gif) |
| Result of registration page |
Section of input fields like email , password and confirm password will slide in from the left along with the "Create" button that will slides in from the right .Section of “social media” account will slide in from the bottom
After delays : 800 ms
Smart Animate - Ease In: 300ms
Smart Animate - Ease In: 300ms
Mouse Enter - Dissolve - Ease In : 300ms
Smart Animate - Ease Out : 300ms
4. Home Page
Looking back to the GongCha app, I noticed that I incorporated a significant amount of the quantity selector feature which allows users to easily adjust the number of boba drinks they want to order. I found this aspect interesting, following the tutorials , it was easier than expected and the outcome turned out to be both cool and enjoyable.
Sample of Add & Reduce Animation Tutorials
 |
| Progress in add & reduce in Figma |
Following the tutorial steps where need to create Variants to Hover Effects and keep duplicate the component and adjust the number 1 to 2 to 3...... and create the same hover effect and time to do some math where need to link to each other.
 |
| Progress : Home Animation Pages |
.gif) |
| Result of Home page turns out |
The outcome of home page, there will be multiples animation happening in here, where it goes section by section. There will be some micro interaction able to interact in home page, for instance user able to scroll “what’s” new and “category” .
After delays : 800 ms
Smart Animate - Gentle: 800ms
Smart Animate - Gentle: 800ms
5. Menu > Customisation
In customisation, I designed the interaction where image slides down onto the screen, customisation buttons are revealed row by row, with the initial row smoothly emerging from the left. A panel appears at last from the bottom, displaying options for "quantity" and "add to cart." Same as well , user able to adjust the quantity to order how many drinks they want
 |
| Micro Interaction - Buttons in customisation |
To enhance a better UX experience, I did a variables in the buttons where user able to click the buttons and it will change the buttons colour into a red colour shape and text will be turns into white. Not only that love shape that represent "favourite" icon will able to turns into filled love shapes
 | |
|
 |
| Progress : Customisation Animation Pages |
.gif) |
| Result of Menu page turns out |
After delays : 500 ms
Smart Animate - Gentle: 800ms
Smart Animate - Gentle: 800ms
Smart Animate - Ease Out : 300ms
6. Check Out
Progress of check out which is the section of order summary is something that I am not sure what else interaction I able to add in, I planned to present in section by section (slide in) effect which gave some "uniqueness" to it ? This is the most simplest and direct way to showcase the interaction.
 |
| Progress : Check Out > Order Summary Animation Pages |
.gif) |
| Result of Order summary turns out |
After delays : 500 ms
Smart Animate - Gentle: 800ms
Smart Animate - Gentle: 800ms
7. Track Order
Another interaction and animation I really enjoy working on is the "Track Order" feature. It includes a cool illustration of a takeaway paper cup that slides into the packaging. After showcasing the paper cup, it displays the text "Payment done" before moving on to the next step, which is "Tracking".
 |
| Progress : Track Order Animation Pages |
.gif) |
| Result of track order turns out |
I have showed this result to show of my friends, they give me feedback like with ":O" wow , so I think is consider as a positive feedback , and able to move on to the next page
After delays : 300 ms
Smart Animate - Gentle: 800ms
Smart Animate - Gentle: 800ms
8. Delivery Status
For delivery status, this is where I create screen transitions at first, where it will be fade in an Illustration of map and panel to the screen, Text and content fading in collectively from the bottom and then sliding up individually. Below you can see the results where some of the buttons with icon will be at a group first and separate individually
 |
| Progress : Delivery Status Animation Page |
.gif) |
| Result of Delivery status turns out |
After delays : 800 ms
Smart Animate - Gentle: 800ms
Smart Animate - Gentle: 800ms
9. Profile
Lastly for profile and reward page, since is having a minimalist and direction design therefore the interaction had planned to do something that is more "direct" too, when user clicked the profile icon in navigation bar , it will be appear in fade, and noticed closely there's a subtle pop-up effect occurs to the buttons from group and separate individually
 |
| Progress : Profile Animation Pages |
.gif) |
| Result of profile page turns out |
After delays : 800 ms
Smart Animate - Gentle: 800ms
Smart Animate - Gentle: 800ms
10. Rewards
Same as well for reward page ,when user clicked the voucher icon in navigation bar , it will be appear in fade, screen transitions will be occurs, the cards slide in from the top with the Section of mission rewards slide in from the right where user able to scroll with , and last the Coupons slide up from the bottom to the screen
 |
| Progress : My RewardAnimation Pages |
.gif) |
| Result of splash screen turns out |
After delays : 500 ms
Smart Animate - Gentle: 500ms
Smart Animate - Gentle: 500ms
Navigation Bar
During the first design of Gongcha app in Application Design1, there's nothing wrong or right in previous navigation bar in terms of the refined colour version, however, Mr Razif remind us this task is more focus onto the interaction and animation along with the effect, therefore I decided to change the design again into something interesting that able to interact with. I try to look some tutorials to help me again for some ideas , and find it interesting where navigation bar able to try to do into some like this :
Sample of Mobile App Menu Animation Tutorials
 |
| Navigation Bar Changes Made |
I decided to change the navigation button design into like this, where there will be round ish shape along with the icon and once user click any button it will gaves a smooth slide effect into either left or right , below there's a result to show how it will looks like :
.gif)
And yuppp I like how it turns out now and it gaves a different and fresh feeling to the app again and able to compile all the interaction and moving on to the next stage of App Flow of master plan and storyboard
 | ||
Overview of all pages of animation prototype in Figma
|
App Flow
After make sure all the interactions I planned are good to go, I understand better what I've done on each page. This makes it easier for me to write down important details. Starting on master plan first and move on to storyboard. In app flow will be covered :
1. MasterPlan
2. Storyboard
2. Storyboard
1. MasterPlan
-Mirco and Macro Interaction
Earth Tone Pink : Macro
Yellow : Micro
 |
| #1 App Flow - Onboarding Progress |
 | ||||||||
|
To conclude :
Macro Interactions
- Transitioning between major sections such as onboarding, splash screen, registration, and various pages (e.g., live order, menu, order summary).
- Changing between delivery and self-pickup options on the live order page.
- Popping up a panel when clicking "ASAP" on the menu listing page.
- Overall navigation, including clicking on the navigation bar buttons to proceed.
Micro Interactions
- Scrolling through the categories of drinks on the menu listing page.
- Clicking and choosing delivery or self-pickup on the menu listing page.
- Adjusting the quantity using the quantity selector.
- Various button animations like the "Track Order" button popping up subtly.
- Pop-ups for special remarks, packaging options, adding vouchers, and payment details on the order summary page.
- Navigation Bar buttons animation
 |
| Final Master Plan Interaction App Flow created in FigJam |
2. Storyboard
The storyboard i have written down the important details of each page process during enter , on page and also exit where this is from doing the interaction in figma first and written take note in the storyboard.
 |
| Storyboard of GongCha App created in FigJam |
|
| Final Interactive Design Master Plan & Storyboard |
Progress in Editing
|
|
Editing Progress in Capcut
|
|
| Editing Progress in Capcut : Look at the layersss |
After done the editing, it was soooo satisfied to too the outcomes with all the video layers and ready to submit and upload to Youtube.
Final Task 2: Interactive Design
Gong Cha App Animation Prototype
Final App Design II - Task 2 : Animation Prototype Presentation
Final App Design II - Task 2 : Figma View Link Prototype Presentation
Link : Figma-View-Link
Final App Design II - Task 2 : Animation Prototype
Link : FigmaLink-AnimatePrototype
Reflection
Initially, when I saw examples from previous seniors, I felt a bit lost and didn't know how to start. I looked at my GongCha app and thought there wasn't much to animate, making me worry about finishing the task on time. I thought my design was very simple, which might make creating interactions difficult. However, after watching more tutorials on Figma on YouTube, I realized there are actually many things I can do to make it more interesting. This task have thought me alot, where I think I know some fun interaction can be done in using figma , this sem have learnt deeper about Figma and able to apply alot not only in this application design 2 module but others module as well. Of course have to trust myself abit more, work can step by step that can reduce the anxiety better. Alright , I hope that I can do well in the last task of this application design which have to met the very last monster "CODING". While it may seem like the ultimate monster and sounds tough, but I believe I can use what I've learned to tackle it (hope not to do with tears) so YUPP ! LETSGO.
Comments
Post a Comment