Application Design 1 Task 3 : Lo-Fi App Design Prototype
Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media
Application Design 1
Task 3 : Lo-Fi App Design Prototype
Jump Link
1.4 Final Figma File
Instructions
When designing the login process for the LFS app, I wanted to ensure a straightforward, user-friendly experience that felt familiar and intuitive. I started by creating a welcoming screen that features the LFS branding prominently, accompanied by a warm greeting and two clear call-to-action buttons: "Log In" and "Sign Up." I also added an option to explore the app as a guest for users who prefer to browse without logging in. For the actual login page, I designed a simple form with fields for an email address and password, ensuring that the layout remains clean and uncluttered.
To enhance usability, I included "Forgot Password" and "Create Account" links for easy navigation. I also incorporated social media login options for quick access, displaying recognizable icons for familiarity.
When designing the sign-up and verification process for the LFS app, I aimed to create a smooth, step-by-step flow that felt secure and reassuring for users. I began with a straightforward sign-up page that includes fields for essential information such as name, phone number, email, and date of birth. I ensured that the form was clearly structured, with intuitive text fields and icons for visual guidance. To enhance trust, I included checkboxes for users to agree to the terms and privacy policy before proceeding.
Once the user submits their details, they are directed to the phone number verification page, where an OTP (One-Time Password) is sent to their registered number. I designed this page with a focus on simplicity by displaying only the phone number and six input fields for the OTP. I included a timer to show when users can request a new OTP, ensuring the process remains clear and prevents multiple submissions.
After entering the OTP, I added a loading animation to provide visual feedback, indicating that the verification is in progress. Finally, a "Verification Successful" screen with a checkmark icon reassures the user that their account has been successfully verified. The combination of clear instructions, animations, and feedback ensures that the user feels guided and confident throughout the sign-up process.
I also integrated a hamburger menu with user personalization at the top, displaying the user's avatar and a friendly "Hi, Richard" message to create a more personalized experience. This menu offers quick access to essential features like the wallet, rewards, food & drinks, and account settings.
To further enhance user engagement, I added a "Special Deals" section to showcase promotions, such as ticket discounts, and a "Your Points" section at the bottom for loyalty program rewards, encouraging users to stay updated on their benefits and points. The layout is structured to maintain a clean, organized look while ensuring that users can easily interact with key features without feeling overwhelmed.
For the "Movies" section, at the top of the page, I included a search bar for users to quickly find specific movies by name. Directly below, I added two tabs: "In Cinemas" and "Coming Soon" to help users easily toggle between movies currently showing and future releases.
The main section displays movie thumbnails arranged in a grid for easy scanning. Each thumbnail includes basic information such as the title and genre icon, making it visually clear and inviting. When users tap on a movie, a popup appears with detailed information, including the synopsis, director, genre, language, duration, and release date. This popup provides an immersive yet non-intrusive way for users to view more information without navigating away from the main list.
To enhance the user experience, I added a "Book Now" button on the popup so users can immediately proceed to secure their tickets if they're interested.
When designing the cinemas page, I wanted to make it easy for users to find their preferred cinema location at a glance. I began by creating a clear distinction between "Cinemas Nearby" and "All Cinemas" to prioritize convenience for users based on their current location. The "Cinemas Nearby" section displays the closest LFS Cinemas, helping users quickly access showtimes without scrolling through the entire list.
Each cinema location is presented as a card with the cinema name, favorite (heart) icon, and location pin icon. The heart icon allows users to mark their favorite locations for quick future access, while the location pin icon can open navigation options to guide users to the cinema.
When designing the promotions page for the LFS app, I wanted to create a space where users can easily track their membership rewards and stay informed about the latest deals. At the top, I included a membership card section that displays the user’s name, membership QR code, and card ID for quick scanning at the cinema. This reinforces the user’s membership status and adds convenience when redeeming rewards in person.
Below the membership card, I added a "Your Points" section that visually represents the user's progress toward their next reward. The progress bar and points count give users a clear indication of how close they are to unlocking a new benefit. I also included buttons for "How to Redeem," "History," and "My Reward" to give users more control and transparency over their loyalty points and redemption history.
Further down the page, I showcased special deals in a horizontal scroll format, making it easy for users to browse through current promotions such as discounted tickets or exclusive screenings.
For the Profile section, at the top, I placed the user’s profile information, including their name, email, and a profile picture placeholder. I also added an "Edit Profile" button to make updating personal information simple and intuitive.
Below the profile section, I included an LFS Wallet module that displays the user’s current balance, with options to "Add Money" and view their transaction history. This wallet feature is prominently placed to make it convenient for users who frequently top up their balance for purchases like movie tickets or snacks.
To enhance usability, I added a grid of quick-access buttons below the wallet, linking to frequently used sections such as "FAQ & Support," "My Bookings," "My Wallet," "Settings," and "Contact Us." Each button has a clear icon and label to ensure easy navigation.
When designing the movie ticket booking flow for the LFS app, I focused on creating a step-by-step process that guides users smoothly from movie selection to payment. The flow begins with a Quick Booking page where users can choose their preferred date, cinema, and movie time. I made sure to include a "Change Movie" option for flexibility, so users can make changes without starting over. The time slots are presented in a clear grid format for easy comparison.
Once the movie and time are selected, users proceed to the seat selection screen. I designed the seating layout to mirror the actual cinema layout, with labeled rows and columns for clear navigation. Users can see available, booked, and premium seats at a glance using distinct icons and visual cues. I also added a preview of the selected seats at the bottom of the screen, ensuring users can review their choice before continuing.
After seat selection, users are taken to the ticket summary page where they can review the ticket details and price breakdown. I included categories for different ticket types, such as adult, child, senior, and student, with options to adjust the quantity for each. This ensures users have full control over their booking details.
The Select Food page opens with a categorized menu, featuring options like Promotions, Top Sellers, À la Carte, Drinks, Combo Meals, and Merchandise. This categorization allows users to quickly navigate to their preferred section without scrolling through an overwhelming list.
Once users select a category, they are presented with menu cards that display item images, names, and prices. I ensured the cards are large enough to be easily readable, with an "Add to Cart" button conveniently placed for quick selection. The design supports both individual items and combo deals, giving users the flexibility to choose based on their preferences.
After selecting their items, the user can view their cart summary on the right (or at the bottom, depending on device size). This summary includes a breakdown of seats, food, and drinks, along with the total cost. The cart summary is designed to provide clarity, with the option to proceed to payment when everything looks good.
When designing the checkout process for the LFS app, I wanted to create a clear and concise interface where users can review their order and complete their payment with ease. The checkout page begins with a summary of the movie details, including the movie title, showtime, and selected seats. Below this, I included a breakdown of the order details, such as the ticket price, food and drink total, processing fee (if any), and the total sum.
For added convenience, I included a "My Points" section, where users can view and redeem their loyalty points for discounts. Users can choose from different reward options, such as a single 2D ticket or a food discount, by clicking "Apply." When a reward is applied, the total amount is dynamically updated to reflect the discount.
Next, the payment methods section presents a variety of options, such as credit/debit cards, online banking, e-wallets, and loyalty balance. I used familiar icons for each payment method to ensure clarity and recognition. Once the user confirms their selection, they can tap "Proceed to Pay" to complete the transaction.
When designing the loading and confirmation flow for the LFS app’s checkout process, I wanted to provide users with a clear indication that their payment is being processed while maintaining a reassuring and smooth experience. After the user taps "Proceed to Pay", a loading screen with a simple wallet icon animation and the "Loading..." message appears to indicate that the transaction is in progress.
The animation provides visual feedback to prevent users from feeling confused or assuming the app has frozen. I kept the layout minimal to avoid clutter and maintain focus on the key message. The animation sequence is looped for a few seconds to simulate the backend processing time.
Once the payment is successfully processed, the screen transitions to a "Payment Successful" page with a confirmation message and a checkmark icon for visual reinforcement. This page also includes a button labeled "Return to Home" or "View My Bookings", giving users the option to continue browsing or check their newly booked tickets.
For the My Booking Page, At the top, I included two tabs—"Upcoming" and "Past"—so users can quickly toggle between future reservations and past viewing history. This separation ensures that users can easily find their relevant booking details without any confusion.
The booking card for an upcoming movie prominently displays key details such as the movie title, genre, duration, format (e.g., 2D), cinema location, hall number, showtime, and seat selection. These details are laid out clearly to ensure users can quickly verify their booking information at a glance.
To streamline the check-in process, I included a QR code that users can scan at the cinema entrance for easy and contactless check-in. Below the QR code, there is a "Download Ticket" button that allows users to save their ticket locally for offline use. This feature is especially helpful in case of weak internet connections at the cinema.
Usability Testing :
I created 3 scenarios for the user to test the app and they are as follows
- Users mentioned that they would appreciate a visual indication of their progress during the ticket booking process. Since the booking involves multiple steps—such as selecting the cinema, choosing seats, and confirming payment—some users felt unsure of where they were in the process and how many steps remained.
- During the seat and food selection steps, users felt that the placement of the plus and minus buttons was counterintuitive. Typically, users expect the plus button (+) to be on the right (to increase) and the minus button (-) on the left (to decrease), consistent with standard UI conventions.
- Users found having both a “Remove” and “Apply” button on the same screen redundant and potentially confusing. Having multiple actions next to each other for similar functions led to hesitation, as users were unsure which action was more appropriate.
- Users found that having the wallet feature embedded within the profile page made it harder to locate and manage. Since the wallet holds important information such as balance, transaction history, and top-up options, users felt that it should have its own dedicated page for easier access and organization.
The updated Select Seat page introduces key improvements for a more user-friendly and efficient booking experience. A progress bar has been added at the top of the page to visually represent each stage of the booking process, from movie selection to final confirmation. This helps users track their progress and understand how many steps remain, reducing uncertainty and improving navigation. The progress bar is labeled with clear stages: Movie, Seat, Food, Payment, Success, providing users with a sense of orientation throughout the flow. Additionally, the layout has been simplified to remove any redundant actions, ensuring that the “Add to Cart” button remains prominently displayed for a smoother user journey.
The placement of the plus ("+") and minus ("-") buttons has also been switched, with the plus button on the right and the minus button on the left, aligning with common user interface conventions. This update makes it more intuitive for users to adjust ticket quantities without confusion. These changes address user feedback by improving clarity, reinforcing key actions, and presenting a consistent design that enhances the overall booking experience.
In the updated Checkout page, key changes have been made to simplify the rewards redemption process and enhance user experience. The individual "Redeem" buttons for each reward card have been removed and replaced with a single “Apply” button at the bottom of the page. This change streamlines the interaction by allowing users to review all available rewards and confirm their selection in one step, reducing cognitive load and making the process more intuitive. The reward cards still display essential information, such as the reward name and points required, making it easy for users to compare options without being overwhelmed by multiple action buttons.
By consolidating the action into a single "Apply" button, the design improves clarity and reduces user confusion. The unified call-to-action guides users clearly through the redemption process, ensuring they focus on confirming their selection rather than interacting with multiple buttons.
I added a progress bar to enhance the user experience and make the booking process feel more guided and intuitive. My goal was to provide users with a clear visual representation of where they are in the booking flow, covering the five key stages: Movie, Seat, Food, Payment, and Success. By including a distinct checkmark for completed stages and highlighting the current step, users can easily understand their progress and how many steps remain.
I made sure that the upcoming stages remain unfilled to signal actions that are yet to be completed, keeping the interface clean and focused. This design helps reduce uncertainty and ensures that users feel more in control as they move from one step to the next. Overall, adding the progress bar makes the interaction more structured and reassuring, improving the overall flow and user confidence throughout the booking process.
Final Figma Prototype :
FeedBack
Regarding other pages, he suggested relocating the points section on the homepage, as its current position at the bottom might cause some users to miss it. Additionally, he recommended increasing the size of the buttons, as they currently appear too flat, making them harder for users to click.
Comments
Post a Comment