Application Design 2 | Task 2 : Interaction Design Proposal and Planning

22/05/2025 - 05/06/2025 (Week 5 - Week 7)
Yong Xiao Tong / 0368290
Application Design 2 / Bachelor of Design (Honours) in Creative Media 
Task 2: Interaction Design Proposal and Planning


Task 2: Interaction Design Proposal and Planning

We are required to develop a comprehensive interaction design plan for our 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 our application. 

Splash Screen
Weather apps typically don’t need a splash screen since users just want to get straight to the forecast. But since some well-known weather apps, like AccuWeather, still include one for branding, and AI also suggested keeping it quick and minimal, I decided to include a simple splash screen with a fade-in and fade-out animation that lasts about 1 second. It creates a smooth transition into the app without slowing down the experience.





Masterplan

  • Main user goals:
    - Check today’s weather
    - Get severe weather alerts
    - Search and save favorite locations
    - View radar & satellite data
    - Learn how to stay safe during extreme weather

  • Key features:
    - Location-based weather
    - Notifications
    - Tabs for detailed warnings and guides

  • Navigation logic:
    - Bottom action menu to access all secondary screens from the Home Screen
    - Mandatory location permission to access main functionality


After launching the app and allowing location access, users land directly on the Home Screen, where they can view current weather and a 7-day forecast.

All additional screens such as Weather Alerts, Radar, Location Search, Safety Info, Settings, and About Us are accessed via a bottom-right action menu.

These screens are not part of a strict flow; instead, they are accessed dynamically, based on what the user needs at that moment. This structure ensures that the main function (viewing weather) remains fast and accessible.


Wire Flow

Flow 1: App launch & location access

Purpose: Ensure user grants location permission to access weather data.

Flow:

  1. User opens app

  2. ➝ Splash Screen

  3. ➝ Location Access Screen

    • Prompt: "Allow location access?"

  4. ➝ If Allowed
    ➝ Proceed to Home Screen

  5. ➝ If Denied
    ➝ Show message: "Location required to use app"
    ➝ Retry or stay on Location Access Screen

Macro:
Splash → Location Access: Fade in/out
Location Access → Home: Slide in

Micro:
Retry prompt: Subtle shake if denied
Action menu icon: Highlight on tap


Flow 2: View current weather & forecast (main flow)

Purpose: Let user view local weather & weekly forecast.

Flow:

  1. User reaches Home Screen

  2. ➝ Sees current weather info (temp, condition)

  3. ➝ Scrolls to view 7-day daily forecast

  4. ➝ Tap action menu to access other features


Macro:
None (stays on same screen)

Micro:
Scroll action: Smooth easing scroll


Flow 3: View weather alerts & warnings

Purpose: View today’s weather warnings by type.

Flow:

  1. From Home Screen

  2. ➝ Tap action menu

  3. ➝ Select Weather Alerts & Warnings

  4. ➝ See 5 tabs:

    • Earthquake/Tsunami

    • Thunderstorm

    • Heavy Rain

    • Strong Wind & Rough Sea

    • Tropical Cyclone

  5. ➝ Tap a tab ➝ Section expands

    • If no alert → Show “No warning”

    • If alert exists → Show date, and time

Macro:
Home → Alerts Screen: Slide up 

Micro:
Action menu tap: Pop-up
Tab expand/collapse: Slide down/up


Flow 4: Search & favorite location

Purpose: Let user check weather in other places.

Flow:

  1. From Home Screen

  2. ➝ Tap action menu

  3. ➝ Go to Location Screen

  4. ➝ Use search bar to enter location

  5. ➝ See weather info for that place

  6. ➝ Tap favorite icon to save it

  7. ➝ View list of saved favorite locations (optional feature)

  8. ➝ Tap back return to location screen 

Macro:
Home → Location Screen: Slide in or scale in

Micro:
Search bar focus: Underline grows
Typing: Cursor blink
Flow 5: View radar & satellite data

Purpose: Visualize precipitation and temperature via maps.

Flow:

  1. From Home Screen

  2. ➝ Tap action menu

  3. ➝ Select Radar & Satellite

  4. ➝ Tabs at top:

    • Current Radar (map + slight/moderate/heavy/violent scale)

    • Satellite (map + temperature scale)

  5. ➝ Tap to switch between maps

Macro:
Home → Radar & Satellite: Slide in
Tab switching: Horizontal swipe

Micro:
Map load: Zoom-in on map

Flow 6: Access weather safety & information

Purpose: Educate users on weather safety actions.

Flow:

  1. From Home Screen

  2. ➝ Tap action menu

  3. ➝ Go to Weather Safety & Info

  4. ➝ See 5 expandable tabs:

    • What to do during an earthquake

    • What to do after an earthquake

    • Northeast Monsoon Overview

    • Inter-monsoon Overview

    • Southwest Monsoon Overview

  5. ➝ Tap a tab ➝ Content expands

  6. ➝ Read instructions / guidance

  7. ➝ Collapse and switch tabs as needed

Macro:
Home → Safety Info: Slide in

Micro:
Section expand: Slide down


Flow 7: Change app settings

Purpose: Adjust language or notification preferences.

Flow:

  1. From Home Screen

  2. ➝ Tap action menu

  3. ➝ Go to Settings

  4. ➝ Choose Language Setting

    • Switch between English / Malay

    • UI updates to selected language

  5. ➝ Toggle Notification Settings (on/off per alert type):

    • Earthquake/Tsunami

    • Thunderstorm

    • Heavy Rain

    • Strong Wind & Rough Sea

    • Tropical Cyclone
Macro:
Home → Settings: Slide in

Micro:
Toggle switch: Slide and glow or color shift
Language selector: Swipe down

Flow 8: View about us & help

Purpose: Learn about the app and get support.

Flow:

  1. From Home Screen

  2. ➝ Tap action menu

  3. ➝ Go to About Us

  4. ➝ See short intro text

  5. ➝ Tap Help & Support link

    • external link (optional)

Macro:
Home → About Us: Slide in

Micro:
Text content: Pop-up




muCuaca App Prototype Submission


Interaction Design Proposal and Planning



REFLECTION

During this Task 2, I focused on planning the interaction design for my weather app. Since a weather app isn’t like social media or e-commerce apps where users explore or scroll for a long time, the main purpose here is really just to check the weather quickly and easily.

Because of that, I made sure the flow goes straight to the Home Screen after getting location access. Other features like weather alerts, radar maps, or safety info are additional, they are useful, but not something the user needs every time. I designed them to be accessible through an action menu so they don’t interrupt the main experience.

Overall, this task helped me understand how interaction design is about making the app feel smooth and intuitive, even if it’s simple. The small animations also added a nice touch to make the app feel more responsive and modern.



Comments

Post a Comment

Popular posts from this blog

Experiential Design | Task 1 : Trending Experience

Image
23/09/2024 - 14/10/2024 (Week 1 - Week 4) Yong Xiao Tong / 0368290 Experiential Design / Bachelor of Design (Honours) in Creative Media  Task 1: Trending Experience LIST Instructions Exercises • W eek 1 • W eek 2 • Week 3 • Week 4 Proposal  Ideas Reflections INSTRUCTIONS WEEK 1 Task 1 Identify what type of XR experience is AR or MR? Describe why? I think XR experience is an AR experience because it shows digital information on top of the real world without interacting with real objects. XR includes MR, but it’s broader because it also covers AR and VR. So, XR is not the same as MR, but MR is a part of XR. Activity 1 launch google.com on phone browser, search for dinosaur or dog, cat, tiger. View in 3D/ View in AR (Life Size) ...
Read more

Game Development | Task 2 : Art Asset Development

Image
22/05/2025 - 08/06/2025 (Week 5 - Week 7) Yong Xiao Tong / 0368290 Game Development / Bachelor of Design (Honours) in Creative Media  Task 2: Art Asset Development In this task, we need to create the art assets for our game.  This includes designing characters, environments, items, props, obstacles, power-ups, and the HUD. Characters Our game features 4 characters: 1 protagonist and 3 unique enemies. Aura (Protagonist) idle walking jump boost Human patrol (Enemy) human patrol Dog (Enemy) idle attack Owl (Enemy) idle attack NPC Firefly firefly Effect boosting UI Elements buttons Props & Obstacles home grass direction signboard box ladder moon spike Backgrounds & Tileset For our game, we designed four unique levels, each with its own distinct background to reflect the environment and mood of the stage.  Background design process in Adobe Illustrator The backgrounds are as follows: BG#1: City street scene, filled with urban elements and modern structure...
Read more

Application Design 1 | Project 1 : Mobile Application Proposal

Image
23/09/2024 - 14/10/2024 (Week 1 - Week 4) Yong Xiao Tong / 0368290 Application Design 1 / Bachelor of Design (Honours) in Creative Media  Project 1: Mobile Application Proposal Instructions Project 1: Mobile Application Proposal For this project, we need to create a proposal documentation to redesign an existing app that we find unsatisfactory in terms of user experience or interface design.  We have to find 3 app options first, and then decide on the final one from these three. The 3 app options I chose are: 1. myCuaca 2. Coinbase 3. Secret Recipe MY First Draft Proposal Slide (with 3 applications) First Application Proposal (3 apps) Before proceeding to the final proposal, I consulted with Mr. Zeon and received approval to choose myCuaca as my final app option. Final Proposed Idea Category: Weather Application: myCuaca The home screen is blank at first, so I thought this was the design. However, when I allow locati...
Read more