Application Design 1 Task 4 : Completed Mobile Application Design Prototype
Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media
Application Design 1
Task 4 : Completed Mobile Application Design Prototype
Jump Link
1.4 Final Figma File
Instructions
When I started designing the LFS app, I knew that maintaining the original brand identity would be critical. My goal was to create a cohesive, modern interface that felt intuitive yet familiar. Here’s how I approached each step of the design process:
1. Research and Understanding
I began by immersing myself in the brand guidelines. I studied their existing color palettes, typography, and visual style to understand the core elements that make the brand recognizable. I also gathered user feedback and analyzed competitor apps to identify what users expect and where improvements could be made.
2. Defining the Color Scheme & Fonts
The next step was to build the color scheme. I created three key categories:
- Primary Colors: Orange, Black, and Blue White to reflect the core brand look.
- Secondary Colors: Creamy Yellow and Orange Peel to introduce more warmth and energy.
- Text Colors: Black, White, Gray, and Dark Gray for text contrast and readability.
To ensure versatility, I created gradient scales for each primary shade: Tree Poppy, Sorbus, and Woodsmoke. These gradients helped me visualize how the colors would behave in different contexts, such as background overlays, buttons, and hover states.
1. Title Font: Amaranth
I chose Amaranth for the titles because it has a modern yet approachable feel, thanks to its slightly rounded edges and subtle character. Its unique curves give the titles a touch of personality, which helps the app stand out without overwhelming the design.
Additionally, Amaranth’s readability at larger sizes makes it perfect for headlines and section headers, ensuring users can quickly grasp key information. The font strikes a balance between playful and professional—ideal for an app designed to be both functional and visually appealing.
2. Body Font: Montserrat
For body text, I wanted a clean and highly legible font that maintains a modern and minimalist aesthetic. Montserrat was a clear choice due to its versatility and readability across various screen sizes. Its geometric shapes and balanced proportions make the text easy to read, whether it's on a mobile device or desktop.
Moreover, Montserrat’s subtle elegance complements Amaranth beautifully, allowing the titles to shine while the body text remains clear and understated. The font’s different weights also provide flexibility, enabling me to emphasize or de-emphasize content as needed.
Design Process for the LFS App Loading Page
When designing the loading page for the LFS app, I wanted to create an immersive experience that evokes the excitement of sitting in a cinema before the movie starts. The goal was to create a memorable first impression that reinforces the brand identity while keeping the interface simple and engaging for users.
I began by conceptualizing the design with the idea of using cinema seats as the background. This choice was intentional—I wanted users to immediately connect with the feeling of stepping into a cinema. The rich red color of the seats added warmth and depth to the design, while the repetition of the seat rows created a subtle sense of perspective. It was crucial to ensure the background image was high-resolution and aligned proportionally so that it looked crisp on all screen sizes.
For the central focus, I placed the LFS Cinemas logo prominently in the middle of the screen. The black and gold tones of the logo stood out well against the red backdrop, creating a clean and sophisticated look. I ensured that the contrast between the logo and the background was strong enough to maintain visibility, even in different lighting conditions.
Below the logo, I designed a simple progress indicator to inform users of the loading status. Instead of a traditional loading bar, I opted for a series of dots that light up as the page loads. This minimalistic design kept the interface clean and added a subtle animation that enhances user engagement without overwhelming the screen.
Design Process for the LFS App Login Page
I started by carrying over the background image of the cinema seats from the loading page to create visual continuity. This reinforces the cinema-going ambiance and provides a sense of familiarity as users transition into the app. I adjusted the opacity of the image to ensure that the text and buttons remained clear and legible against the detailed background. When users click on Login they, the pop up will appear.
The LFS logo was prominently placed at the top to remind users of the brand identity. Below it, I included a welcoming message—"Welcome to LFS Cinemas"—to set a friendly and inviting tone. I used Amaranth for the titles and headings to maintain a bold and eye-catching style, while Montserrat was used for body text and form labels to ensure readability.
The login and sign-up buttons were styled in the brand’s signature orange to draw attention and create a clear call to action. I used rounded button corners to soften the overall design and make it more user-friendly. The buttons were sized large enough for easy tapping, keeping mobile usability in mind.
For the login form, I designed clean input fields with clear labels for "Email Address" and "Password." I added an icon within the password field to toggle password visibility, providing an extra layer of convenience for users. The "Forgot Password?" link was placed below the fields for easy access, styled in a smaller but still noticeable size.
Design Process for the LFS App Sign Up Page
For the sign-up page, I used the same background of plush red cinema seats to create a sense of continuity and reinforce the brand experience. The page is titled “Sign Up” using Amaranth to make it visually prominent and consistent with the rest of the app. Directly below the title, I included a link that says "Already a member? Log In" in a lighter font weight and color to make it stand out without being overwhelming.
The form itself was designed with simplicity in mind, featuring clear labels for each input field: Name, Email, Password, and Confirm Password. The input fields have a modern, bordered style that contrasts well against the background while maintaining a clean aesthetic. I also included an optional "Referral Code" field for additional customization.
To enhance the sign-up experience, I added password visibility toggles and made error messages easy to spot with sufficient contrast. Below the form, I included a checkbox for terms and conditions, ensuring that the user has full transparency before proceeding. The Submit button was styled in bright orange to grab attention and guide users to complete the form.
Phone Number and OTP Verification
After submitting the sign-up form, the user is prompted to verify their phone number. I designed this section to be minimal, placing the phone number and OTP input fields at the center of the screen. The centered layout creates focus and ensures users immediately understand what is required of them.
The OTP input fields were styled as individual boxes for a clean and modern look, making it easy for users to enter and check each digit. I ensured that the color contrast of the boxes was high enough for clear visibility against the dark background.
Verification Feedback and Animation
Once the OTP is entered, I incorporated a subtle loading animation with a circular indicator to assure users that the verification is in progress. This prevents users from feeling frustrated by any slight delays. After successful verification, a large checkmark animation appears, accompanied by the text "Verification Successful!" in Amaranth to reinforce the successful completion of the sign-up process. The animation serves to reward the user and create a sense of accomplishment.
Design Process for the LFS App Home Page
At the top of the homepage, I included a prominent movie banner featuring a poster of the movie "Avatar." This hero section grabs the user's attention immediately and highlights featured films. The banner helps create a visually impactful introduction to the app and reinforces the cinematic theme. Below the banner, I added quick action buttons for essential functions, such as booking tickets, viewing special offers, and accessing the user's account. These buttons were styled using the brand's signature orange to ensure they stand out and provide easy access to key features. The accompanying icons were kept minimal and familiar to enhance recognition and usability.
When the user taps the hamburger menu icon, the navigation drawer slides out, displaying key options like "My Profile," "Points & Deals," "Rewards," "Booking History," and "Settings." The drawer features a bold orange background, creating strong contrast and making the menu items visually distinct. At the top of the drawer, I included a personalized greeting, "Hi, Richard," to enhance the user experience and create a sense of familiarity. The clean separation between each menu item ensures the list is easy to scan, while the icons next to the text provide visual cues that help users quickly identify each option.
Further down the homepage, I added sections such as "Recommended Movies" and "Special Deals." These sections use horizontal scrolling cards that showcase content in a compact, mobile-friendly format. The movie posters were kept prominent to maintain visual impact, while the card layout allowed users to browse quickly without overwhelming the screen. The "Special Deals" section highlights exclusive promotions with bold banners featuring bright colors and large typography to draw attention.
At the bottom of the home page, I included a loyalty points section to give users an overview of their points balance and available rewards. This section was designed with contrasting text and a dark background to ensure readability and make the content stand out. I paid close attention to maintaining consistent padding, rounded corners, and cohesive brand colors across all elements to create a polished, unified look.
Design Process for the LFS App Movie Page
At the top, I included a search bar for quick movie lookups, along with filter buttons labeled "In Cinemas" and "Coming Soon" to help users refine their browsing experience. The buttons were styled in the brand's signature orange to stand out against the darker background. A featured movie poster serves as the hero banner, immediately drawing attention with its cinematic presentation. Below this, I used a grid layout to display movie cards, making it easy for users to browse through multiple titles at once. Each card prominently displays the movie poster and title, creating a consistent and recognizable structure.
When users tap on a movie card, they are directed to a detailed Movie Info page that immerses them with a full-screen poster and essential information like language, genre, and runtime. The "Book Now" button is strategically placed directly below the details and styled in bold orange to prompt action. To provide additional context, I included a collapsible "More Info" section where users can read the plot synopsis. The synopsis is displayed in a white card layout to create contrast and improve readability, with key details like the director's name and genre highlighted in orange. The fixed bottom navigation bar allows users to easily move between pages, maintaining consistency in navigation.
Design Process for the LFS App Cinema Page
At the top of the page, I used a bold "Cinemas" header styled in Amaranth to maintain visual consistency and ensure the section is easily identifiable. The page is divided into two sections: "Cinemas Nearby" and "All Cinemas", providing a clear hierarchy that prioritizes nearby locations for convenience. Each cinema is displayed in an expandable card format, allowing users to view details or select a specific cinema. The use of contrasting orange icons and clean outlines for each card enhances the visual clarity while keeping the design consistent with the app's aesthetic.
To make the interface more personalized and interactive, I added a heart icon next to each cinema name, allowing users to favorite their frequently visited locations for quick access.
Design Process for the LFS App Promotion Page
At the top, I placed a bold "Promotions" header using the Amaranth font to keep the branding consistent while ensuring the page title is clear and engaging. The "Membership & Reward" section is prominently displayed, featuring a digital membership card with a QR code that allows users to scan at the cinema for quick access. The card information, including the user’s name and card ID, personalizes the experience while reinforcing their membership status.
The "Your Points" section is the focal point, styled with a circular point tracker and a bold display of the user's point balance. The orange progress bar visually indicates how close the user is to their next reward, making the rewards system easy to understand at a glance. I included buttons such as "How to Redeem," "History," and "My Reward" to give users access to additional details related to their points and redemption history. Below this, the "Special Deals" section highlights ongoing promotions using high-quality images and bold text to capture attention
Design Process for the LFS App Profile Page
At the top of the page, I placed the "Profile" header in Amaranth font to maintain consistency with other sections of the app. Below it, the user’s profile card displays their name, email address, and a profile avatar icon, creating a personalized experience. The card’s black background contrasts with the bright orange "Edit Profile" button, making the button easy to spot and inviting users to update their account information.
Below the profile card, I designed a grid layout featuring six quick-access options: FAQ & Support, My Bookings, My Wallet, Contact Us, Policy, and Settings. Each option is represented with simple, recognizable icons and styled within rounded, dark-background tiles for a clean and uniform look. The white icons ensure high contrast and readability against the background.
At the bottom of the page, I included a "Log Out" button styled in bold orange to maintain visual consistency with other CTAs throughout the app. The button is large enough to be easily tapped on mobile devices, ensuring accessibility. The fixed bottom navigation bar allows users to seamlessly switch between different sections of the app without needing to scroll back up.
Design Process for the LFS App Quick Booking Page
The Quick Booking page was designed to streamline the movie-ticket purchasing process and provide users with an intuitive, step-by-step flow. At the top of the page, I placed a bold "Quick Booking" header in Amaranth font to make the section easily identifiable. Below the date selector, a featured movie card with the movie poster and title allows users to confirm or change their movie selection with a clearly labeled "Change Movie" button. The large movie poster creates visual appeal while reinforcing the selected choice.
Next, I added a "Select Cinema" section that displays the user’s most frequently visited cinemas, making it convenient for users to pick their preferred location quickly. Following this, users are prompted to select a showtime. Each available time slot is presented in a neatly styled button with bold text for clarity, ensuring users can easily identify available showtimes.
To enhance user navigation, I included a summary at the bottom of the page. Once users select their preferred options, the "Preview" button leads them to a confirmation screen where they can review their selections. The Enter Arrival summary layout uses a clean, numbered flow to guide users through key details such as the movie, cinema location, seat selection, and payment method. The "Proceed to Pay" button at the end of the flow is styled in bright orange, ensuring it stands out and invites the user to complete their booking.
At the top, I included a progress bar that visually represents the current step in the booking process—Movie, Seat, Food, Payment, Success—to give users a clear sense of progress. Below this, the selected movie information, including the movie title, showtime, and location, is displayed prominently alongside the movie poster for reference. The "Edit" button allows users to make changes without having to restart the process entirely.
The seat selection layout features a clear and organized seating map with color-coded indicators. I used distinct colors for selected (orange), booked (red), available (blue), and twin seats (yellow) to ensure the seat availability is immediately understandable. The seats are arranged in a grid format with labeled rows and columns to help users quickly identify their chosen seats. A button at the bottom labeled "Book Seats" invites users to proceed once they’ve made their selection.
Once the user selects their seats, a summary appears, showing their selected seats and ticket details, including the total cost. To enhance the customization experience, I included an option for users to specify the type of tickets—Adult, Children, Seniors, and Students—with easy-to-use increment and decrement buttons. Each category is accompanied by a description (e.g., "Applicable to kids 12 and below" for children) to avoid any confusion. The "Add to Cart" button is styled in bright orange to stand out and prompt users to continue to the next step.
The menu is divided into categories such as Promotions, Top Sellers, Ala Carte, Drinks, Combo Meals, and Merchandise. Each category is represented with clear icons and a card-based layout to ensure the page remains scannable and organized. When users select a category, the corresponding menu items are displayed in visually appealing food cards with high-quality images, product names, and prices. I used rounded containers for the food cards to give the design a softer, more user-friendly appearance. The bright orange "Add to Cart" button is positioned prominently to encourage users to finalize their selections and proceed smoothly.
The food summary section shows an updated list of selected food and drinks alongside the ticket details for a quick review. Users can adjust their food choices or seats with the "Edit" option for each section. The total price is displayed at the bottom to give users a clear overview of their order before proceeding to the next step. The "Proceed to Pay" button is styled consistently in orange, making it a strong call to action for completing the booking.
The checkout page was designed to guide users through a smooth and secure payment process while maintaining the cinematic theme and brand consistency. At the top, the progress bar provides a clear visual indication of the user’s position within the booking flow—Movie, Seat, Food, Payment, Success—to enhance user confidence and transparency. Below this, the order summary displays key information such as the selected movie, seats, and food items, ensuring users can review their order at a glance before proceeding to payment.
The payment options are presented in a clean, card-style layout with recognizable icons for different methods, such as credit/debit card, e-wallets, and loyalty points. Each payment method is styled with distinct icons to create a visual hierarchy and help users quickly identify their preferred choice. Once the user selects a payment method, a confirmation screen appears to summarize their transaction details.
Usability Testing :
Similar to the low fidelity testing , I provided users with the same 3 scenarios to use
The payment method buttons currently use a gray or semi-transparent design, which may appear dull and reduce visibility for some users. Adding colors to the buttons can make them stand out, guiding users more effectively through the payment process. For example, each payment option (e.g., credit card, e-wallet, loyalty points) could be styled with distinct brand-related colors or accents that improve visual hierarchy and draw attention to interactive elements. By making the buttons more vibrant, the app creates a more engaging and user-friendly experience, reinforcing key actions and providing a clear sense of interactivity.
The booking flow currently lacks a dedicated back button that allows users to return to the previous screen. This can cause frustration if users need to correct or review their selections. A back button placed in the top-left corner of the screen would provide a familiar and intuitive way for users to navigate backward. This feature ensures users can easily adjust their booking choices without restarting the entire process. Implementing this back button improves user control and reduces cognitive load, making the flow feel more forgiving and flexible.
The "More Information" and "View Trailer" options in the movie details page may be too small, making them harder to notice or interact with. By enlarging these buttons or converting them into larger, visually distinct elements (such as full-width buttons), users are more likely to engage with them. Additionally, adding padding and adjusting font size ensures they are accessible and noticeable even on smaller mobile devices. This enhancement not only improves usability but also encourages users to explore additional movie content, such as detailed synopses and trailers.
The buttons in the profile section use a black fill that blends with the dark background, making them less visible and harder to differentiate. To resolve this, the buttons could be styled with a lighter fill (e.g., white, gray, or orange) or enhanced with visual effects like shadows or glows to create contrast. Another approach is to add an outline or gradient effect that highlights the button edges and makes them pop against the background. This design change ensures that key action buttons, such as "Edit Profile" and "Log Out", are visually prominent and easy to find, improving the overall usability of the profile section.
Improvements Made :
In this iteration of the movie details page, I focused on eliminating unnecessary pop-ups and displaying all relevant information directly on the page for a smoother and more cohesive user experience.
The movie poster remains prominently displayed at the top, creating a cinematic and immersive feel. Beneath the poster, I included essential movie details such as the title, language, rating, duration, and release date, styled with bold yet readable text. This information is arranged in a clean and scannable format to ensure users can quickly find the details they need.
The "Book Now" button is placed below the essential details in a bright orange color to serve as a clear call to action. The information section follows immediately, featuring the plot synopsis and credits in an expanded format. By displaying the synopsis directly on the page, users no longer need to open a separate pop-up, making the browsing experience seamless.
At the bottom of the page, the "Watch Trailer" section features a thumbnail with a play icon, inviting users to view the trailer in one tap. This layout prevents any unnecessary overlay and keeps the user experience visually engaging yet straightforward.
In this update, the main focus was to improve the visibility and distinctiveness of the buttons, ensuring they stand out clearly against the background for better user interaction.
The Edit Profile button now has a bright orange fill that matches the app's primary action color, making it visually prominent and inviting. The grid layout for quick access options (e.g., FAQ & Support, My Bookings, My Wallet) now features consistent color styling, creating a unified and structured appearance. The buttons no longer blend into the dark background, making each option immediately identifiable and clickable.
The Log Out button has retained its bold styling but is now further emphasized through spacing and color contrast to avoid blending with the rest of the interface. These changes enhance the usability and accessibility of the profile page, ensuring that key interactive elements are clearly distinguishable, improving the overall user experience.
In this updated design, the focus was on improving clarity and guiding users effectively through the booking process by emphasizing key actions and selected details.
The movie name has been bolded to make it more prominent and immediately recognizable. This helps users quickly confirm their selected movie without needing to read the smaller details. The "Select Seat" step has been underlined to indicate that this is the next actionable item, serving as a visual cue for users to proceed. The underline reinforces that the seat selection is an interactive step and ensures it stands out within the flow.
In this updated checkout page, the focus was on enhancing the visibility and appeal of the payment method buttons by incorporating colors for better user guidance and engagement.
Previously, the payment method icons were gray and semi-transparent, which could make them difficult to notice or distinguish. In this iteration, each payment option—FPX Payment, Credit Cards, LFS Wallet, and E-Wallet—has been styled with distinct, brand-consistent colors. These colors not only add vibrancy to the page but also make each option more recognizable at a glance, improving the user experience.
Final Version Modifications
- Increase the size of the buttons, such as "Poster Booking," on the homepage to improve visibility and ease of clicking for users.
- Remove the "Membership" section from the homepage, as its content overlaps with the "Promotion" page, and its placement at the bottom makes it less noticeable.
- Reduce the background opacity of the "Quick Booking" button and slightly decrease its size so it does not obstruct other content.
- Move the QR code in the hamburger menu to the top-right corner of the homepage and place the "Notification" and "Settings" options inside the menu.
- Darken the color of selected buttons to make them more distinguishable.
- On the "Movie Page," remove the "More Info" and "Trailer" buttons and instead place these options below the poster.
- Update the colors of buttons and profile information on the "Profile Page" to ensure they stand out against the background image, replacing the black buttons that blend in.
- On the seat selection page, add a white outline that appears when hovering over a seat to help users clearly identify their selection.
- Optimize the color and status display of the "Quick Booking" progress bar to help users understand their current step.
- Enhance the payment success animation to make it smoother and visually more appealing with improved colors and transitions.
Final Figma File :
Reflections
The process of transitioning to the high-fidelity stage was relatively simpler compared to the low-fidelity stage. Most of the work involved refining the low-fi designs based on the feedback from the usability tests. When creating the hi-fi designs, I referred to the original LFS app's color scheme and font styles. I felt that the original choices were quite appropriate, and since the lecturer had emphasized maintaining the original app's design elements where possible, I avoided making drastic changes that could disrupt the app's identity. However, I did introduce a touch of blue into the color scheme to add more variety, creating a more modern and visually appealing look.
In the low-fi stage, the images and posters were grayscale placeholders. For the hi-fi stage, I added full-color visuals, which significantly enhanced the overall aesthetic. When selecting movie posters, I carefully chose ones that matched the app's theme to ensure consistency and maintain a harmonious design. This attention to detail helped create a cohesive and pleasant user experience.
The final steps involved making overall adjustments, linking the pages for a functional prototype, and fine-tuning the font and button sizes for better usability. While the app doesn’t have a large number of pages, I focused on perfecting the key pages and addressing participant feedback from the usability test. I incorporated the suggestions I found reasonable and made improvements where needed. This iterative process made the final product more polished and user-friendly.
Comments
Post a Comment