APPLICATION DESIGN II: TASK 02

 ALICIA TENG YI LING [0345159]

APPLICATION DESIGN II [TASK 02] 

---

Task 02: App Animations Prototype

Todo:

• Create a prototype that presents all the animations the final app should have

Process

App Flow Mapping

I started off by structuring out the app flow starting from the splash screen all the way down to the features of "Meal Planner". This section mostly focused on the macro animations of each page and large movements across the screen. 

At the beginning of the interaction design process, I established a clear app flow that outlined the user journey from the splash screen to login, to the home page and the various features of "Meal Planner". This initial phase primarily revolved around structuring the macro animations and defining the significant movements and transitions throughout the app. 

By focusing on the macro animations, I aimed to create impactful visual experiences that would guide users seamlessly from one page to another. This involved determining how different screens would enter and exit the view, as well as identifying key moments where the app's interface would undergo substantial transformations. 

During this stage, I carefully considered the overall user flow and strived to ensure that each page's macro animations aligned with the app's purpose and functionality. So, my final conclusive design decision was to keep the transition style simple and clear but have enough movement so that the overall screen wouldn't feel too stagnant. By mapping out the significant movements across the screen, I laid the foundation for a cohesive and intuitive user experience.

Summary of Critical Points from above information:

• Establishing app flow
• Macro animations & large movements 
• Creating impactful visual experiences 
• Simple & clear transition styles
• Cohesive & intuitive user experiences

Fig 1.1 Overall View of App "Meal Planner" Flow Mapping 

Fig 1.2 Log in and Sign-up flow based on membership status

Fig 1.3 Overview of page transitions between home page and functionable features pages

Fig 1.4 Modal Dialogues for "Recipes, Calendar & Daily Water Intake"

Fig 1.5 Flow for Shopping List & Groceries Selection Pages

After careful consideration, I ultimately decided to adopt a simple and clear transition style for the app's animations. By opting for a straightforward transition style, I aimed to create a user experience that felt intuitive and natural. The animations were designed to guide users seamlessly between different screens and sections of the app, ensuring a cohesive flow throughout their interactions. 

While simplicity was a guiding principle, I also recognized the importance of incorporating enough movement to prevent the screen from feeling stagnant. By introducing subtle yet purposeful animations, such as sliding, fading, or scaling elements, I brought a dynamic touch to the app's visual presentation. By finding the right balance between simplicity and movement, I aimed to create an app experience that felt both polished and functional

Masterplan 

After completing the app flow mapping, I proceeded with the masterplan, which delved into the detailed micro animations and interactions for each page. This comprehensive plan provided a detailed overview of three distinct stages for every page: Onload, In App, and Offload. 

Within the "Onload" stage, I focused on the animations and transitions that occur when a page is initially loaded or entered. This stage aimed to create simple movement across the screen by animating elements to either slide down from the top or in from the left using an ease-out style. On the screens containing functionable features related to the app's purpose, the icons (left arrow and three dots) and the page title are already present immediately to ensure a seamless introduction and that the users are on the correct page.

The "In App" stage of the masterplan delved into the animations and interactions that take place while users are actively engaged with the app's features and functionalities. This included elements like scrolling, tapping buttons, sliding sections, or triggering the modal dialogues. Each interaction was designed to be intuitive, responsive, and visually coherent, enhancing the overall usability and enjoyment of the app. 

Lastly, the "Offload" stage accounted for the animations and transitions when users navigate away from a page or complete a specific action. Whether it was returning to the home page, dismissing a dialogue, or transitioning to a new section, these animations were crafted to provide a smooth and seamless departure, ensuring a cohesive and fluid user experience. 

Summary of Critical Points:

• Masterplan for micro animations
• Onload Stage
• In App Stage
• Offload Stage

Fig 2.1 Overview of Masterplan for Micro Animations

Fig 2.2 Description for Onboarding Screen 2

Fig 2.3 Description for Home Page

Fig 2.2 Description for Recipes Page

Fig 2.2 Description for Shopping List Page

The micro interactions incorporated into all pages encompass loading indicators, scrolling animations (horizontal and vertical), and various other dynamic elements. These interactions not only introduce movement and unique characteristics to the app but also contribute to shaping its overall identity. 

By meticulously planning and executing the micro animations and interactions across these three stages to add visual interest and responsiveness to the UI, I aimed to create an app that not only functioned flawlessly but also delivered a visually compelling and engaging user experience. 

Animating

Converting the original wireframes from Adobe XD to Figma proved to be a challenging and time-consuming task. However, the transition to Figma was well worth it due to the superior animation prototyping options it offered. The newfound capabilities of Figma's animation tools significantly eased my design process and stopped me from completing my idea of coding the entire app and submitting it for this task.

To streamline my animation efforts, I compiled a brief, comprehensive list of both macro and micro animations that I intended to incorporate into each page. This checklist along with the app flow mapping and masterplan served as a visual roadmap, allowing me to track the progress of each animation and ensure their seamless integration. It also provided an opportunity to evaluate the aesthetics and functionality of each animation, identifying areas for improvement or the need to add further enhancements.

In retrospect, the transition from Adobe XD to Figma for animation prototyping was a pivotal decision. It not only simplified the design process but also empowered me to explore creative possibilities and elevate the quality of the app's animations.

Summary of Critical Points:

• Converting Adobe XD to Figma
• Enhanced Animation Prototyping
• Evaluating aesthetics & functionality
• Reflecting on transitions 

Loading Screen

• Macro:
• Fade in
• Fade out
• Page swipes up upon offloading
• Micro: 
• Logo opacity and size is a loading indicator 

Fig 3.1 Loading Screen Animation Pages

Onboarding Screens (1-5)

• Macro: 
• Swipe left / right for page transitions
• Page swipes up upon offloading
• Micro: 
• Dots at the bottom indicate page number
• Logo slides in from the top
• Button slides in from the bottom

Fig 3.2 Onboarding Screens Animation Pages

Log in

• Macro: 
• Page swipes up upon offloading
• Micro: 
• Logo slides in from the top
• Bottom half section slides in from the bottom

Fig 3.3 Log in Screen Animation Pages

Sign up

• Macro: 
• Page swipes up upon offloading
• Micro: 
• Logo slides in from the top
• Bottom half section slides in from the bottom

Fig 3.4 Sign up Screen Animation Pages

Home Page

• Macro: 
• All elements drop down from the top
• Micro: 
• Horizontal scrolling behaviour for "Today's Meals" section
• Side menu slides in from the left upon clicking an icon

Fig 3.5 Home Screen Animation Pages

Summary of Today's Meals

• Macro: 
• Page elements drop down from the top
• Offloading swipes right to go back to home page
• Micro: 
• Offloading swipes right to go back to home page

Fig 3.6 Summary of Today's Meals Screen Animation Pages

Specific Meal Information

• Macro: 
• Some page elements drop down from the top
• Some page elements slide in from the left
• Some page elements slide up from the bottom
• Offloading swipes right to go back to home page
• Micro: 
• Horizontal scrolling behaviour for "Ingredients" section

Fig 3.7 Specific Meal Information Screen Animation Pages

Recipes + Modal Dialogues

• Macro: 
• Some page elements drop down from the top
• Some page elements slide in from the left
• Offloading swipes right to go back to home page
• Micro: 
• Horizontal scrolling behaviour for "Categories" section
• Modal dialogue swipes up from the bottom upon "+" buttons interactions

Fig 3.8 Recipes Screen Animation Pages

Calendar + Modal Dialogue

• Macro: 
• Lower half section slides up from the bottom
• Offloading swipes right to go back to home page
• Micro: 
• Modal dialogue swipes up from the bottom upon "+" buttons interactions

Fig 3.9 Calendar Screen Animation Pages

Daily Water Intake + Modal Dialogue

• Macro: 
• Lower half section slides up from the bottom
• Offloading swipes right to go back to home page
• Micro: 
• Modal dialogue swipes up from the bottom upon "+" buttons interactions

Fig 3.10 Daily Water Intake Screen Animation Pages

Fig 3.11 Modal Dialogue Pages for "Recipes, Calendar & Daily Water Intake"

Calorie Counter 

• Macro: 
• Page elements slide in from the left
• Offloading swipes right to go back to home page

Fig 3.12 Calorie Counter Screen Animation Pages

Shopping List & Groceries Selection

• Macro: 
• Some page elements slide in from the left
• Button slides up from the bottom
• Offloading swipes right to go back to home page
• Micro: 
• Button interactions - White darkens to grey to indicate pressing

Fig 3.13 Shopping List Screen Animation Pages

Fig 3.14 Groceries Selection Pressing Ingredients Overlay

Fig 3.15 Counter UI Components

Side Menu

• Macro:
• Onloading - Menu slides out from the left
• Offloading - Menu slides back to the left

Fig 3.16 Side Menu Page

Fig 3.17 Overview of all Page Prototype View in Figma

Common Interactions I used:

• Tap
• Navigate to
• Slide in (left, right, top, bottom)
• Ease-out
• Open Overlay
• After Delay
• Slide in

Editing Video Presentation

4.1 Adjustment layer lumetri colour basic correction settings 

Fig 4.2 Sharpen Effect

Fig 4.3 Workspace in Adobe Premiere Pro

After exporting the final video presentation for the first time, the export was quite blurry so I tried exporting with 4K settings which still didn't work. With the help of my beloved friend, Yi Ki, from digital animation who is much more experienced in this field of work, she suggested that it might be to do with the size or aspect ratio issues. She also suggested trying to add the sharpen effect under 'blur & sharpen' which worked amazingly! I also changed the video output size. And although not perfect, it showcases the presentation clearly. 

If you wish to browse the interaction design project more clearly please try with the embedded prototype in the final submission below. 

Final Submission for App Animations Prototype - Interaction Design

Figjam App Flow Mapping & Masterplan

Fig 5.1 Interaction Design App Flow Mapping in Figjam

Figma Animation Prototype

Fig 5.2 Interaction Design Animations Prototype in Figma

Video Presentation

Feel free to skip to:

• Section 1 (FigJam App Flow Mapping) / 00:00 - 05:07 
• Section 2 (Masterplan for Interaction Design + Animation Prototype Display) / 05:08 - 09:44 
• Section 3 (Overview run-through of Animation Prototype) / 09:45 - 12:12

Fig 5.3 Interaction Design Animations Prototype Video Presentation

Reflection 

Throughout the process of redesigning and animating this app, I gained valuable insights and experiences that greatly contributed to my growth as a designer. This project allowed me to delve into the intricate details of UI/UX design and explore the realm of animation prototyping. 

One aspect that presented a challenge was converting the original wireframes from Adobe XD to Figma. Although it was a tedious and time-consuming task, the transition proved to be worthwhile. Figma's animation prototyping capabilities far exceeded my expectations, making the effort well worth it. It not only facilitated a smoother design process but also helped me reconsider my initial plan to code the entire app for submission. 

One aspect I particularly enjoyed was exploring micro animations. These small yet impactful interactions, such as loading indicators and scrolling animations, injected life and personality into the app. They not only served functional purposes but also became integral to the app's identity, making it more engaging and memorable for users. 

Overall, this project allowed me to sharpen my skills in app design, animation prototyping, and attention to detail. It provided an opportunity to think critically about user experiences and find creative solutions to improve the app's usability. I am proud of the outcome and the growth I achieved throughout this project and I look forward to applying these newfound skills and knowledge to future design endeavors.