Application Design 2 - Task 2 / Interaction Design Proposal and Planning
Siang Huey Yee / 0369549
Task 2 - Interaction Design Proposal and Planning
OUTLINE
- INSTRUCTIONS
- TASK 2 - INTERACTION DESIGN PROPOSAL AND PLANNING
- MOOVIT APP FLOW MAP
- STORYBOARD
- ANIMATION OF PROTOTYPE
- INTERACTIVE PROTOTYPE OVERVIEW
- PRESENTATION VIDEO
- FIGMA & FIGJAM SUBMISSION
- REFLECTION
INSTRUCTIONS
Module Information Booklet
-
Mr. Razif introduced us to Flutterflow and LottieFiles.
-
He guided us through Flutterflow, provided tutorials and explored the platform together with us.
-
He encouraged us to continue exploring and using the platform independently as we are required to use Flutterflow to complete Task 3 and the Final Task.
TASK 2 - INTERACTION DESIGN PROPOSAL AND PLANNING
Requirements:
1. Interaction Design Documents
-
Create detailed flowcharts to map out the user journey and key interaction points within the app.
-
Develop wireframes showing the layout of each screen and the navigation structure of the app.
-
Ensure documents clearly illustrate the overall app flow and interface design.
2. Animation Prototyping
a. Micro Animations
-
Design small-scale animations that enhance user interaction, such as:
-
Button effects
-
Hover animations
-
Loading indicators
-
Feedback messages
-
-
Use tools like Figma to create simple interactive prototypes.
b. Macro Animations
-
Develop concepts for large-scale animations, including:
-
Transitions between app states
-
Animated introductions or walkthroughs
-
-
Use tools like Adobe After Effects or similar for complex animations.
-
If creation is not feasible, provide visual references of similar animations.
c. Visual & Written Explanation
-
Provide a written explanation and/or visual presentation describing:
-
The purpose of each animation
-
How animations enhance usability and aesthetics
-
Integration into the overall user experience design
-
3. Video or Class Presentation
-
A video presentation is to be recorded, as decided by the module coordinator.
-
Present your interaction design proposal and explain your planning process and animation concepts.
MOOVIT APP FLOW MAP (INTERACTIVE DESIGN PLANNING)
To plan the app flow for the redesigned Moovit app, I began by mapping out the entire user journey, from launching the app to viewing routes and navigating to destinations. This involved outlining each key screen, defining user interactions, and carefully planning transitions using animations like slide, dissolve, and scale. By structuring the app with PageView sections and clear navigation paths, I aimed to create a smooth, intuitive experience that supports real-time route planning. This planning process helped me ensure the app remains user-friendly while enhancing engagement through interactive and responsive design elements.
STORYBOARD
The storyboard for the Moovit app redesign captures the overall interactive journey by breaking down each screen transition into three key stages: On Enter, On Screen Loaded, and On Exit. It visualizes how users move through the app, from the welcome animation to navigation, route viewing, and weather updates by clearly defining how each screen appears, behaves, and transitions. This planning ensures a smooth, consistent, and intuitive user experience throughout the app.On Enter
Each screen in the Moovit app is introduced with thoughtful transition animations such as slide, dissolve, scale, or instant display. These animations set the tone for the interaction, whether it's a gentle slide-up to reveal new content or a dissolve for a seamless page switch. By planning On Enter animations, the app delivers a more dynamic and engaging first impression for each screen.
Once a screen is fully loaded, the user is presented with clear, focused content such as route suggestions, full maps, nearby stops, and weather forecasts. Micro animations like walking icons, loading dots, or weather reactions (sunny or rainy) are triggered to enhance visual feedback and guide user attention. This stage focuses on delivering information in a readable, structured way that supports decision-making.
Each screen transitions out with a designated animation, such as sliding up, sliding left/right, dissolving, or scaling. These On Exit actions maintain visual continuity while guiding users to the next logical step in their journey, whether it's moving from route suggestions to the map, or returning to a previous view. Consistent On Exit behavior helps reduce cognitive load and reinforces the flow of the app.
ANIMATION OF PROTOTYPE
I created my micro animations using the LottieFlies platform, which was introduced to us during our lecture sessions. I designed several micro animations, including the Moovit Loading Animation, Walking Animation, Route Loading Dots Animation, Sunny Day Animation, and Rainy Day Animation.
However, I faced a minor issue when exporting directly from LottieFlies, as the GIF output was very pixelated. To resolve this, I exported the animations as JSON files and used an external converter to convert the JSON files into high-quality GIFs. Additionally, due to the limited number of projects allowed on a free LottieFlies account, I had to log in using another account to continue working on additional animations.
Macro:
- Entire screen slides up transition into Navigation Page.
Micro:
- Moovit icon floats up from the bottom like a hot air balloon (slide + fade-in effect).
- Moovit smiley face winks after logo rises.
- “MOOVIT” text fades in after the icon floats up.
Macro:
- Slides Up Transition then Instantly appears with no transition (On Enter).
- Dissolves to Map Page when a route is selected (On Exit).
Micro:
-
Navigation Page
Macro:
- Appears instantly in PageView scroll.
- On tap "Start Journey" on Fastest Route, slides in from left to open Map Page.
Micro:
-
Macro:
-
Micro:
- Route Loading Dots Animation shows visual movement from start to destination.
Macro:
- Appears instantly in PageView scroll.
- Dissolves to Map Page - Bus Station View when “Check on Map” is clicked
Micro:
-
Macro:
- Page dissolves in from Navigation Page.
- Slides up to transition into Route Info Panel.
Micro:
-
Macro:
- Page slides up to reveal route breakdown.
- Slides down to return to Map Page.
Micro:
- Walking Animation appears beside walking steps.
- Route Loading Dots Animation plays briefly to indicate direction flow.
Map Page & Route Info Panel
Macro:
- Page scales up when entering full-screen mode.
- Scales down on exit to return to previous Map Page.
Micro:
-
Map Page - Full Map View
Macro:
- Dissolves in from Nearby Stops page.
- Slides in from right to return to the previous screen.
Micro:
-
Map Page - Bus Station View
Macro:
-
Micro:
- Sunny Day Animation: Smiling sun appears and shines.
- Rainy Day Animation: Sad, crying cloud with raindrop effects.
REFLECTION
For this task, I worked on developing the interaction design proposal, which included creating user flowcharts, wireframes, and animation prototypes. Initially, I was quite unsure and slightly confused about what exactly was expected, especially when it came to differentiating between micro and macro animations. I wasn't fully clear on what types of animations were suitable or how they could be integrated meaningfully into the app design.
However, after reviewing the requirements and referring to the flow masterplan, I was able to rethink and reorganize my ideas more clearly. The flowcharts helped me map out the full user journey step-by-step and pinpoint key interaction areas that would benefit from animations. This made it easier to plan the overall structure of the app and understand where animations could enhance the experience without overwhelming the user.
Creating the wireframes also gave me a clearer visual of how each screen should be laid out and how the navigation would flow. For the micro animations, I focused on button interactions, loading indicators, and feedback effects. Even though I found it challenging at first, tools like Figma helped me prototype these small interactions quickly.
For the macro animations, I explored larger transitions such as walkthrough screens or state changes. Since I wasn't able to fully create complex animations using tools like LottieFlies, I gathered visual references to communicate the concepts effectively and provided written explanations to describe how they would support the user experience.
Overall, this task helped me better understand the importance of interaction planning and how animations, both small and large, can improve usability and aesthetic appeal when used thoughtfully. Despite the initial confusion, breaking the task into smaller steps and organizing it based on the user flow made it manageable and rewarding.
Comments
Post a Comment