Task 2: Interaction Design Proposal and Planning
19/5/2024 - 2/6/2024 / Week 5 - Week 7
Tee Jia Ern / 0348512
Application Design 2 / Bachelor of Design in Creative Media
Task 2: Interaction Design Proposal and Planning
LECTURES
Week 6
Exercise
We learned about how to create logo animation using LottieFiles. Though for higher resolution you need to buy premium. It's an alternative to paid software like Adobe After Effects but I think the free version is not really usable due to the low resolution when exporting. I chose messenger as my logo. Since it resembles a circle decided to add a bounce effect to a blue gradient circle then enlarging it into the logo and appear the unique features of the logo like the triangle at the bottom of the circle and the white jagged line in the middle of the circle.
Fig 1.1: Messenger LottieFiles Animation Screen
Fig 1.2: Messenger LottieFiles Animation
INSTRUCTIONS
Instruction
Students are required to develop a comprehensive interaction design plan for their final web-based mobile application, including detailed wireframes, user flow diagrams, and prototypes of both micro and macro animations. The goal is to visually and conceptually prepare the interaction design and animations that will enhance the user experience of their application.
Master Plan & Storyboard
Before starting on our animation, our lecturer recommended creating a master plan and storyboard to map out the animations we want to include in the three modes, on enter, on page and on exit. For macro interactions, it's something that will happen in the whole page, I went for a combination of fade in and slide down depending on what felt intuitive to the viewer, which is the end goal. For micro interactions, some elements may slide into the screen individually for example a keyboard, or animating the input field with darker borders and blinking cursor.
Link to them click here.
1. Splash Screen
I decided to have the apostrophe shape of the Lotus's logo to resemble the shape of a lotus flower, then transitioning into an apostrophe in the name Lotus's. This creates a visual connection between the brand name and its symbolic meaning.
Macro: A single apostrophe/petal transitions into a blooming flower, then only turning into the apostrophe in the brand name.
Fig 1.2: Splash Screen
Fig 1.3: Splash Screen Animation
2. Onboarding Page
Macro: Slide up from the splash screen. Fade in of each page after clicking on the arrow button.
Micro:
- The first screen fades in the heading and body text in order.
- Progress indicator dots move as the next button is pressed.
- In the last screen the circle arrow shape transforms into a long oblong button.
Fig 2.1: Onboarding Page
Fig 2.2: Onboarding Page Animation
3. Login
Macro: The onboarding page slides up showing the login page.
Micro:
- The input field darkens to a light gray along with a blinking cursor.
- The typing animation with the cursor is included. This applies to both input fields of mobile number and password.
Fig 3.1: Login
Fig 3.2: Login Animation
4. Home
Macro: After login, the screen slides up displaying the home page (In Fig 3.2).
Micro:
- The carousel at the top of the home moves horizontally to reveal promotions.
- The home has vertical scrolling which reveals various categories and product.
- The icons and products are a horizontal carousel that can be moved manually by the user.
Fig 4.1: Home
Fig 4.2: Home Animation
5. Search
Macro: Clicking on the search bar will fade in to the search feed.
Micro:
- The carousel of products moves horizontally automatically.
- The keyboard slides in from the bottom of the screen along with a blinking cursor.
- After pressing the keyboard the product name oil will show up along with the search feed sliding form the top below the search bar.
- Hovering over will appear a gray box on the Naturel Sunflower Oil.
Fig 5.1: Search
Fig 5.2: Search Animation
6. Search Feed
Macro: After selecting the product, the search feed fades into the screen. The keyboard also moves down to show the product feed.
Micro:
- The filter tags enter into the screen from the right while the products slides up from the bottom.
- The selected product has a gray box when hovering it.
Fig 6.1: Search Feed
Fig 6.2: Search Feed Animation
7. Product Description
Macro: Clicking on the product will open up the product description which slides up from the bottom of the screen.
Micro:
- The filter tags are entered from the right side of the screen.
- After clicking on the add to cart button, a cart with a circle appears and moves into the top right corner of the cart, showing the quantity of the item and the total price in the cart.
Fig 7.1: Product Description
Fig 7.2: Product Description
8. Cart
Macro: Clicking on the product will open up the product description which slides up from the bottom of the screen.
Micro:
- The product description fades into the cart page.
- A total price box along with a CTA buttons slides up from the bottom of the page.
- After clicking on check out, the box slides down, the screen darkens and a new box slides up with payment details
Fig 8.1: Cart
Fig 8.2: Cart Animation
9. Order Confirmation
Macro: The order confirmation slides down after clicking on the place order button during checkout.
Micro:
- The grocery bag slides down from the top of the screen.
- The checkmark rotates and enlarges and placed at the bottom right corner of the bag.
Fig 9.1: Order Confirmation
Fig 9.2: Order Confirmation Animation
10. Order Tracking
Macro: The order tracking fades in from the order confirmation screen.
Micro:
- A white box and the text appear in order of sequence.
- After clicking on the expand linked text, a order progress bar is shown. The progress bar animates the colour green starting from the beginning of the progress bar which is the first circle going through the line and filling up the next circle.
Fig 10.1: Order Tracking
Fig 10.2: Order Tracking Animation
Final Submission
Presentation Video
Link for Figma prototype click here.
FEEDBACK
Week 6General Feedback: For a grocery app, try to keep it minimal because there is a lot of components and adding too much complex animations will clutter the interface.
Specific Feedback: There is no mouse over when using mobile app to test it out unlike a laptop, so keep that in mind when designing it for phones in the future.
REFLECTION
Experience: I learned how to do animations in Figma through tutorials that are available online. It took some time for me to get the hang of components in Figma. Most of the animation I do are slide in like the search results, filter tags and product feed, moving elements like carousel and progress bar, and fade in for macro animations such as page transitions.
Observations: The logo screen I'm really satisfied with because the apostrophe in Lotus's logo does look like a flower petal. The transition between a lotus flower and the lotus's logo apostrophe shows the similarity and visualization of the logo name lotus.
Findings: It was something new to me and I am glad I learned it. Now I have experience in animating prototype in Figma. I have also greater appreciation for the mobile apps that I use daily and the amount of work that goes into designing an app.
Comments
Post a Comment