Application Design 2-Bachelor of Design (Honours) in Creative Media--Taylors
University
Task 2: Interaction Design Proposal Planning
Instructions
Class Activity
Week 5: LottieFiles
Fig 1.1 LottieFiles
This week, we were introduced to LottieFiles for the first time. It was an
exciting experience as I had never used this tool before. The task was to
create a simple logo animation, and through this process, I learned how
LottieFiles allows designers to create lightweight, scalable animations that
can be used on websites or mobile apps. I experimented with basic movements
like scaling, rotating, and opacity to bring the logo to life.
Although it was my first attempt, I found the interface user-friendly and
the process enjoyable. This activity helped me understand the potential of
micro-interactions and how animated logos can enhance brand identity and
improve user experience in digital platforms.
Week 6: Flutter Flow
Fig 1.2 Dash Board Page - Flutter Flow
This week, we were introduced to a new app called FlutterFlow. It feels
quite similar to Figma in terms of the visual layout and interface, but it's
more structured and functional. While designing in FlutterFlow feels like
working in Figma, it's actually more convenient because it allows you to
build interactive app flows directly.
Fig 1.3 Login Page - Flutter Flow
We created several pages and set up buttons — for example, on the
registration page, we added fields for email and password. Then, we linked
the pages together so that after registering, the user would be directed to
the login page.
Fig 1.4 Sign Up Page - Flutter Flow
Overall, I found FlutterFlow to be a very interesting and efficient app. It
was exciting to see how quickly we could turn designs into working app
prototypes. I'm looking forward to exploring more of its features in the
coming weeks.
Task 2: Interaction Design Proposal & Planning
We are required to develop a comprehensive interaction design plan for the
final web-based mobile application. This involves creating detailed
flowcharts and wireframes that outline the user journey and key interaction
points throughout the app. In addition, we need prototype both micro and
macro animations that will enhance the overall user experience.
Requirements:
Interaction Design Planning (Include storyboard)
Prototype
Video Presentation
Intercation Design Planning
For the interaction design planning, we were required to create an app
flow map and distinguish between micro and macro animations. I began by
importing all the application pages into FigJam. The planned user flow
starts from launching the app, logging in, and continues all the way to
successfully purchasing a product. Therefore, I started mapping the flow
from the initial landing page of the application and structured the
sequence step by step based on user actions.
Red Boxes: Macro Interaction
Green Boxes: Micro Interaction
Fig 2.1 Onboarding and Login Flow
This is the Onboarding and Login Flow, which outlines the user's journey
from opening the application to reaching the login page. The flow begins
with a Loading Page, which smoothly transitions into the Onboarding Page
using a slide-in animation. This sliding effect helps introduce the app
in an engaging and dynamic way. After the onboarding content, the screen
fades into the Login Page, using a fade-in animation that gives a soft
and seamless transition, reducing visual friction and creating a calm
entry into the login process.
Fig 2.2 Home Page to Product Selection Flow
On the Home page, there are micro interactions such as auto-sliding
advertisement banners and spotlight product carousels. I believe this
can provide dynamic visual engagement and allow users to horizontally
browse through featured items. When the user clicks or taps on the
search bar, the page will transition to the search results page using
a slide-in macro interaction.
From the search results page, users can open the filter panel, which
also slides in from the side. After selecting filters, the updated
results page reappears, reinforcing seamless usability. When a user
taps on a product, the product details page slides in. There is a
micro interaction on this page which is the ability to swipe left and
right on product photos to enhance interactivity and product
exploration.
Finally, when the user chooses to add a product to their cart or
proceed to buy, a selection card will slide in from the bottom. Users
can customization of the product options such as color, capacity, and
quantity.
Fig 2.3 Cart Micro Interaction
When the user adds the product to the shopping cart, a red dot will pop up
in the shopping cart.
Fig 2.4 Cart Page to Order Placed Flow
When users click the cart icon after successfully adding a product, the
Shopping Cart page slides in. On this page, users can select the product
by ticking the checkbox and proceed to checkout. This action triggers a
slide-in transition to the Checkout page, where users can view their
shipping options, address details, and order summary. Upon selecting a
payment method, the Payment Selection page slides in. The page offers
various options such as credit/debit card, online banking, e-wallet, or
installment plans.
Once the user confirms the payment method, the app will return to the
Checkout page with a brief fade-in loading animation. Upon clicking
“Place Order,” the order is submitted instantly without further
transitions, streamlining the experience.
Finally, the order was placed successfully and the page appears with a
micro interaction which is a pop-out cart animation to visually confirm
a successful purchase.
Storyboard
Fig 3.1 Overview of the Storyboard
Fig 3.2 Overview of the Storyboard
The storyboard shows the micro interactions that occur during the enter,
screen loaded, and exit stages of the user journey.
During the enter stage, slide-in transitions are used to smoothly guide
users from one screen to the next, maintaining a natural and cohesive
flow. Once a screen is loaded, subtle animations such as loading
indicators and swipe gestures provide immediate visual feedback,
enhancing the sense of responsiveness and keeping users engaged. At the
exit stage, interactions like pop-out animations and instant feedback,
such as a confirmation message after placing an order, give users a
clear and satisfying sense of completion. These micro interactions
collectively contribute to a more intuitive, seamless, and enjoyable
user experience.
Animation of Prototype
After completing the design planning, I started to animate my prototype
using Figma.
1. Loading Page
Fig 4.1 Loading Page
Macro Interactions:
Fade in
Fade out
Micro Interactions:
Seneheng logo appear and start playing animation around 3 second. Animation:
A ball appear and bring the logo out.
2.Onboarding Page & Login Page
Fig 4.2 Onboarding Page & Login Page
Macro Interactions:
Slide in
Fade in
Fade out
Micro Interactions:
Pagination indicator (black dot) updates based on current screen. The
active screen's dot turns black, while the rest remain grey—helping
users understand their current progress in the onboarding sequence.
The left arrow is hidden on the first page and right arrow is hidden
on the last page. Hide the arrow to prevent users from trying to go
back when there is no previous content. This guides users to move
forward through the onboarding process.
Phone number country code selector. Users can choose the country code
(e.g., +60), there will be a dropdown or modal will appear.
5-star rating selectable as a filter option. Users can tap on the
"5-star" option within the filter menu to narrow down results to only
products with top ratings.
After applying filters, users can easily remove the filter options.
Then the page will return to the original page without using the
filter.
6. Product Details Page
Fig 4.6 Product Details Page
Macro Interactions:
Slide in
Fade out
Micro Interactions:
Swipe left or right on the image carousel to view multiple product
images.
Swipe down to reveal more content such as descriptions,
specifications, reviews, or related items.
7. Product Selection Page
Fig 4.7 Product Selection Page
Macro Interactions:
Fade in
Slide out
Micro Interactions:
After clicking the ''Add to cart'' button, the product option card
pops up from the bottom of the screen. This card allows users to
choose specific variations such as color and storage capacity before
confirming the addition to the cart.
Tapping the “Add to Cart” button triggers a visual confirmation to
inform that the product has been successfully added to the shopping
cart.
8. Cart Page
Fig 4.8 Cart Page
Macro Interactions:
Slide in
Fade out
Micro Interactions:
Tick checkboxes to select items.
9. Checkout Process Page
Fig 4.9 Checkout Process Page
Macro Interactions:
Slide in
Fade in
Fade out
Micro Interactions:
Users can tap on their preferred payment option (e.g., online banking)
from a list.
Scroll down to reveal more information such as billing address,
delivery summary, or applied vouchers. This encourages thorough review
before placing an order.
After confirming the details and payment method, users can click the
“Place Order” button. A feedback action (like a loading spinner or
confirmation message) is shown to indicate the order is being
processed.
Working on this task helped me understand how important interaction design is in creating a good app experience. I started by putting all the app pages into FigJam and planned the user flow from opening the app, logging in, all the way to buying a product. This made it easier for me to see how users move through the app step by step.
One of the most interesting parts was learning to separate micro and macro animations. Micro animations, like the shopping cart popping out or the loading screen animation, may seem small, but they make the app feel more alive and responsive. Macro animations, like sliding between pages, help the app feel smooth and connected. Through this process, I have learned that even small animations can make a big difference. They can guide users, make them feel comfortable, and improve the overall flow. I also started to think more carefully about how each interaction should work, not just how it looks. Overall, this task taught me to plan interactions with more thought and care. I learned to design user flows and choose animations that make sense.
Comments
Post a Comment