Application Design 2 - Final Project: Completed App
Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media
Application Design 2
Final Project: Completed App
Index
Instructions
For my final project, I need to transform the Figma prototype into a fully functional app using FlutterFlow. This task continues from the MVP I built in Task 3, where the main goal now is to refine and enhance every feature to create a more complete and polished product. I will integrate all visual assets, ensure smooth interactions, and enrich the experience with animations to make the interface more engaging. Throughout this process, I will focus on stability and usability, turning the prototype into a real, working application. At the same time, I will document my reflections and learning outcomes in my E-Portfolio, analyzing both the successes and challenges I face during development. This project is not only about coding but also about refining design thinking, improving technical skills, and delivering a product that feels seamless to use.
For the final project, I am expanding the MVP from Task 3 into a complete app using FlutterFlow, refining it based on my Figma prototype. This stage focuses on adding essential pages and integrating animations to create a silky, seamless user experience. The newly developed pages include:
-
Sign Up Page
-
OTP Confirmation Page
-
OTP Verification Animation
-
Homepage's Hamburger Menu
-
Navigation Bar
-
Movies Page
-
Location Page
-
Promotion Page
-
Profile Page
-
Payment Successful Animation Page
-
My Booking Page
Moving forward, I will continue polishing the design, improving usability, and ensuring the app runs smoothly while delivering an engaging and cohesive user experience. All development reflections will be documented in my E-Portfolio as part of my learning journey.
|
| Fig1.1 Sign Up Page |
The Sign Up Page is designed with two clear steps to prevent overwhelming the user with too much information on a single screen, a problem I noticed in the original Figma prototype. To guide the user, I implemented a progress indicator at the top, where the current step is highlighted in bright orange, making it visually clear which stage they are at.
|
| Fig1.2 Country code & Date of Birth |
In Step 1, users are required to enter their mobile number. To make this process more user-friendly, I added a country code selector next to the input field. Instead of using FlutterFlow’s default picker, which could not be customized to fit my theme colors and background style, I built a custom component. This uses a custom dialog that pops up when the dropdown is clicked, allowing users to select their country code. The dialog is finely tuned for positioning and automatically closes when an option is selected or when the user clicks outside the box, ensuring a smooth experience. Additionally, for the Date of Birth field, I implemented an action that triggers a Date/Time Picker when the calendar icon is clicked. Once a date is chosen, the app updates the input field using Update Page State, making the interaction dynamic and user-friendly. After completing this step, the user can move on to Step 2.
|
| Fig1.3 Sign Up step 2 |
In Step 2, the design focuses on security and usability. The password fields are set to Password Field mode, with a toggle icon that allows users to show or hide their password while typing. Lastly, a checkbox ensures that users agree to the Terms & Conditions and Privacy Policy before they can submit the form. Once checked, the Submit button becomes active, completing the registration process.
|
| Fig1.4 OTP Conformation |
The OTP Confirmation Page verifies the user’s identity through a 6-digit One-Time Password (OTP) sent to the phone number they entered during registration. The interface is kept minimal to keep the user focused on entering the code. When the user completes all six digits, an action is triggered to automatically validate the input. If the OTP is correct, the app navigates to the next page seamlessly without any extra clicks.
Additionally, to improve user experience, I implemented a resend OTP feature. If the user does not receive the OTP, they can request to resend it after a set countdown period. This ensures the process is both secure and user-friendly, minimizing friction while maintaining smooth navigation.
|
| Fig1.5 OTP Verification |
After the correct OTP is entered, the app automatically navigates to the OTP Verification Animation Page, where a success animation confirms the verification. This animation is implemented using a Lottie JSON file. Initially, I created the animation in After Effects and exported it using a plugin to JSON format. However, when importing into FlutterFlow, one animation lost its colors and became black and white, while another failed to play. To solve this, I used the LottieFiles plugin for exporting. Although some visual effects were lost, the animation was successfully displayed within the app.
|
| Fig1.6 AE do animation |
To enhance user experience, I added an action timer. This timer ensures that the Continue button only becomes visible after the animation finishes playing, creating a smooth transition and guiding the user naturally to the next step. Once visible, the Continue button allows the user to proceed directly to the Homepage.
|
| Fig1.7 Hamburger Menu |
For the Homepage, I implemented a Hamburger Menu as a custom component, giving users an organized way to navigate the app. The menu is triggered by an icon button using an action drawer that slides open with a smooth animation. Users can also simply click outside the menu to close it, ensuring a natural and intuitive interaction.
|
| Fig1.8 Component hamburger menu |
To avoid overwhelming users with too much information at once, I designed
collapsible sections within
the menu. Specifically, the menu is divided into three expandable groups:
Account,
Shopping, and
Info & Support. These
sections are
collapsed by default and
can be expanded by tapping the
arrow icons, which also
dynamically
change direction based on
the state. To achieve this, I created several
local component state variables
(e.g., isAccountExpanded,
isShoppingExpanded,
isInfoExpanded) to control the
visibility and toggling of each section.
|
| Fig1.9 Drawer |
This approach keeps the interface clean, prevents user confusion, and adds a layer of interactive control to the navigation experience.
|
| Fig1.10 Navigation bar |
The Navigation Bar serves as the primary control for switching between the four main sections of the app: Movies, Location, Promotion, and Profile. I designed it using my theme color (bright orange) as the background, ensuring strong brand consistency and visual impact.
To clearly indicate the active page, I implemented a black rounded indicator that highlights the selected tab. The active tab not only changes color but also displays its label (e.g., Movies, Cinemas, Profile), while the inactive tabs remain as icons only. This visual feedback makes navigation intuitive and helps users immediately recognize where they are within the app.
This approach keeps the UI clean, avoids confusion, and maintains a consistent visual hierarchy while providing a smooth navigation experience.
|
| Fig1.11 Movies Page |
The Movies Page is designed to give users an engaging way to explore all available films. At the top, there is a search bar where users can quickly search for a movie by name, accompanied by a filter button that allows them to refine results. Below the search section, the page features a highlighted main poster for currently promoted films, followed by a scrollable list of additional movies.
|
| Fig1.12 Movie detail |
When a user taps on a movie poster, they are navigated to the Movie Detail Page. This page provides all essential information about the selected film, including genre, director, starring actors, duration, and release date. It also contains a detailed synopsis, giving users insight into the storyline. Users can click Book Now to proceed with ticket booking directly from this page. Additionally, a trailer section is included, allowing users to watch the official trailer without leaving the app.
This design creates a seamless flow from movie discovery to booking, ensuring a rich and user-friendly browsing experience.
|
| Fig1.13 Location Page |
The Location Page helps users easily find and manage their preferred cinema locations. At the top, it features a search bar and filter option so users can quickly locate specific cinemas. The page is divided into two sections: Cinemas Nearby, which shows the closest locations based on the user's current position, and All Cinemas, which lists every available cinema.
Users can mark a cinema as a favorite by clicking the favorite icon, which pins it to the top for quick access in the future—making ticket booking more convenient. If users are unsure about the exact address, they can tap the location icon, which displays the cinema’s address and opens map navigation to guide them there. Additionally, each cinema card includes a drop-down arrow; when clicked, it reveals a list of movies currently showing at that location, allowing users to directly explore and book tickets.
This design ensures users can find cinemas quickly, navigate easily, and access movie options with minimal effort.
|
| Fig1.14 Promotion Page |
The Promotion Page is designed to keep users updated on their membership status, available rewards, and ongoing promotions. At the top, it prominently displays the user’s membership card (with a QR code), their current tier (e.g., Gold), and the total points they have accumulated. This clear presentation lets users instantly know how close they are to unlocking their next reward.
Below the membership details, there are two main action buttons:
-
My Reward – allows users to view the benefits they can redeem with their current points.
-
History – shows their past redemption and activity history.
Further down, the page features a Special Deals section where users can browse the latest offers and promotions, making it easy to take advantage of discounts or exclusive benefits. This layout ensures users can not only track their loyalty points but also stay informed about new deals, enhancing engagement with the cinema’s reward system.
|
| Fig1.15 Profile Page |
The Profile Page provides users with an overview of their account details and access to essential account-related functions. At the top, it displays the user’s name, email, and an option to view more details. There is also an Edit Profile button that allows users to easily update their personal information.
Below the profile section, several quick-access tiles are available, including:
-
FAQ & Support – for help and assistance.
-
My Bookings – to review current and past bookings.
-
My Wallet – to manage payment options and balance.
-
Contact Us – for direct communication with support.
-
Policy – to view app and service policies.
-
Settings – to configure user preferences.
Finally, a Log Out button is placed at the bottom, enabling users to securely sign out of their account. This page consolidates all account management tools into one user-friendly hub.
|
| Fig1.16 Payment Successful Animation |
|
| Fig1.17 Animation |
The Payment Success Animation Page appears right after the user completes the payment process. This screen is designed to simulate a smooth transaction flow. Initially, it shows a loading animation with a progress indicator, giving users visual feedback that their payment is being processed.
|
| Fig1.18 Action |
I implemented a
local page state variable (showMainContent)
combined with an
action delay (3 seconds) to
control when the success content appears. Once the delay finishes, the
animation transitions to display the
Payment Success message,
confirming that the ticket has been successfully booked.
After the animation finishes, the “View My Ticket” button becomes active, allowing users to directly navigate to their ticket details. This sequence ensures users feel confident about their purchase while enjoying a visually engaging confirmation flow.
|
| Fig1.19 My Booking |
The My Booking Page allows users to conveniently manage and view their movie tickets. At the top, there are two tabs: Upcoming and Past, enabling users to easily switch between their upcoming bookings and their previous ticket history.
Each booking card displays comprehensive ticket details, including:
-
Movie title
-
Genre and format (e.g., Action, 2D)
-
Cinema name and hall number
-
Show date and time
-
Seat number
Additionally, every ticket includes a QR code that users can scan at the cinema entrance for seamless access. To improve usability, a Download Ticket button is provided, allowing users to save the ticket to their device for offline use. This ensures that even without internet access, they can still present their ticket when needed.
The clean layout and detailed information make this page an essential hub for ticket management, offering users both convenience and confidence for their cinema visits.
Web Deploy Version: https://lfscinema-guoying.flutterflow.app/
Presentation:
Reflections
Experience
Throughout this project, I went through a journey that was both challenging and rewarding. At the initial stage, I felt uncertain about how to define the scope of my work and identify the right direction to take. This uncertainty forced me to step out of my comfort zone and explore multiple approaches before settling on a clear plan. As I engaged with the tasks, I gradually built confidence in my ability to organize ideas and manage time effectively. The process required me to balance research, creative thinking, and practical execution, which at times felt overwhelming but ultimately strengthened my problem-solving abilities. Each phase—from planning and researching to implementing and presenting—provided valuable lessons on persistence, adaptability, and self-discipline. By the end, I felt a sense of accomplishment not only because I completed the project but also because I grew personally and academically.
Observation
Findings
Comments
Post a Comment