Application Design II Task 2
24/9/2024-3/1/2025 Week 1 - Week 14
Wong Kai Xin / 0353027
Application Design II / Bachelor of Design in Creative Media / The Design School
Task 2
INSTRUCTIONS
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.
Interaction Design Documents:
Create detailed flowcharts and wireframes that map out the user journey and key interaction points within the application. These documents should clearly illustrate the layout of each screen and the navigation structure of the app.
Animation Prototyping:
Micro Animations: Prototype small-scale animations that enhance the user's interaction with the application. These might include button effects, hover animations, loading indicators, and feedback messages. Use tools like Figma to create simple animations that demonstrate the intended effects.
Macro Animations: Develop concepts for larger-scale animations that significantly affect the user interface, such as transitions between different app states or animated introductions. For complex animations, you may use Adobe After Effects or similar tools to create more detailed prototypes. If actual animation creation is not feasible, you may alternatively provide references to existing animations that closely represent your intended design.
Visual and Written Explanation: Accompany your prototypes with a written explanation or a visual presentation that describes how these animations and interactions contribute to the usability and aesthetic of the application. Discuss the purpose behind each animated element and how it integrates into the overall user experience design.
CLASS SUMMARY
Week 5
brief on task 2
micro vs macro interactions
https://userpilot.com/blog/micro-interaction-examples/
Then we did some simple animations in figma to help us understand better and we also learned about "component set"
Week 6
html exercise on animation
- Micro Animations:
Create animations for small interactions (button clicks, hover effects, etc.) using Figma to prototype. Focus on subtle animations like button presses, hover effects, or swipe animations. These improve engagement and provide feedback. Use Figma or similar tools to create quick prototypes of these animations.
- Macro Animations: Design larger transitions (screen changes, state changes). These can include more significant transitions, like sliding between pages, onboarding animations, or loading indicators. If creating these in full isn't possible, include references to similar existing animations for context.
Week 7
consultation session
TASK 2
Before proceeding with the animation process, I made some newer changes to my task 1 according to sir's feedbacks.
old check out section
improved check out section
before and after home page
Now moving onto the animation process:
1. Interaction Design Documents:
user journey map
user flow chart
2. Animation Prototyping:
inspirations from pinterest
Using what I have learned in class, I create some components, as well as exploring tutorials from youtube. It was slightly confusing at first, but I got the hang of it after.
component sets I created
Loading Indicators: A thoughtfully designed loading animation keeps users engaged during wait times. By communicating that a process is ongoing, this reduces perceived loading time and prevents frustration. Here, I created two different type of loading animations, one for a more major process (for example: logging in, confirm an order) and one for more minor process (for example: going to menu page, going to member page)
I discovered an issue with my loading indicator as it looked pixelated while it was loading
after encountering this problem, I decided to create a component set and it worked smoothly
As for the tracking order section, I also made the words appear one by one so the process appears to be more clear to users
Screen Transitions: Smooth transitions between app states help users navigate seamlessly from one screen to the next, creating a fluid, continuous experience that feels natural and intuitive. Here, I have used to combination of slide, as well as dissolve.
Hover effects: Hover effects make interactions feel more dynamic and responsive. In my case, I changed the color of the text and button, signaling it’s clickable. This provides instant feedback, guiding users without needing extra instructions. These animations also add a layer of polish, making the app feel interactive and modern. A smooth hover effect can make buttons and elements visually stand out while aligning with the app's branding.
(will insert video)
Favorites icon animation: An animated favorites button enhances the user experience by adding playful and engaging feedback. When a user taps the heart icon, it changes color first, then shrinks a little, then changes color and expands.. This not only confirms the action but also adds an emotional connection, making the app more enjoyable. The animation reflects the app's tone, whether it's fun and energetic or sleek and subtle, and helps reinforce positive user interactions.
final overall run through with added animation
FEEDBACK
Week 6
1. Reset password put send email or phone number instead
2. Register buttons look same as login
3. search bar also look same
4. create components so its easier
5. customization space can add nutritional value, like calories, …
6. add payment option: debit card or ewallet
7. add one screen processing payment (animation)
8. bring back to menu after confirm ordering, no need back button (animation)
9. menu add the add to cart button (refer to shopee)
10. add drinks
11. customization add more option like add more gravy
REFLECTION
Reflecting on this exercise, I found it to be a mix of challenging and rewarding. Designing hover effects and an animated favorites button pushed me to think deeply about user engagement and how small animations can make a big difference in the overall experience. While experimenting with these elements, I realized how they help guide users intuitively and add personality to the app. It also made me appreciate the balance between functionality and aesthetics—finding ways to make the app not only practical but also enjoyable and visually appealing.
Comments
Post a Comment