APPLICATION DESIGN II / PROJECT 03

on

 09.06.2025 - 07.07.2025 (Week 8 - Week 11)

Application Design II / Bachelor of Interactive Spatial Design

Chiah Cai Jun / 0365352

----------------------------------------------------------------------------------------------------

PROJECT 03: INTERACTION COMPONENT DESIGN & DEVELOPMENT

PROJECT 03 BRIEF

In this assignment, we are required to make a workable application by transforming the layout designs and functions from Figma to Flutterflow. We should only focus on our chosen MVP, which is the main app flow that the potential users will be going through. Besides, animation is the most important element that we should focus at the current stage as it can enhance user experience and engagement by improving usability and guiding navigation while making our application to feel more intuitive and less robotic. 

Study Phase
I have chosen Moonlight Cake House as my application to study and I decided to focus on the journey from the very beginning, where users will be welcomed by the splash screen and three onboarding pages. Next, new users will need to register a new account to proceed, while old users can sign in to their previous accounts. The overall user flow will be aiming to purchase a cake through delivery and keep track of the order status. From here, I have stated a few key screens that my Moonlight Cake House application will be including:

Besides having these main screens that are important for cake ordering, designing UI elements such as the pop-up windows and bottom sheets are also crucial for providing additional information, options or actions without requiring a full screen transition while getting to enhance user experience and engagement at the same time. I decided to include the pop-up windows in the stage where users have successfully done some actions and require them to do some choices that navigates them to different functions. Here are the components that I have created for my application:

Execution Stage
After planning the overall structure of my app flow, I started to work on designing the screens by carefully transforming my layout from Figma to FlutterFlow. Remain the consistency of design is required to ensure that the overall user interface and user experience are smooth as tested previously.

A. Splash Screen
Macro Animation:
  • The Moonlight Cake House Logo fades in and remain for a few seconds, then fade out from the screen.
  • I imported the logo image and designed the tagline in Canva while adding the fade in animation by adjusting the duration and speed so it shows a blurry effect that appears slowly. I exported the file as GIF and inserted in my splash screen.

B. Onboarding Page
Macro Animation:
  • After the splash screen fades out, the first onboarding page background image will fade in, followed by the texts and buttons. 
  • I made some difference between the "skip" and "next" buttons, so everytime when users click on the "next" button, the current onboarding page will exit by sliding to left, guiding users to look at the next content that will be appearing on the right. 
  • However, if users click on the "skip" button, the current onboarding page will fade out directly and the next content will slide up.
Micro Animation:
  • The title of the onboarding pages will fades in first, following by the descriptions that explaining the highlights of Moonlight Cake House. 
  • Then, two buttons will fade in together, allowing users to choose which direction that they wish to proceed.

C. Login & Register New Page
Macro Animation:
  • When users click on the "skip" button in the onboarding page, the brown menu will slide upwards, showing an effect that the sign-in and register new window has been pulled up from the bottom part of the page.
Micro Animation:
  • The title of the onboarding pages will fade in first, followed by the descriptions that explain the highlights of Moonlight Cake House. 
  • Upon selecting the Sign In or Register New options, the related contents will slide either to the left or right. 
  • While selecting the Register New capsule, the Sign In contents slide to the left, and the Register New content slides in from the right side of the page.
  • Selecting the Sign In capsule will cause the Register New content to slide rightwards, and the Sign In content slides in from the left.
D. Register New Details
Macro Animation:
  • Whenever the current page progress has been completed (verifying email and creating an account), the next page will slide from right to left, directing users to the next step that should be done.
Micro Animation:
  • When users enter their email address and click on the "Send OTP" button, the email content will then slide to the left, showing the OTP content which requires users to type the code received from their email (in the current stage, the OTP codes are fixed, users don't need to type in manually)
  • The progress bar in account registration will show the progress for each checkpoint by having 


Video Presentation

Comments

Post a Comment