Application Design 2 - Task 1: Self- Evaluation and Reflection

24.04.2025 - 15.05.2025 （Week 1 - Week 4)

Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media

Application Design 2

Task 1: Self- Evaluation and Reflection

---

Index

1. Lectures

2. Instructions

2.1 Application Design 1 Review

2.2 UXLab Assistant Analysis and improvement

2.3 Submission

3. Reflection

---

Lectures

Week 1: In our first class, Mr. Razif introduced us to the MIB (Module Information Booklet) and briefed us on the tasks we would be working on throughout the semester. He also introduced the use of ChatGPT's UXLab Assistant, which we could leverage for Task 1 — to assist in design analysis and improvement. 

Later, we explored how tools like FlutterFlow and GitHub Copilot could be integrated into our workflow for animations and coding. We ended the session by registering accounts for these platforms.

Week 2: There was no class this week due to a public holiday.

Week 3: 

Fig1.1 Boarding Pass Exercise

This week, we worked on a group design exercise where we were tasked with redesigning a sample airplane boarding pass. We began by conducting light research and identifying key information to be displayed. 

After that, we proceeded with rough layout planning and design ideation. Each group then presented their design concept to the class. Mr. Razif provided feedback on each presentation, highlighting what needed improvement and offering valuable guidance on layout clarity, information hierarchy, and usability considerations.

---

Instructions

MIB for Application Design 2

Requirement:

• Self-evaluate and reflect on your final mobile app design 1 project.
• Document issues, problems, and propose improvements for aesthetics and user flow.
• Understand mobile app design as an iterative process with constant improvements.  
• Submit documentation in Google Docs for feedback.
• Write a self-reflection blog comparing old and new design versions.

Application Design 1 Review

In the previous Application Design 1 project, I redesigned LFS Cinema, an app for browsing movies and booking tickets.

While LFS Cinema lacks major advantages compared to modern cinema apps, its quick booking process stands out. I focused on enhancing this as the app’s Minimum Viable Product (MVP). I also improved the UI by updating typography, colors, and layout to match modern aesthetics and improve readability. The UX was refined to better fit users' habits for a smoother experience.

New key features were added, such as an in-app food ordering system to allow a full booking-to-dining flow, avoiding queues at the cinema. A loyalty program was also introduced to encourage repeat usage and reward customers. Overall, I aimed to improve both the look and functionality to offer a better user experience.

Below is the Figma link to the redesigned LFS Cinema prototype.

To support us with instant feedback and assistance, our lecturer Mr. Razif introduced the UXLab Assistant, a custom AI bot built on ChatGPT.

The UXLab Assistant provides comprehensive reviews and helps make our design journey smoother and more efficient. It is highly accessible and convenient across different stages of our work.

For Task 1, we can use the UXLab Assistant to review every screen and section of our redesigned application. It offers detailed analysis, suggestions for improvement, and even inspires new ideas, helping us refine our projects effectively.

UXLab Assistant Analysis and improvement

To systematically refine my application design, I divided the interface into 12 key sections and consulted the UXLab Assistant for a detailed evaluation. The assistant provided both highlights of what worked well and targeted suggestions for improvement. After reviewing the feedback, I revised each section accordingly and continued to fine-tune the individual components—step by step—toward achieving the final polished design outcome.

1.  App Loading Page
2. Log In / Sign Up + OTP Flow
3. Home Page + Sidebar
4. Movies Page
5. Cinemas Location Page
6. Promotions / Membership Page
7. Profile Page
8. Quick Booking Flow
9. Seat Selection Flow
10. Food & Drinks Flow
11. Payment Flow + Success Animation
12. My Booking Page

Overall, 

1. Improve usability 

• Increase the size of the button area (especially the touch button) 

• Increase feedback on important actions (toast, zoom micro-animation) 

• Protection mechanism (to prevent missed selection, wrong operation) 

2. Strengthen visual guidance (Visual Hierarchy) 

• Important information (time, theater, ticket price) Bold or heightened contrast 

• Spacing or background color changes between blocks to increase readability 

3. Emotional Design 

• Loading and successfully adding small emotional details to the animation 

• A small celebration prompt after payment is completed and Add to Cart

• A small prompt or dynamic before the movie starts 

Improvements & Iterative Design Refinement

To elevate the user experience and visual polish of my application, I iteratively refined each section based on targeted feedback. Below is a breakdown of the improvements made across the 12 key components of the app

1. 🎬 App Loading Animation Screen

Fig2.1 Loading Page Initial

✅What works well

Background Choice: The background featuring cinema seats creates an immediate contextual relevance, helping users intuitively recognize that this is a movie-related app. This aligns with Jakob’s Law, which emphasizes consistency with user expectations.

Brand Visibility: The LFS Cinemas logo is centrally placed and clearly visible, reinforcing brand identity—a smart approach to loading screen branding.

Progress Feedback: A dynamic progress bar provides clear feedback that loading is in progress, effectively reducing user anxiety—this follows Nielsen’s heuristic of system status visibility.

Visual Consistency: Each loading stage (0%–100%) maintains a consistent interface with only the progress bar updating, reflecting a polished and professional design.

🚀 Important improvements

• The progress bar is more obvious (bold + contrasting colors) 

• The progress number (%) is enlarged, and the progress bar is slightly extended 

• Can add fast-out animation to make loading more natural 

• Add a little motion graphics (such as light) before the end of Loading

🧩 Improvements & Iterations

Fig2.2 Loading Page Optimized

I adjusted the loading animation to improve visual clarity by thickening the progress bar and enlarging the numeric indicators. The percentage value and bar were made bolder to enhance contrast, ensuring users can easily recognize loading status at a glance—even in low-light environments.

2. 🎟️ Log In & Sign Up + OTP Flow

Fig2.3 Log In Initial

Fig2.4 Sign Up Initial

Fig2.5 OTP Flow Initial

✅What works well

Consistent Branding: The cinema seat background continues across these screens, preserving a cohesive visual identity and reinforcing brand consistency.

Clear Visual Grouping: The login and sign-up pages are well-organized, with clearly separated input fields, action buttons, and social login options for a neat visual structure.

Straightforward Labels: Buttons like "Log In" and "Sign Up" use direct, unambiguous wording, reducing confusion and improving usability.

Social Login Options: Providing login via Facebook, Apple, and Google gives users flexibility, aligning with the principle of user control and freedom.

OTP Verification: The OTP process is smooth, with a successful checkmark animation that reinforces task completion and provides positive feedback.

Error Tolerance: Including a “Resend OTP” option shows thoughtful design that accounts for common user mistakes, enhancing the experience.

🚀 Important improvements: 

• Larger font (forms, buttons, prompts) 

• Small animation when Loading (press the Login button to zoom slightly) 

• Error (such as wrong password) with red border + clear error message 

• Add Jump control (Continue button) instead of skipping directly after OTP verification is successful

🧩 Improvements & Iterations

Fig2.6 Log In Optimized

Fig2.7 Sign Up Optimized

Fig2.8 OTP 

Typography across all login screens was enlarged and thickened to enhance readability and tactile usability. Spacing between third-party login buttons (e.g., Google, Apple, Facebook) was refined to reduce clutter. To prevent cognitive overload during the Sign-Up process, I split the form into two steps and added a stepper to guide users progressively. After successful OTP input, a “Continue” button was added, allowing users to control the pace rather than being auto-redirected—a small change that supports user autonomy.

3. 🏠 Home Page + Sidebar Analysis

Fig2.9 Home Page Initial

✅What works well

Visual Consistency: The color palette of black and orange enhances the cinema-themed ambiance while ensuring brand consistency across the interface.

Clear Function Priority: Key actions like “Book Now” and “Quick Booking” are prominently displayed, reducing interaction effort and aligning with Fitts’ Law.

Intuitive Sidebar Layout: The sidebar presents features in a logical hierarchy—primary actions at the top, secondary ones below—aligned with best practices in information architecture.

Fixed Bottom Navigation: The retractable “Quick Booking” button ensures key functionality is accessible without overwhelming the user, applying the principle of progressive disclosure.

Microinteractions Enhance Context: Smooth animations when expanding/collapsing booking options provide feedback that reinforces situational awareness.

🚀 Important improvements: 

• More padding/margin between content blocks 

• When Quick Booking is folded, add a small prompt animation (such as a slight jump) 

• Special Deals section can be considered for different card styles (reduce duplication with Homepage)

🧩 Improvements & Iterations

Fig2.10 Home Page Optimized

I introduced generous padding and a card-based layout to visually separate content blocks. This not only improved clarity but also made the homepage feel more organized and breathable. The Quick Booking button was redesigned with a larger interactive area and a collapsible toggle for better usability. The sidebar was made more minimalist, and dropdown arrows were added to signal expandable categories. Additionally, sensitive actions like “Delete Account” and “Log Out” were styled in red to prevent accidental taps—an essential safety feature.

 

4. 🎬 Movies Page + Movie Detail Page

Fig2.11 Movies Page Initial

✅What works well

Clear Navigation Tabs: Category toggles like “In Cinemas” and “Coming Soon” allow users to quickly filter without relying on memory (Recognition over Recall).

Search Function is Discoverable: A magnifying glass icon and input bar make search features visible and intuitive.

Clean Poster Layout: Uniform poster sizing ensures fast scanning and easy selection, optimizing for Fitts’ Law.

Hierarchical Movie Info Layout: The large poster is followed by clear movie details (cast, duration, synopsis), making it easy to digest.

Trailer Integration for Engagement:  Trailer playback access adds immersion and encourages deeper interaction with content.

Well-Placed Call-to-Action: The “Book Now” button is prominently placed between the poster and synopsis, naturally guiding user actions.

🚀 Important improvements: 

• The "In Cinemas/Coming Soon" button at the top becomes a large tab style, highlighting the current 

• Movie Detail introduction segment, bold key information (such as release date) 

• Trailer block is more conspicuous (larger Play button + Pulse motion graphics)

🧩 Improvements & Iterations

Fig2.12 Movies Page Optimized

The movie summary layout was revised to allow more whitespace, reducing visual congestion. Posters were displayed within clean card containers for a more modern look. The Trailer button, previously overlooked, was enhanced with bolder visuals to ensure visibility and encourage engagement.

5. 🗺️ Cinemas Location Page

Fig2.13 Cinema Location Page Initial

✅What works well

Logical Categorization: “Nearby” and “All Cinemas” tabs match user expectations and support efficient exploration.

Clear Interaction Points: Each cinema entry includes icons for directions and favorites, supporting user action discoverability.

Unified Visual Identity: Consistent use of the black-orange theme reinforces brand identity.

Direct Map Access:  A dedicated button to launch map view exemplifies human-centered design, ensuring users won’t get lost.

Persistent Navigation Feedback: A fixed bottom bar constantly informs users of their location, aiding orientation and navigation.

🚀 Important improvements: 

• Add background separators or dividing lines between Nearby/All Cinemas blocks 

• Enlarge the heart and navigation buttons to improve click comfort 

• Add small animations to the collection actions (such as heart beating) 

• Add a line of "Opening Hours" tips to each Cinema (optional)

🧩 Improvements & Iterations

Fig2.14 Cinema Location Page Optimized

I reduced visual separators and beautified the spacing between cinema listings for a more refined appearance. To aid discoverability, a search bar was added, enabling users to find their nearest or preferred cinema quickly without scrolling.

6. 🎯 Promotions / Membership Page

Fig2.15 Promotion Page Initial

✅What works well

Clear Information Hierarchy: Content flows from membership identity to points, redemption actions, and promotional events—matching user expectations and mental models.

Brand Consistency: The consistent use of the black-orange theme sustains a unified visual tone throughout the app.

Reward Progress Clarity: Displaying something like “200 points | 50 more to next reward” helps users visualize progress—reinforcing goal-oriented interaction.

QR Code for Onsite Verification: Including a QR code for offline validation enhances real-world utility, seamlessly integrating digital with physical experience.

Action Buttons Clearly Labeled: Essential options like “How to Redeem,” “History,” and “My Rewards” are arranged logically, reducing cognitive load.

🚀 Important improvements: 

• Special Deals change layout (such as Carousel swipe) 

• Your Points progress bar plus dynamic loading effect 

• Use points to redeem and add clear feedback (toast prompt)

🧩 Improvements & Iterations

Fig2.16 Promotion Page Optimized

The membership card received a complete design overhaul—now sleeker and more visually appealing. The layout was simplified and redundant action buttons were removed to avoid decision fatigue, streamlining the redemption process.

7. 👤 Profile Page

Fig2.17 Profile Page Initial

✅What works well

Logically Ordered Layout: Information is structured by importance: user info (photo, name, email) first, followed by key functions, and finally the log-out option.

Consistent Theme: Maintains the established black-orange aesthetic for a cohesive look and feel.

Icon + Label Combination: Each feature uses an icon with a text label, improving usability and supporting recognition over recall.

Clear Action Naming: Every item uses direct, action-driven language, like “My Wallet,” making navigation intuitive.

🚀 Important improvements: 

• Enhanced separation (color or shade) between Profile and Function blocks 

• Edit Profile button moved to the upper right corner, close to personal information 

• Log Out button added confirmation pop-up

🧩 Improvements & Iterations

Fig2.18 Profile Page Optimized

Spacing was adjusted to ensure alignment and readability across different sections. Like on the homepage, the “Log Out” button was styled in red as a cautionary visual signal, helping to reduce unintentional exits from the app.

8. 🎟️ Quick Booking Flow

Fig2.19 Quick Booking Flow Initial

✅What works well

Reduced Decision Fatigue: Defaulting to “Today” and trending films minimizes effort, streamlining decision-making in line with Hick’s Law.

Clear Step-by-Step Flow: The modular booking steps—Movie, Cinema, Time—are clearly laid out and easy to follow.

Preview Before Confirmation: A summary step before checkout allows users to verify selections, reducing errors and enhancing trust.

Step Indicator (Progressive Disclosure): A 4-step guide (Movie, Cinema, Seat, Payment) visually reinforces user progress, enhancing orientation.

Immediate Visual Feedback: Each selection triggers clear UI changes, ensuring users are aware of every state change.

🚀 Important improvements: 

• Date can be pulled down to select other days 

• Time selection card to make horizontal swipe 

• Quick Booking Summary plus more obvious "Next" prompt 

• Add a small pen icon next to the Edit button ✏️

🧩 Improvements & Iterations

Fig2.20 Quick Booking Flow Optimized

This section underwent a full redesign, adopting a card-based layout for cleaner structure and enhanced clarity. Action buttons were enlarged for better mobile interaction, and the system now auto-selects the current date to reduce decision effort. Users only need to pick a time to proceed. To support clarity and prevent errors, the “Next” button remains disabled until a valid selection is made.

9. 🎟️ Seat Selection Flow

Fig2.21 Seat Selection Initial

✅What works well

Step Indicator: The stepper UI at the top highlights the current phase, helping users stay oriented during the booking flow.

Color-Coded Seating Map: Colors differentiate between available, booked, and couple seats, with a legend provided upfront to reduce guesswork.

Smooth Flow: From selecting a seat to confirming ticket types and adding to cart, the flow feels intuitive and seamless.

Flexible Editing: “Edit” options at every stage give users control and confidence to make changes anytime.

Optimized Visual Layout: The seat map is positioned in a natural viewing area for easier interaction and less eye strain.

🚀 Important improvements: 

• Enlarge the seating chart a little bit as a whole, or allow two fingers to zoom in and out 

• Selected seats click and add tiny zoom in motion graphics 

• Twin seats with small wiring visual logo 

• Add protective prompts before submission (can't continue without seat selection)

🧩 Improvements & Iterations

Fig2.22 Seat Selection Optimized

Posters are now integrated within elegant card frames for visual balance. I adjusted the color coding of seats and implemented hover effects to improve interactivity. Like the booking screen, the “Next” button only becomes available once a seat is selected. The ticket selection interface also uses larger plus/minus icons for easier input, especially on smaller screens—minimizing the risk of accidental touches.

10. 🍿 Food & Drinks Flow

Fig2.23 Food & Drinks Initial

✅What works well

Consistent Stepper Navigation: The same step indicator design is used, maintaining continuity throughout the purchase flow.

Well-Defined Categories: Tabs like Promotions, Top Sellers, and Drinks simplify navigation and reduce cognitive load.

Clean Product Cards: Each item includes an image and price in a neat card format, making selection quick and intuitive.

Prominent Add-to-Cart Button: A large, brightly colored “Add to Cart” button is placed at the bottom, encouraging completion of action.

Editable Cart Interface: Seat tickets and food items are separated within the cart, and each can be independently edited—enhancing control.

🚀 Important improvements: 

• Increased Spacing between Food Cards 

• Added Quick Add Quantity button （+ -）

• Pop up a small toast after successfully Add to Cart

🧩 Improvements & Iterations

Fig2.24 Food & Drinks Optimized

Spacing between food cards was increased, avoiding visual crowding and allowing items to “breathe.” Once users make a selection, an “Add to Cart” feature enables review before checkout—helping to prevent accidental or redundant orders.

11. 💳 Payment Flow + Success Animation

Fig2.25 Payment Initial

Fig2.26 Success Initial

✅What works well

Clear Step Progress: The stepper at the top tracks stages from Movie to Success, ensuring users always know where they are.

Point Redemption System: Allowing partial payment with loyalty points adds a rewarding touch, encouraging app engagement.

Multiple Payment Methods: From FPX to e-wallets and credit cards, the range of options empowers users with choice.

Transparent Pricing Breakdown: Each cost component—seats, food, fees, discounts—is itemized to build trust and clarity.

Micro-Animations During Loading: Subtle icons like locks and tickets animate during the wait, adding a touch of delight and reducing user anxiety.

Immediate Success Feedback: A clear confirmation message reassures users the transaction succeeded—providing closure and satisfaction.

🚀 Important improvements: 

• Add √ tick to confirm when selecting the payment method 

• "Applied!" prompt will pop up immediately after point redemption 

• Loading motion graphics is shortened to less than 3 seconds, and phased copy prompts are added (Processing → Booking)

🧩 Improvements & Iterations

Fig2.27 Payment Optimized

Fig2.28 Success Optimized

The “Redeem Points” button was emphasized to encourage usage and prevent point expiration—something easily overlooked by users. Voucher selections are highlighted with a distinct orange border and checkmark. I used green to display the amount saved with a voucher, helping users better visualize their rewards. 

Additionally, users must now select a payment method before proceeding—minimizing confusion. A total summary was added at the bottom for full cost transparency. Finally, I smoothed the success animation and gave users two clear post-payment options: return to the homepage or view tickets immediately.

12. 🎟️ My Booking Page

Fig2.29 My Booking Initial

✅What works well

Tabbed Categories: Tabs for Upcoming and Past bookings allow users to easily locate relevant tickets.

Well-Organized Ticket Info: All essential details—title, genre, duration, format, time, cinema, seat—are clearly presented in a structured layout.

QR Code for Entry: Instant access via QR code check-in supports a seamless, queue-free experience.

Downloadable Ticket Option: Users can download their tickets, reinforcing a sense of ownership and readiness.

🚀 Important improvements: 

• Uniform time format to enhance professionalism ("Mon, 10 Apr, 11:00 AM") 

• Add a Scan prompt near the QR Code 

• Add "Return to Home" shortcut button to the success page

🧩 Improvements & Iterations

Fig2.30 My Booking Optimized

Shadow effects were added to booking cards to create visual depth, giving the page a more premium and dimensional appearance. This small detail contributes to a more refined, polished user interface.

At this stage, the majority of functional and visual improvements have been implemented. What's left are micro-interactions and animation details—subtle refinements that enhance the experience but are difficult to convey through static images alone. I’ve pushed the design as far as feasible within the current constraints, focusing not just on aesthetics, but on clarity, accessibility, and user flow. These improvements reflect a thoughtful, user-first approach to interface design.

Figma Link and Prototype Show below:

Submission

Here is my Canva presentation slide for the LFS Cinema App redesign. It includes both the original designs and the improvements I made based on feedback. I've also included my presentation video below.

---

Reflections

Experience

Using AI tools like the UXLab Assistant throughout this project provided a completely different working experience compared to relying solely on weekly class feedback. In the past, we could only ask questions during class and wait for the lecturer’s response. With AI support, I was able to get instant guidance anytime and anywhere, which significantly improved my workflow. 

The AI acted as an always-available assistant—not replacing human feedback, but complementing it in a way that made the design process more fluid and less stressful.

Observation

One key observation was how AI could provide objective and neutral suggestions, especially when compared to subjective human opinions. While asking for feedback from peers or lecturers sometimes depends on personal design tastes (and might even cause disagreements if overdone), AI tools provided balanced and structured responses. 

They weren't perfect—but were consistent and often insightful. I also noticed how AI pointed out small UI/UX issues I might have otherwise missed, such as visual hierarchy, spacing, or even microinteractions.

Findings

Through this process, I found that AI tools not only improved efficiency but also acted as learning companions. The feedback wasn't just about fixing things—it often explained the why, connecting my design decisions back to UX principles like Jakob’s Law, Fitts’ Law, or Nielsen’s heuristics. It became both a productivity tool and a knowledge refresher.

However, I also discovered the limitations: AI sometimes made suggestions that sounded good in theory but were less practical or out of context. For aspects like animation, AI could provide conceptual advice, but it couldn’t be tested directly in Figma, nor turned into actual prototypes or videos. That final step still relied heavily on human creativity and judgment.