Application Design 2 / Task 2

Shim Yi Xun || 0363292

Bachelor of Design (Honours) in Creative Media
  Application Design - DST 61004  

Application Design 2 - Task 2

  Overview  

> Module Information Booklet

> Class Activities

> Task Instruction

  • App Flow Mapping
  • Storyboard
  • Animation Prototyping
  • Prototype Overview
  • Presentation Video

> Reflection

  Module Information Booklet  


  Class Activities  

Activity 3: LottieFiles
We learned how to create animations using LottieFiles. I used LottieFiles to create an animated version of the app logo for this task, adding movement and appeal to the app's splash screen and branding.

Activity 4: FlutterFlow
We also learned how to use FlutterFlow, a platform for building mobile app interfaces. Through this, I gained hands-on experience in setting up app navigation by adding multiple pages and defining actions that link them together.


  Task Instruction - Interaction Design Proposal and Planning  

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.

Requirements:
1. 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.

2. Animation Prototyping:
Micro & Macro Animations.

3. 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.

4. Video Presentation
With camera on.


  App Flow Mapping  

To design the app flow for the Kummute app, I began by mapping out the entire user journey from entry point to ride completion. This involved creating a visual map of the app’s structure, outlining each key screen, and planning how users would navigate between them. This guideline can help me to ensure that the experience is smooth and intuitive.

The App Flow Mapping:
Click HERE to view on FigJam

  Storyboard  

For the Kummute app, I created a detailed storyboard that not only maps out the user flow, but also includes the micro animations used throughout the app. These animations play an important role in making the app feel more alive, intuitive, and enjoyable to use. To keep things clear and organized, I organised the animations into three categories: Onload, In-App, and Offload.

Onload
These animations happen when a new screen appears. They’re simple but effective, like a screen sliding in or fading in when the user navigates to it. The goal here is to create a smooth entrance and help users ease into the next part of their journey, whether they’re landing on the home page or opening the ride booking.

In-app
This is where most of the micro animations happen. These are the small touches that improve the overall user experience, like when sections transition smoothly during the booking process, or when a loading animation appears while the app searches for available rides. Buttons also have subtle visual feedback when tapped, so the user knows their action has been done. These details may be small, but they make the app feel responsive and polished.

Offload
These animations come into play when the user leaves a screen or completes an action. It’s all about closing things out in a clean, intentional way, like a screen smoothly sliding away or fading out. These transitions make sure that leaving a page feels just as seamless as entering one, keeping the experience consistent and fluid from start to finish.

The Storyboard:
Click HERE to view on FigJam


  Animation Prototyping  

At this stage, after completing the preparation and planning, I moved on to creating the animation prototype in Figma.

Splash Screen
Macro:
- Page slide up when offloading.
Micro:
- A van driving animation indicates loading.
- Once loading is complete, the logo words appear.

Onboarding Page
Macro:
- 3D graphics fade in smoothly.
Micro:
- The “Next” and “Get Started” buttons darken in colour when pressed, providing visual feedback.
- The progress indicator dot elongates and turns orange to indicate the current page.

Login Page
Macro:
- The page slides in from the right to the left during onload.
Micro:
- The “Log In” button darkens in colour when pressed.

Home Page
Macro:
- Page fades in while onloading.
Micro:
- Content slides in from below, appearing sequentially in an orderly manner.

Menu Bar
Macro:
- Menu bar slides in from right.
Micro:
- Background overlay appears simultaneously.

Pickup/Drop-off
Macro:
- Page slide in from left. 
- The bottom rectangular section slides up slightly from the bottom.
- The background map slightly shifts to indicate that the location has been successfully positioned.
Micro:
- The progress indicator lights up starting from step 1.
- The selected location is bolded to highlight user choice.
- The "Next" button will activated in colour if the location is selected.
- Buttons darken in colour when pressed, providing feedback.

Select Location
Macro:
The white space section extends upwards a bit when comes to this section.
Micro:
- The progress indicator is collapsed to keep the user’s focus on selecting a location.

Save Location
Macro:
- Pages slide left in and slide right out.
Micro:
- After entering address remarks, the “Save Address” button will activated.
- Button darkens in colour when pressed, providing visual feedback.
If added saved address, the “Save” button will automatically change to “Saved” and activated heart.
- The saved address will switch its previous icon from a recent icon to a heart icon, indicating the address has been saved successfully.

Ride Information
Macro:
- The white space section slightly extends upward to accommodate the input area.
Micro:
- The progress indicator step 2 lights up.
- The buttons are hidden while the user is selecting or inputting information, ensuring the content doesn't appear cluttered.

Loading Page - Finding Nearby Drivers
Macro:
Micro:
- Displaying loading animation to indicate progress.
- The progress indicator step 3 lights up.

Loading Page - Ride Confirmed
Macro:
Micro:
- The progress indicator will be collapsed.
- Displaying confirmed animation to provide visual feedback.

Ride Status Page
Macro:
The white space section extends upwards.
Micro:
- A notice appears displaying the current traffic condition to keep the user informed.
- Button darkens in colour when pressed, providing visual feedback.

In-Chat Page
Macro:
- For calling, the page fades in.
- For chat, the page slides up from the bottom.
Micro:
-

Cancel Ride  
Macro:
If the “Cancel Ride” button is clicked, the page slides to the right and back to Home Page.
Micro:
- A notice appears stating “You have cancelled the ride.” to inform the user of the action.

  Prototype Overview  

Click HERE to view the prototype in full screen.


  Presentation Video  

Click HERE to view the video on YouTube.


  Reflection  

Looking back on this stage of the project, I’ve deepened my understanding of how interaction design shapes the overall user experience. Starting with the app flow mapping for the Kummute app, I carefully planned out how users would move through the app, from launching it to completing a ride. This helped me visualize the structure clearly and make sure each step in the journey felt smooth, intuitive, and connected. The process of creating flowcharts and storyboards allowed me to think not just about screens, but about transitions, timing, and how animations can guide users.

I also had the chance to explore LottieFiles, where I created a simple yet engaging animation for the app logo. It was a fun way to bring branding to life and add movement to the splash screen. At the same time, I began building animation prototypes in Figma, carefully integrating both micro and macro animations to support each user action. These small touches—like animated buttons, progress indicators, or screen transitions, really made the prototype feel more interactive and polished. It gave me a new appreciation for how motion can improve clarity, reduce friction, and make digital experiences more enjoyable.

Even though I haven’t started building directly in FlutterFlow yet, learning about its interface and capabilities helped me understand how my prototype could eventually come to life in a real development environment. I now have a clearer sense of how screens are structured, how navigation actions work, and how animations can be applied in practice. This phase of the project has taught me that interaction design is not just about visual appeal, it’s about creating meaningful and thoughtful experiences that guide users every step of the way.

    Comments

    Popular Posts