Application Design II-Task 2
INSTRUCTIONS
Task 2-Interaction Design Planning and Prototyping
animation example: https://www.youtube.com/watch?v=d6xn5uflUjg&t=53s
When I start developing the macro animations, I found that I missed a Log In page and a double confirm pop up for the transaction action. I did the log in page in the previous semester project but I too focus on the MVP of the app, which is transfer money, and missed to design the log in page in task 1 (Updated in Task 1).
User flow diagram
 |
| user flow mapping |
In the transaction page, I chose the push animation over slide for its clear sense of directionality, emphasising the importance of the transaction process. Push animation provides a more grounded feel, aligning with the seriousness of financial transactions.
Next steps push to the left, and previous steps push to the right, enhancing user focus and maintaining clear navigation.
I researched common page-to-page animations like slide, push, and dissolve, and chose slide and fade for consistency and simplicity. Given the banking app's audience, ranging from young adults to middle-aged users, reducing complexity was key.
Slide animations offer clear directionality, helping users understand page transitions smoothly. Fade animations provide gentle transitions, making changes appear soft and less abrupt. This approach minimises cognitive load, focusing on functionality and ease of use rather than flashy effects.
Using these simple animations ensures a cohesive user experience, making the app intuitive and efficient for all age groups. This design maintains the app's professionalism and reliability while enhancing user comfort and fluidity.
Masterplan
After completing the user flow mapping, I began to focus more on the detailed animation design for every page and button. By referencing senior work, I concentrated on three types of animations: on load, offload, and in-app. Categorising animations into these three types helps me ensure a clear and organised approach to enhancing the user experience, making the interface more intuitive and engaging.
Above, I mentioned most of the micro animations, but next, I will explain in more detail the animations used for all buttons. Having a masterplan established prior to app development plays a crucial role in clearly defining animation effects for every page and button. This approach significantly streamlines team collaboration by providing a structured framework early on. It also serves to proactively identify and resolve potential issues, thereby optimising the overall user experience. With a meticulously detailed animation design in place, we ensure the app launches with enhanced seamlessness and intuitiveness, ultimately leading to heightened user satisfaction and increased engagement.
Animation
Loading page
- Macro
- Fade in, fade out
- Micro
- Animated loading indicator
Onboarding page
- Macro
- Fade in, fade out
- Micro
- Pictures slide out to the left and picture slide in from the right when clicking on the 'next' button
Log In page
- Macro
- Page move down
- Micro
- Bottom half section slides in from the bottom
- Profile move in with the page from the top
Home page
- Macro
- Push from the top
- Micro
- 'Your services', 'Quick pay' and 'Announcement' can slide horizontally
- Each section move in one by one
Side menu
- Macro
- Slide from the left
- Micro
- Side menu slide in from left and slide out to the left
Transfer page
- Macro
- Scale up from the transfer button
- Fade in
- Micro
- When the 'next' button is clickable, will have a bounce at the CTA button
- Macro
- Push from the right to the left
- Micro
- Step indicator change to done icon, move to step 2
- Macro
- Push from the right to the left
- Micro
- Step indicator change to done icon, move to step 3
- When the 'next' button is clickable, will have a bounce at the CTA button
- Macro
- Push from the right to the left
- Micro
- Step indicator change to done icon, move to step 5
- When the 'next' button is clickable, will have a bounce at the CTA button
- When selected a type, will have a bounce at the selected button
- Macro
- Push from the right to the left
- Micro
- Step indicator change to done icon, move to step 6
- When the 'next' button is clickable, will have a bounce at the CTA button
- Macro
- Push from the right to the left
- Micro
- Step indicator change to done icon, move to step 7
- When the 'next' button is clickable, will have a bounce at the CTA button
- The Pop up will scale up in the middle the the screen
Profile page
- Macro
- Fade in
- Micro
- Slide in one by one from the left
Profile page
- Macro
- Fade in
- Micro
- Slide in one by one from the bottom
Account page
- Macro
- Fade in
- Micro
- Fade in and out when change to card page or account page
- PB card page, the picture of card will slide in one by one
Transaction detail page
- Macro
- Fade in
- Micro
- The transfer amount will bounce once when entering to the detail page
Final Submission
Figma:
Video Presentation:
https://youtu.be/eP4oyQh4HlcReflection
Working on this Project has been an enlightening experience that deepened my understanding of user flow and animation. Designing the macro and micro animations required meticulous planning and attention to detail, ensuring smooth transitions and overall usability.
At the beginning of Project 2, I felt that the pace was too fast. Although I had been learning coding content in class, the transition from designing static UI layouts to creating a functional app felt overwhelming. Additionally, planning each animation was challenging, and I was uncertain if the final product would meet my expectations. However, by constantly referring to blogs from experienced designers, I gradually became more comfortable with the process. This project has taught me the importance of each macro and micro animation. Despite the fast pace, it truly helped me acquire new knowledge and skills.
Overall, this project has strengthened my design skills and provided valuable insights into the intricacies of app development. I am proud of the final product and confident that the redesigned Public Bank app will offer users a more engaging and satisfying experience.
Comments
Post a Comment