Application Design I - Project 3 / Low-Fi App Design Prototype
2024/10/20-12/1
WEEK11-14
INSTRUCTIONS
PROJECT 3: Low Fidelity App Design Prototype
Once the UX design process is completed, we can now create a low fidelity prototype of the app. We need to arrange all the screen wireframes, actions, visual feedback and link them up in Figma. We are then required to perform usability testing whereby we will test out our low fidelity prototype and gather all the information, response, feedback, pain points observed from the test.
Color Palette Adjustment Description
Based on the feedback from Project 2: UI/UX Design Document, the primary color of the application, red, was frequently mentioned as being too intense, as it excessively draws users' attention, thereby impacting the overall user experience. To address this design issue, I decided to redesign the application's color palette to achieve a more balanced and harmonious visual effect.
Color Palette Adjustment Goals:
- Reduce the dominance of red: Decrease the frequency and intensity of red to avoid overly distracting users' attention.
- Introduce complementary colors: Add new colors (such as yellow and pink) to provide a softer and more diverse visual experience for the application interface.
- Enhance overall balance: Transition the color scheme from a single dominant tone to a richer and more coordinated combination of colors, improving both visual comfort and aesthetic appeal.
- Dark theme design: To align with the dark environment of a cinema, the overall design adopts a dark theme, ensuring a more comfortable user experience in low-light conditions.
New Color Palette Concept and Inspiration:
To make the application's color palette more balanced and closely tied to the cinema theme, I introduced new colors and assigned unique meanings and functionalities to them.
-
Yellow:
The inspiration for adding yellow comes from the classic cinema element—popcorn. It symbolizes joy, warmth, and a relaxed movie-watching experience. Additionally, yellow, as a bright accent color, enhances the interface's friendliness and appeal. -
Pink:
Soft pink represents romance and warmth, aligning with the cinema's atmosphere. It is ideal for creating a comfortable and pleasant visual effect, adding a touch of softness to the interface. -
Red:
As the primary brand color, red is still retained but used more selectively to maintain its impact and significance. -
Dark Background:
Given that cinemas are typically dark, the application adopts a dark theme design. A deep-colored background (such as dark gray or black) not only reduces screen glare for users but also highlights other colors, adding depth to the interface.
Application of the New Color Palette:
- Yellow: Used for decorative elements, secondary buttons, and subtle highlights, reflecting the joy of popcorn and the classic cinema vibe.
- Pink: Applied to card backgrounds, dividers, or headings, pairing well with the dark theme to create a soft, layered effect.
- Red: Retained for critical elements such as the "Buy Tickets Now" button or important alerts to guide user actions effectively.
- Dark Background: Serves as the foundation of the interface, reducing visual strain in low-light environments and allowing other colors to stand out.
By integrating these classic cinema-inspired elements into the color palette, the new design not only enhances the visual experience but also strengthens the emotional connection between users and the application, letting them feel the excitement and joy of movie-watching.
Typography
I chose 'Inter' as the primary font for the application. It is highly legible and one of the most popular fonts in interface design. Its extensive range of styles and weights makes it easy to distinguish between headings and body text, addressing one of the key issues in the current application design. Additionally, the modern and versatile nature of 'Inter' ensures that the overall interface delivers a polished and professional visual experience.
Low Fidelity Prototype in Figma
WEEK 11：
Feedback: The interface layout needs to be adjusted.
WEEK13
I have completed most of the content, added a login feature, and made adjustments to some of the icons.I have linked all the content together so that the low-fidelity prototype is interactive and can be tested by users to gather feedback.
Usability Testing
When the wireframe prototype was completed, I went on to the next stage which was usability testing. First, we are tasked to create three scenarios (specific actions you want the users to take, such as checking account balance and transaction history).
Scenario 1: Log in and Purchase Tickets
Assuming you are a new user interested in purchasing movie tickets on the TGV Cinema app, start by opening the app and clicking the "Login" button on the welcome screen. After entering your registered email and password, you will successfully log in. Once logged in, you will enter the main interface, where you can browse the currently showing movies. After selecting the movie you like, choose the showtime and theater, then proceed to the seat selection page, where you can select available seats and confirm your choice. Next, select the ticket type and quantity, and choose any food items you wish to purchase. Then, proceed to the payment page, select your payment method, and complete the payment. After a successful payment, you will receive a purchase confirmation with a QR code, which includes details such as the movie information, showtime, and seat number.
Scenario 2: Select Food from the Main Interface and Purchase
After logging into the TGV Cinema app, go to the main interface and click the food icon to browse the available food and drink options. Select the items you wish to purchase and confirm the quantity, then click "Checkout." On the checkout page, choose your payment method and complete the payment. After a successful payment, you will receive a food order confirmation along with a QR code.
Scenario 3: Select a Movie and View Its Details, Reviews, and Cast Information
After logging into the TGV Cinema app, go to the main interface and browse the currently showing movies. Select the movie you're interested in and click to enter its details page. On the movie details page, you can view basic information such as the release date, director, genre, and more. Additionally, you can see user reviews and ratings to get an idea of what other viewers think about the movie. Information about the movie's main cast will also be displayed on this page, including the names of the actors and a brief description of their roles, helping you better understand the movie's content and the cast.
Demo video
Figma View - Prototype
Figma View - Work File
Reflection
My key takeaway from this module is that feedback from both instructors and users is crucial for improving the application. Without their feedback and comments, it sometimes feels like there’s nothing to improve. However, since the application is created for users, it’s clear that user testing is essential. At the same time, managing my time effectively is also very important. Balancing tasks and ensuring that enough time is allocated to each phase is key to making steady progress.
评论
发表评论