Task 02: Interaction Design Proposal and Planning For
this task, we are required to use Figma to develop an interactive
design plan for the final mobile application, incorporating both
micro and macro animations. For complex animations, consider
using Adobe After Effects or similar tools to create more detailed
prototypes.
Progress Before developing the interactive design plan
for my animation, I first took time to understand the differences
between micro and macro animations. Macro animation: - Page transitions (e.g., slide, fade) - Loading
screens - Onboarding sequences Micro animation: - Icon click effects
I then researched existing animations on Pinterest to gather
inspiration for suitable animations for my mobile app design.
Figure 1.1, 1.2, 1.3 Research (Pinterest).
I noticed that many loading and error prevention elements were
animated, while mine were represented by static illustrations that
couldn’t be animated directly. To clarify, I asked my lecturer if I
should animate the illustrations using a combination of Adobe
Photoshop and Figma or if I should replace them with more suitable
animations. Mr. Shamsul advised that I could keep the illustrations
and use macro animations like fade-in or slide-in effects to make
them appear dynamically. After confirming the right approach
for the animations, I researched visual references from existing
applications like Maxis and Zus Coffee, as well as on Pinterest,
before starting my Figma prototype.
Figure 1.4 Maxis onboarding page.
Figure 1.5, 1.6 Visual references (Pinterest).
I also explored coding techniques online to ensure my animations
aren’t overly complex, aiming to avoid any issues when implementing
the interactive design for the final project.
Figure 1.7 Research.
Next, I reviewed previous students’ work to observe and learn from
their approaches. I noticed that they often started with an app
flow or masterplan outlining the user journey and specifying both
micro and macro animations they intended to include in their
animated prototype and interactive design plan. This made creating
the animated prototype easier by providing a clear guide, helping
to ensure consistency and alignment throughout the app’s
animations and design.
App flow/ Masterplan (Attempt 01) With visual
references and ideas for the interactive design in place, I began
creating the masterplan, detailing the app flow, focusing on the
main function/ MVP, which is the top-up feature. I used a mobile
phone mockup and placed the latest app design within it to clearly
illustrate each page in the user journey. I highlighted planned
micro and macro animations using distinct colors and styles for
clarity, and added arrows to guide the flow. Below each section, I
included explanations on actions required from the user, such as
which button to click, or automatic transitions to the next page.
Figure 2.1 App flow/ masterplan.
Next, I proceeded to create the animated prototype following the
master plan I had developed.
Animation Prototyping (Attempt 01 - Work In Progress)
Onboarding Page
Macro animation:
- The logo appears as a simple outline centered on the screen,
gradually filling with color from the bottom to the top to reveal
the complete logo. This animation is designed to align with the
click effect used for navigation buttons on the following pages,
creating a cohesive and consistent experience throughout the app.
- Once fully colored, the logo enlarges slightly, followed by a
circular animation that zoom from the logo's center, expanding to
fill the entire page.
Figure 3.1 Overview of onboarding pages.
Figure 3.2 Animation of onboarding page.
Login Page
Macro animation:
- The circular animation now zooms out, seamlessly transitioning
into the login page.
- When the "Log In" button is clicked, the login form slides up
smoothly from the bottom of the screen, aligning with the card
design on the following page. The slide-up effect is used
because the welcome message across both pages follows a similar
style, with only slight positioning differences. This makes the
transition feel seamless, as if the login form is pushing up the
welcome message on the first page and replacing it with the new
welcome message on the second page.
- When the "Log In" button is clicked, a circular animation
zoom from the center of the page, expanding to fill the entire
screen. Simultaneously, a white logo fades in, enhancing the
transition effect.
Micro animation:
- For the button hover effect, a circular animation zoom from the
center of the button, expanding until it covers the entire button
with gradually fades out, creating a smooth and interactive visual
effect.
Figure 3.3 Overview of login pages.
Figure 3.4 Animation of login page.
Home Page
Macro animation:
- The circular animation zoom out, accompanied by the white
logo.
- The header bar fades in.
- The home page content smoothly slides up from the bottom of
the screen which is consistent with the page transitions used in
the login page.
Micro animation:
- The home icon in the bottom navigation will animate from an
outline to a filled icon, maintaining consistency with the
onboarding page animation. This visually indicates to the user
that the home page is loading, and once the loading is
complete, the filled icon will be displayed.
- Usage chart will animate to reflect the amount of usage,
aligning with the user's current data usage.
- For the button hover effect, a circular animation zoom from
the center of the button, expanding until it covers the entire
button with gradually fades out, creating a smooth and
interactive visual effect.
Figure 3.5 Overview of home pages.
Figure 3.6 Animation of home page.
Balance/ Service Details Page
Macro animation:
- Still in progress.
Micro animation:
- For the button hover effect, a circular animation zoom from
the center of the button, expanding until it covers the entire
button with gradually fades out, creating a smooth and
interactive visual effect.
Figure 3.7 Overview of balance pages.
Figure 3.8 Animation of balance/service details
page.
Top Up Page
Macro animation:
- Still in progress.
Micro animation:
- The billing icon in the bottom navigation will animate
from an outline to a filled icon, maintaining consistency
with the onboarding page animation. This visually
indicates to the user that the home page is loading, and
once the loading is complete, the filled icon will be
displayed.
- When the RM20.00 top-up button is clicked, the effect will
be a circular animation that zooms from the center of the
button, expanding until it covers the entire button. As it
expands, the animation gradually fades out, and a stroke
will appear around the button, indicating that the amount
has been selected.
- For the button hover effect, a circular animation zoom
from the center of the button, expanding until it covers the
entire button with gradually fades out, creating a smooth
and interactive visual effect.
Figure 3.9 Overview of top-up pages.
Figure 3.10 Animation of top-up page.
Payment Method Page
Macro animation:
- Still in progress.
Micro animation:
- When the Credit/Debit Card button is clicked, the effect
will be a circular animation that zooms from the center of
the button, expanding until it covers the entire button. As
it expands, the animation gradually fades out, and a stroke
will appear around the button, indicating that the payment
method has been selected.
- When a payment method is selected, the "Proceed" button will fade in, indicating that the option to move forward is now available. If the payment method is deselected, the "Proceed" button will fade out, signaling that a valid choice is required before continuing.
- For the button hover effect, a circular animation zoom
from the center of the button, expanding until it covers the
entire button with gradually fades out, creating a smooth
and interactive visual effect.
Figure 3.11 Overview of payment method pages.
Figure 3.12 Animation of payment method page.
Transaction Page
Macro animation:
- If the back button is clicked, an error prevention
pop-up will appear to confirm the action, ensuring the
user doesn't click the button accidentally.
- When the pay button is clicked, a pop-up will fade in.
After a brief delay, the pop-up will fade out, and the
top-up successful page will fade in.
Micro animation:
- For the button hover effect, a circular animation zoom
from the center of the button, expanding until it covers
the entire button with gradually fades out, creating a
smooth and interactive visual effect.
Figure 3.13 Overview of transaction pages.
Figure 3.14 Animation of transaction page.
During week 07, I presented my first attempt, which was still
a work in progress, to Mr. Shamsul for feedback to refine my
animation ideas and prototype. I explained that most of the
macro animations weren't completed yet, but I intended to use
a slide-up effect for page transitions. I also shared a
challenge I faced, creating buttons hover effects frame by
frame and linking them with smart animate, which was
time-consuming and exhausting.
After reviewing my work and understanding the issues, Mr.
Shamsul provided valuable suggestions. He advised against
using slide-up transitions on all pages, as it would make the
prototype overly complex. Instead, he recommended applying the
slide-up effect selectively, with fade-in transitions for most
pages. He then taught me to create component sets in Figma,
which would reduce the number of frames needed for hover
effects. Additionally, he pointed out that mobile apps
typically don’t use hover effects due to the lack of a cursor
and suggested using a touch-down effect instead. Finally, he
reminded me that the task required multiple app flows, so I
would need to add a few more beyond the top-up flow.
Final App flow/ Masterplan After receiving
valuable feedback from Mr. Shamsul, I continued working on the
task. First, I refined the masterplan with his suggested page
transitions. Then, I created two additional masterplans (or
app flows) for the task, ensuring consistency in the use of
micro and macro animations across all three flows.
Figure 4.1 App flow/ masterplan 01.
For the second app flow, I chose "Add Service Line" as it is
one of the MVP features, allowing users to manage multiple
service lines without logging in and out. The third app flow
focuses on switching between service lines and viewing the
usage or balance of the selected line.
Figure 4.2 App flow/ masterplan 02.
Figure 4.3 App flow/ masterplan 03.
Based on the design of my high-fidelity final project from
Application Design 01, then I refined and improved them
according to Task 01 in Application Design 02. After
completing these adjustments, I proceeded with the animation
prototyping.
Component Set Following Mr. Shamsul's guidance, I
started by creating component sets, which helped reduce my
workload and kept the workspace organized by eliminating the
need to link frames individually.
Figure 5.1 Comparison.
When developing the touch-down effect for buttons, I realized
that my outline icons caused small, visible dots during the
circular animation.
Figure 5.2 Visible dots.
To fix this, I adjusted the button's hover effect so that the
circle appears only when the user’s finger is on the button.
The touch-down effect then animates the circle from the
center, expanding to fill the button.
Figure 5.3 Solution.
During testing, I discovered a bug, the touch-down effect only
played once. To address this, I added a "mouse leave" action
on the final variant, reconnecting it to the initial variant
so that the animation replays each time the button is
tapped.
Figure 5.4 Animation replay.
Once the component sets were complete, I moved forward with
completing the animation prototyping.
Final Animation Prototyping
Onboarding Page
Macro animation:
- The logo appears as a simple outline centered on the screen,
gradually filling with color from the bottom to the top to
reveal the complete logo. This animation is designed to
align with the click effect used for navigation buttons on the
following pages, creating a cohesive and consistent experience
throughout the app.
- Once fully colored, the logo enlarges slightly, followed by
a circular animation that zoom from the logo's center,
expanding to fill the entire page.
Figure 6.1 Overview of onboarding pages.
Figure 6.2 Animation of onboarding page.
Login Page
Macro animation:
- The circular animation now zooms out, seamlessly
transitioning into the login page.
- When the "Log In" button is clicked, the login form slides
up smoothly from the bottom of the screen, aligning with the
card design on the following page. The slide-up effect is
used because the welcome message across both pages follows a
similar style, with only slight positioning differences. This
makes the transition feel seamless, as if the login form is
pushing up the welcome message on the first page and replacing
it with the new welcome message on the second page.
- When the "Log In" button is clicked, a circular
animation zoom from the center of the page, expanding to fill
the entire screen. Simultaneously, a white logo fades in,
enhancing the transition effect.
Micro animation:
- For the button touch-down effect, a circular animation
zoom from the center of the button, expanding until it
covers the entire button with gradually fades out, creating
a smooth and interactive visual effect.
Figure 6.3 Overview of login pages.
Figure 6.4 Animation of login page.
Home Page
Macro animation:
- The circular animation zoom out, accompanied by the white
logo.
- The home page content fades in gradually, timed to align
with the icon's fill effect for a smooth, cohesive transition.
Micro animation:
- The home icon in the bottom navigation will animate from
an outline to a filled icon, maintaining consistency with
the onboarding page animation. This visually indicates to
the user that the home page is loading, and once the loading
is complete, the filled icon will be displayed.
- Usage chart will animate to reflect the amount of usage,
aligning with the user's current data usage.
- For the button touch-down effect, a circular animation
zoom from the center of the button, expanding until it
covers the entire button with gradually fades out, creating
a smooth and interactive visual effect.
Figure 6.5 Overview of home pages.
Figure 6.6 Animation of home page.
Balance/ Service Details Page
Macro animation:
- The balance/service details page content fades in
slowly.
Micro animation:
- The usage bar will animate by filling up until it aligns
with the user's current data usage which encourages user
engagement and provides a visual representation of their
usage progress.
- For the button touch-down effect, a circular animation
zoom from the center of the button, expanding until it
covers the entire button with gradually fades out, creating
a smooth and interactive visual effect.
Figure 6.7 Overview of balance/ service details pages.
Figure 6.8 Animation of balance/ service details
page.
Top Up Page
Macro animation:
- The top-up page content fades in gradually, timed to align
with the icon's fill effect for a smooth, cohesive transition.
Micro animation:
- The billing icon in the bottom navigation will animate
from an outline to a filled icon, maintaining consistency
with the onboarding page animation. This visually
indicates to the user that the home page is loading, and
once the loading is complete, the filled icon will be
displayed.
- When the RM20.00 top-up button is clicked, the effect will
be a circular animation that zooms from the center of the
button, expanding until it covers the entire button. As it
expands, the animation gradually fades out, and a stroke
will appear around the button, indicating that the amount
has been selected.
- The selected amount will also be displayed in the column
above the amount button for clear confirmation.
- For the button touch-down effect, a circular animation
zoom from the center of the button, expanding until it
covers the entire button with gradually fades out, creating
a smooth and interactive visual effect.
Figure 6.9 Overview of top-up pages.
Figure 6.10 Animation of top-up page.
Payment Method Page
Macro animation:
- The payment method page content fades in slowly.
Micro animation:
- When one of the payment method buttons is clicked, the
effect will be a circular animation that zooms from the
center of the button, expanding until it covers the entire
button. As it expands, the animation gradually fades out,
and a stroke will appear around the button, indicating that
the payment method has been selected.
- When a payment method is selected, the "Proceed"
button will fade in, indicating that the option to move
forward is now available. If the payment method is
deselected, the "Proceed" button will fade out, signaling
that a valid choice is required before continuing.
- For the button touch-down effect, a circular animation
zoom from the center of the button, expanding until it
covers the entire button with gradually fades out, creating
a smooth and interactive visual effect.
Figure 6.11 Overview of payment method pages.
Figure 6.12 Animation of payment method page.
Transaction Page
Macro animation:
- The transaction summary smoothly fades in at the
top of the screen, providing a clear overview for the user.
- The card details form slides up from the bottom,
creating a cohesive flow that aligns with the slide-up
animation used on the login page. This choice of animation
also complements the design, as the button style of the
selected payment method matches the form's layout, giving the
impression that selecting the payment method seamlessly opens
the details form.
- If the back button is clicked, an error prevention
pop-up will fade in to confirm the action, ensuring the user
doesn't click the button accidentally.
- When the pay button is clicked, a pop-up will fade in. After
a brief delay, the pop-up will fade out, and the top-up
successful page will fade in.
Micro animation:
- For the button touch-down effect, a circular animation
zoom from the center of the button, expanding until it
covers the entire button with gradually fades out, creating
a smooth and interactive visual effect.
Figure 6.13, 6.14, 6.15 Overview of transaction pages.
Figure 6.16 Overview of error prevention pop-up.
Figure 6.17 Animation of transaction page.
Account Page
Macro animation:
- The account page content fades in gradually,
timed to align with the icon's fill effect for a smooth,
cohesive transition.
Micro animation:
- The account icon in the bottom navigation will animate from an outline to a filled icon, maintaining consistency with the onboarding page animation. This visually indicates to the user that the home page is loading, and once the loading is complete, the filled icon will be displayed.
- For the button touch-down effect, a circular animation
zoom from the center of the button, expanding until it
covers the entire button with gradually fades out, creating
a smooth and interactive visual effect.
Figure 6.18 Overview of account pages.
Figure 6.19 Animation of account page.
All Service Lines Page
Macro animation:
- The all service line page content fades in
slowly.
- If any service line account is selected, a circular
animation expands from the center of the screen, gradually
filling it with a white logo in the center. After a short
delay, the animation zooms out and transitions to the home
page of the chosen service line account.
Micro animation: - For the button touch-down
effect, a circular animation zoom from the center of the
button, expanding until it covers the entire button with
gradually fades out, creating a smooth and interactive
visual effect.
Figure 6.20, 6.21 Overview of all service line pages.
Figure 6.22, 6.23 Animation of all service line page.
Link Service Line Page
Macro animation:
- The link service line page content fades in
slowly.
- When the "Link" button is clicked, a pop-up fades in,
confirming that the service line has been successfully
linked. After a brief delay, the pop-up fades out, smoothly
transitioning to an updated "All Service Lines" page.
Micro animation:
- For the button touch-down effect, a circular animation
zoom from the center of the button, expanding until it
covers the entire button with gradually fades out,
creating a smooth and interactive visual effect.
Figure 6.24 Overview of link service line pages.
Figure 6.25 Animation of link service line
page.
Switch Service Line Panel
Macro animation:
- When the arrow in the header bar is clicked, the switch
service line panel slides down from the top of the screen,
aligning with the downward arrow direction. This animation
not only enhances visual cohesion but also boosts
interactivity by aligning with the user’s input direction.
- If any service line account is selected, a circular
animation expands from the center of the screen, gradually
filling it with a white logo in the center. After a short
delay, the animation zooms out and transitions to the home
page of the chosen service line account.
Figure 6.26 Overview of switch service line panel.
Figure 6.27 Animation of switch service line
panel.
Services Page
Macro animation:
- The services page content fades in gradually, timed
to align with the icon's fill effect for a smooth, cohesive
transition.
Micro animation:
- The services icon in the bottom navigation will animate from an outline to a filled icon, maintaining consistency with the onboarding page animation. This visually indicates to the user that the home page is loading, and once the loading is complete, the filled icon will be displayed.
- For the button touch-down effect, a circular animation zoom
from the center of the button, expanding until it covers the
entire button with gradually fades out, creating a smooth and
interactive visual effect.
Figure 6.28 Animation of services page.
Rewards Page
Macro animation:
- The rewards page content fades in gradually, timed
to align with the icon's fill effect for a smooth, cohesive
transition.
Micro animation:
- The rewards icon in the bottom navigation will animate from an outline to a filled icon, maintaining consistency with the onboarding page animation. This visually indicates to the user that the home page is loading, and once the loading is complete, the filled icon will be displayed.
- For the button touch-down effect, a circular animation zoom
from the center of the button, expanding until it covers the
entire button with gradually fades out, creating a smooth and
interactive visual effect.
Mr. Shamsul advised that I could keep the illustrations and use
macro animations like fade-in or slide-in effects to make them
appear dynamically.
Week 07 Mr. Shamsul advised
against using slide-up transitions on all pages, as it would make
the prototype overly complex. Instead, he recommended applying the
slide-up effect selectively, with fade-in transitions for most
pages. He then taught me to create component sets in Figma, which
would reduce the number of frames needed for hover effects.
Additionally, he pointed out that mobile apps typically don’t use
hover effects due to the lack of a cursor and suggested using a
touch-down effect instead. Finally, he reminded me that the task
required multiple app flows, so I would need to add a few more
beyond the top-up flow.
REFLECTIONS Experience At the start of this task, I thought it
would be manageable since the design was already finalized; I just
needed to add animations, which seemed straightforward. However,
when I began using Figma for prototyping, I realized I wasn’t
fully familiar with creating the specific animations I had in
mind. To improve, I reviewed senior projects to see how they
achieved animations in Figma. A key challenge was managing
hover effects. I initially created them frame-by-frame and linked
them with smart animate, but this was time-consuming since I had
to redo and relink the hover effect for each page. Additionally,
there was a conflict with tap effects not working on buttons with
hover animations. Learning to use component sets from Mr. Shamsul
solved these issues, simplifying my process.
Observation Even with component sets, I noticed that
creating animations still required numerous frames to complete
multiple app flows. I realize I need more practice with Figma
features, such as component sets and frame linking, to build
smooth animated prototypes that resemble a real mobile app
experience.
Findings Through this process, I’ve learned the
importance of maintaining consistency in style and animation
throughout an app. Consistency makes the app look more
professional and polished, enhancing user experience. Animations
shouldn’t be overly complex, as they could slow down loading times
and potentially confuse users. Balancing aesthetic appeal with
professionalism in animation is challenging but essential to
deliver an optimal user experience.
.gif)
Comments
Post a Comment