Application Design 2 / Task 3

18/5/2024 - 8/6/2025 (Week 7 - Week 11)
Shawn Wong Kai Hen / 0375372
Application Design 2 / Bachelor of Design (Hons) in Creative Media
Application Design 2 - Task 3

---

  INTRUCTIONS  

---

  Task 3 Requirement  

With Task 2 complete, it's time to move from concepts to creation.
In this phase, I'll be transforming my ideas into functional micro and macro interactions , as well as fully animated elements for the app. These won't just be visual mockups—they'll be real, export-ready assets designed for seamless integration into the final build.

To achieve this, I'll be using Jitter and LottieFiles to craft high-quality animations, which will then be implemented directly into FlutterFlow .

  Animation Progress  

1. Starting Scene Logo Animation

Fig 1.1 Logo Animation Creation

Because of limited knowledge using lottiefiles, so i have found some different animation creation website which is Jitter. I just need to import my SVG logo into it and created to text inside and just animated, is easy and fast to create the animation.

After i done create the animation in Jitter and i export it to JSON format, because in flutter flow only JSON can be import as animation. So here are the outcome after i have import the animation in to Flutter Flow.

The Logo will start pop out with an outlines circle and scale up, after scale up the Dadi Logo will scale up in the middle of the circle, after that it will slide to the left go to the position, while during the sliding to left, the text Dadi Cinema will show u p.

2. Starter Page Animation

Fig 2.1 Starter Page Animation

Alright, here i starting to create the transition animation for the elements. So went user click next, there will have animation showing up went next scene appear. Demo As below:

Here are the transition animation outcomes, so went the user click next button, the next pages will fade and slide in the image first. After that, the all text and button at the bottom will appear one by one by fade in and slide up. 👀

3. Sign Up Flow Animation

Fig 3.1 Sign Up

Fig 3.2 Verification Page

Fig 3.3 Register Success Page

Here are the sign in flow for the app, here trying to apply some transition animation for each page to page. Went the page fade in, the container will slide up from the bottom with all the text and button together because all the element are in the container so if animate one by one the transition will look messy. And for the vector at the top are the container totally slide up and it will scale big in Elastic animation, after that will have a shimmer swipe over the vector.

Here are the transition animation demo, at the last register success, i also have create an animation using lottiefiles for the successful animation.

Fig 3.4 Register Success Animation

I have create the animation in lottielies. I create the duration around 3 seconds and left a empty 1 seconds at the front. Why? because i need it appear went the previous page totally finish animated and this success animation will play after it.

4. Home Page NavBar Micro Animation

  Walkthrough Video Present  

---

  REFLECTION  

Experience

In Task 3, developing interactive components for my DADI Cinema app challenged me to move beyond static design and embrace real-time user interactions. Shifting from screen mockups to functional prototypes requires a deeper understanding of how users perceive feedback and motion during app navigation. I began experimenting with micro-interactions , such as button tap animations and subtle hover effects, to enhance clarity and responsiveness. On a larger scale, I implemented macro-transitions like animated screen slides to create smooth, guided flows—especially between key pages like “Now Showing,” “Seat Selection,” and “Booking Confirmation.” FlutterFlow's visual logic tools made this process accessible, allowing me to build and test animations without writing code, which significantly improved my speed and confidence in iteration.

Findings

As I refined the user experience, I noticed several patterns that influenced my design decisions:

• Simple animations , such as scaling a button on tap, give users immediate feedback, improving interaction clarity and trust.

• Animated transitions between pages helped reinforce context shifts, such as moving from the movie details page to the booking interface, making navigation feel more intentional and fluid.

• Well-timed animations —short and subtle—maintained the app's pacing, while overly long effects disrupted the user journey and made the interface feel sluggish.

• Motion design reduced cognitive load by directing attention to key information like seat availability, without overwhelming users with too many visual elements.

Observations

Through this process, I discovered that interactivity is not just a layer of polish—it's essential to usability. For instance, confirming actions like booking a seat or selecting a time slot with real-time visual feedback helped eliminate user uncertainty. I also realized that micro- and macro-animations work best when they're coordinated ; when movement throughout the app feels consistent and purposeful, users naturally follow the flow without confusion. Importantly, not all animations add value—those without a clear function can distract or confuse. What proved most effective were functional animations that support the user's journey, like loading spinners, confirmation pop-ups, and sliding page transitions.

Using FlutterFlow as a no-code platform empowered me to experiment freely and integrate interaction logic into visual design. It allowed for quick testing and refinement, reinforcing an iterative mindset essential for designing responsive and engaging user experiences—something I now view as a core part of any app development process.

---