App Design 2: Task 1

02/10/2024 - 06/11/2024
Ng Zheng Kai 0359424
Bachelor of Design in Creative Media
App Design 2
Task 1

---

INSTRUCTIONS

Task 1:

To submit a self-reflection blog post on the app design refining process with a clear comparison between the old and new design.

Review:

Fig 1.1 App Proposal

Fig 1.1 Hi-Fi

1. Login Page

Fig 1.2 Login Page

Self-Reflection:

• Good branding and color
• Minimalistic

AI Feedback & Evaluation:

Pros:

1. Strong Branding: The orange logo and button create a cohesive brand identity that stands out. It immediately conveys the theme of the app.
2. User-Friendly Layout: The simplicity of the design makes it intuitive. Users can quickly locate the login fields and related actions (like password recovery or account creation).
3. Visual Appeal: The background image of the airplane adds context without overwhelming the text. It sets the mood for a travel-oriented app.
4. Clear Call-to-Action: The "Log in" button is prominent, which is essential for guiding users through the login process.
5. Mobile-Optimized: The design fits well on a mobile screen, with enough spacing for touch interactions without crowding.

Cons:

1. Distracting Background: Depending on the time of day or screen brightness, the background image might compete with the text. A slight overlay or more contrast between text and background could help.
2. Generic Fields: The username and password fields look quite standard. Adding a slight design flair (rounded edges, icons) could make them more appealing.
3. Small Help Text: The "Forgot Password?" and "Create an account here" text are smaller and could be harder to spot for users who need them. Making these slightly larger or using a more noticeable color might enhance usability.
4. Color Contrast: While the orange stands out, it may not offer enough contrast against certain background elements for users with visual impairments. Consider a more contrasting shade for accessibility.
5. Lack of Personalization: You could include some welcome text or imagery that reflects a more personalized experience, such as showing user-relevant imagery or greetings.

Overall, the design is clean and effective for a mobile login screen but could benefit from small adjustments to enhance accessibility and user engagement.

Argument:

I disagree with the "Small help text" part, as it is designed to be readable and not stand out from the other texts.

2. Sign-up Page

Fig 1.3 Sign-Up Page

Self-Reflection

• Minimalistic 
• Good color scheme

AI Feedback & Evaluation

Pros:

1. Clean and Simple Layout:
The design is minimalistic, with a straightforward form and a clear sequence for users to follow.
The use of whitespace ensures that each field has enough room, which improves the overall clarity and user experience.

2. Consistent Branding:
The orange icon at the top and the orange "Next" button are consistent with the brand color from the previous screen, providing a cohesive visual experience throughout the app.

3. Friendly Greeting:
The "Hello Traveler" text adds a nice, friendly touch, personalizing the user experience. It sets a welcoming tone for users filling out the form.

4. User Guidance:
The back arrow at the top left provides easy navigation, allowing users to return to the previous screen if needed.

5. Clear Input Fields:

The form fields are simple and clear, with labels indicating exactly what users need to enter. The order of the fields (name, email, etc.) follows a logical sequence for typical sign-up processes.

6. Prominent Call to Action:

The "Next" button is prominently placed and easily accessible, with a bright color that catches the user’s attention, encouraging them to proceed to the next step.

Cons:

1. Visual Interest:

The design feels a bit too basic or flat, especially compared to the previous screen. There’s a lot of white space, and while it enhances clarity, it can make the screen feel a bit bland. Adding some subtle background elements or branding would improve the overall aesthetic without overwhelming the user.

2. Field Length:

Some of the input fields (e.g., Address Line) might be too short if users are entering longer information. Depending on the form’s functionality, you may want to adjust the field width or allow multiline input.

3. Date of Birth Input:

The "Date of Birth" field doesn’t specify a format (e.g., MM/DD/YYYY), and there’s no indication of whether it opens a calendar picker or requires manual input. Making this clearer (or providing a calendar icon) would improve usability.

4. Field Indicators:

Placeholder text or labels outside the fields would be helpful to ensure users understand what data is required for each field even after they start typing. If users start typing, the label inside the field will disappear, which could cause confusion if they forget what the field was for.

5. Country Input:

Instead of a blank text box for "Country," a dropdown menu or country selection could enhance the user experience by preventing mistakes or ensuring consistent input.

6. Lack of Error Handling Indicators:

There are no visible indicators for potential errors, such as an invalid email format or missing required fields. Error messages or hints (e.g., asterisks for required fields) could help guide users in filling out the form correctly.

Suggestions for Improvement:

• Consider adding subtle design elements (e.g., background color, soft shadows) to make the form more visually appealing without cluttering it.
• Add a calendar picker for the "Date of Birth" field to make input easier and avoid formatting errors.
• Introduce placeholder text or labels above fields that remain visible after users start typing.
• For fields like "Country," use a dropdown for more accuracy and ease of use.
• This screen provides a clear and functional experience, but there’s room for enhancements to improve its visual appeal and usability.

3. Home Page

Fig 1.4 Home Page

Self-Reflection

• Strong Visual Branding.
• The placement for essential features like "Flight Booking", "Flight Status" are placed at a visibly obvious place for easier user access.

AI Feedback & Evaluation

Pros:

1. Strong Visual Branding:

   • The use of orange, the airline's branding color, is consistent and prominent throughout the interface, creating strong brand recognition and cohesiveness.
   • The staff uniform featured in the central image further reinforces the brand identity.

2. Easy Navigation:

   • The top icons ("Flight Booking", "Flight Status", "More") are clearly visible and easy to tap. The placement makes navigation intuitive for users who need quick access to essential features.
   • The menu icon (hamburger) at the top left and the profile icon at the top right provide additional navigation options, making it easy for users to explore or manage their accounts.

3. Visually Engaging:

   • The large image of a flight attendant creates a warm, professional feel. It adds a personal touch and reflects the airline's customer service ethos.
   • The "PROMOTIONS" section showcases promotions with visuals, making the content more engaging for users to browse through.

4. Bottom Navigation Bar:

   • The bottom navigation bar with icons for "Flight Booking," "Flight Status," "Check-in," and "Manage Booking" makes it simple for users to access key actions. This improves usability by ensuring quick access to frequently used functions.

5. Clear Hierarchy:

   • The design has a clear hierarchy, with flight-related actions prioritized at the top, and promotional content and images beneath. This ensures users can quickly find the information they need without being overwhelmed.

Cons:

1. Crowded Upper Section:

   • The top part of the screen (with the three large icons: "Flight Booking", "Flight Status", "More") feels a bit crowded, especially with the background image behind the buttons. The icons overlap with the image, which could reduce clarity and make the interface feel visually busy.
   • These icons could benefit from more spacing or being positioned against a simpler background to improve readability.

2. Legibility:

   • The text for "Flight Booking", "Flight Status", and "More" might be harder to read for users depending on the background image. A slight overlay (e.g., a translucent black or white gradient) on the image behind the icons could improve text readability.

3. Promotions Section Visuals:

   • The promotions section images are relatively small and might be overlooked by users. Larger images or a carousel format could make this section more appealing and easier to interact with.
   • There’s also no text explaining the promotions until the user taps on an image. Adding brief descriptions under each image could increase engagement.

4. Lack of Clear Call to Action:

   • While there are many options available, there’s no standout call-to-action (CTA) on the page. If the primary goal is to push users toward flight booking or promotions, emphasizing these areas more could guide user behavior better.

5. Busy Bottom Navigation Bar:

   • The bottom navigation bar has a lot of icons and text packed into a small space. This could be overwhelming or cause users to accidentally tap the wrong icon. Spacing out the buttons more or simplifying the options could improve user interaction.

6. Responsive Design Concerns:

   • On smaller screens, the current layout might feel cramped, especially with the dense upper section and small images in the promotions section. Making sure this design is responsive, with adaptive image sizes and button spacing, will be important for smaller devices.

Suggestions for Improvement:

• Add a subtle background overlay behind the top icons to improve text readability and reduce visual noise.
• Increase the size or switch the layout of the promotions section to make it more prominent.
• Consider adding a clear primary CTA, like "Book a Flight," to guide users toward the main action.
• Simplify the navigation options at the bottom or provide a more spacious layout to prevent misclicks.

Overall, the homepage has strong branding and functional navigation, but slight adjustments in spacing and visual hierarchy could enhance user experience and readability.

Argument

I disagree with the lack of call to action, as there are clearly placed in a visibly obvious place, on the center of the main menu and at the bottom navigation bar.

4. Destination Selection Page

Fig 1.5 Flight Selection

Self-Reflection

• The icons for adult and infant is clear and immediately recognizable, which reduces any potential confusion during the passenger selection process.

AI Feedback & Evaluation

Pros:

1. Simple and Clear Layout: The "One Way" and "Return" options are easy to toggle, and flight origin/destination information is prominently displayed.
2. User-Friendly Passenger Selector: The adult/infant selection is intuitive with easy-to-use arrows for adjusting passenger numbers.
3. Consistent Branding: The orange color scheme and button style align well with the overall app’s branding.

Cons:

1. Overly Minimalistic: The design might feel too sparse, especially with large blank areas. It could benefit from more visual elements or helpful information (e.g., flight details or guidelines).
2. "Select Destination" Button: The button placement could be more prominent or centered to enhance visibility and reduce the feel of wasted space.

5. Date Selection Page

Fig 1.6 Date Selection

Self-Reflection

• The number of the day highlights itself when the user pressed it, which makes it easy to identify.

AI Feedback & Evaluation

Pros:

1. Clean Layout: The calendar design is simple and easy to read, with clear spacing between days, making date selection straightforward.
2. Prominent Current Day: The selected day (1st) is highlighted in a bold, standout orange, aligning with the app's color scheme and making it easy to identify the chosen date.
3. Accessible Controls: The year and month can be easily toggled, which provides flexibility in quickly navigating through the calendar.

Cons:

1. No Visual Feedback for Today: There’s no clear indicator for the current date (today). Including a subtle highlight for today's date could improve the user experience.
2. Small Font Size: The font for the day numbers might be a bit small, potentially making it difficult for users with vision impairments to read easily.
3. Sparse Design: The calendar could feel too minimalistic. Adding week numbers, or small calendar enhancements like holidays or weekends highlighted differently, could make it more informative and useful.

Overall, the calendar is functional and visually consistent with the rest of the design but could benefit from small enhancements to improve user experience and accessibility.

6. Flight Selection Page

Fig 1.7 Flight Selection

Self-Reflection

• The page is detailed and has good color scheme.

AI Feedback & Evaluation

Pros:

1. Clear and Readable Layout: The flight information is presented in a clean and structured format, making it easy for users to quickly scan and compare flight times.
2. Color Differentiation: The use of orange to highlight the middle flight option draws attention, helping users focus on important details or special offers.
3. Flight Details Visibility: Flight number, times, and departure/arrival locations are clearly displayed, making it easy for users to understand key information at a glance.
4. Sorting Feature: The "Sort" button provides flexibility for users to rearrange the results based on preferences, enhancing usability.

Cons:

1. Minimal Price Info: The fare (MYR 128) is shown but doesn't provide any additional context such as taxes, fees, or available upgrades. Including more detailed price breakdowns could add value.
2. Dense Design: The flight blocks are packed closely together. Adding more spacing or a subtle divider between the flight options could reduce the sense of crowding and improve readability.
3. Lack of Visual Hierarchy: All flight information is presented in similar font sizes and styles. Highlighting key details (like flight duration or departure time) more prominently could improve scannability.
4. No Filter Options: Besides the "Sort" button, there are no additional filter options (e.g., by price, duration, or class). Adding such filters would allow users to narrow down their choices more effectively.

Suggestions:

• Add a clearer price breakdown or fare type details.
• Introduce more spacing or dividers between results for visual relief.
• Consider adding filters to let users refine their search results.

Overall, it's a functional and clean design but could use some small adjustments for better readability and feature depth.

Argument

The flight selection page does have a sorting and filter feature based on the prices, duration and class.

7. Seat Selection Page

Fig 1.8 Seat Selection

Self-Reflection

• The seats are minimalistic, which makes ease of use for users.

AI Feedback & Evaluation

Pros:

1. Clear Seat Status Legend: The use of color-coded indicators for "Selected," "Available," and "Reserved" seats is straightforward and easy to understand.
2. Minimalistic Design: The seat map is uncluttered, making it easy for users to focus on selecting their preferred seat.
3. Highlight of Selected Seat: The selected seat is highlighted in orange, which aligns with the app's branding and makes the selection process more intuitive.

Cons:

1. Small Seat Labels: The seat numbers and labels appear quite small, which could make it hard for some users to accurately pick seats, especially on smaller screens.
2. No Additional Info: There's no information on seat types (e.g., extra legroom or exit row). Adding this could help users make a more informed choice.
3. Layout Spacing: The seat layout could feel a bit cramped, especially when navigating with touch gestures. More spacing between rows or seats could improve usability.

Overall, the design is functional and clear, but it could benefit from enhanced visibility and additional details about seat features.

8. Payment

Fig 1.9 Payment Page

Self-Reflection

• The total price (128 MYR) is prominently shown, ensuring users are aware of the amount they will be charged without needing to search for it. This transparency improves user confidence.
• With minimal design elements, the focus is entirely on the payment process, reducing cognitive load for users and helping them complete the transaction quickly.

AI Feedback & Evaluation

Pros:

1. Simple and Clean Design: The layout is minimal, focusing only on the necessary fields for payment, making it easy for users to complete the process without distractions.
2. Flight Summary at the Top: Important flight details (departure and arrival times) are clearly visible, which reassures the user about their booking.
3. Payment Button Highlighted: The bright orange "Pay" button stands out, making it clear where the user needs to click to proceed.

Cons:

1. Lack of Security Indicators: There are no visible icons or labels to indicate the security of the payment process (e.g., SSL encryption), which might make users cautious.
2. Card Logos Placement: While Visa and Mastercard logos are present, they could be larger or positioned more prominently for better visual trust.
3. No Alternative Payment Options: Only card payment is displayed. Including options like e-wallets or bank transfers could provide more flexibility for users.

Suggestions:

• Add a security badge or SSL lock icon to increase user trust.
• Provide more payment options beyond credit cards.
• Consider adding a confirmation step or message before processing the payment for better clarity.

9. Manage Bookings Page

Fig 1.10 Manage Bookings Page

Self-Reflection

• The tab layout is easy to understand, separating upcoming and past bookings.
• Clean minimalist design and visual.

AI Feedback & Evaluation

Pros:

1. Clean and Simple: The design is uncluttered and easy to understand.
2. Consistent Navigation: The back button and bottom navigation bar provide clear navigation.
3. Clear Call to Action: The "Book Flights here" and "Add Booking" buttons stand out.
4. Visual Hierarchy: The use of color and size helps guide the user's eye.

Cons:

1. Limited Functionality (Upcoming Bookings): The "Upcoming Bookings" screen only shows one booking and lacks details.
2. Unclear Purpose (Past Bookings): The "Create a history of your travels here" message is vague. It's unclear what adding a booking to this section achieves.
3. Redundant Tabs: "Past Bookings" having two screens seems unnecessary and could be consolidated.
4. Missing Information: The booking details are minimal. Users would likely need to access another screen for more information.
5. Form Field Issues: The pre-filled "00000000000" in the "Booking Reference" field is confusing and should be a blank field.

Suggestions for Improvement:

• Enhance Upcoming Bookings: Display multiple upcoming bookings with scrolling.
• Include essential booking details like date, time, and flight number.
• Add options to view detailed booking information and manage (e.g., cancel, modify) bookings.
• Clarify Past Bookings: Explain the purpose of adding past bookings (e.g., for tracking travel history, rebooking similar trips).
• Consider displaying previously booked trips automatically instead of requiring manual input.
• Consolidate Past Bookings: Merge the two "Past Bookings" screens into one.
• Improve Booking Details: Provide more comprehensive booking information on the initial screen or allow users to easily access it.
• Optimize Form Fields: Use clear labels and placeholders.
• Avoid pre-filling fields with confusing data.
• Consider adding input validation for the "Booking Reference" and "Name" fields.

Overall, the app design has a good foundation but needs further development to improve functionality and user experience. By addressing the cons and implementing the suggestions, the app can become a more valuable tool for managing flight bookings.

Argument

The upcoming bookings currently shows one because it is the one the user made in the prototype.

NEW REDESIGN

Following the feedback from Mr Shamsul, I have to reconsider my margins and placement of texts, so I start to refine and enlarge my input fields to make it more modern and user friendly.

Fig 2.1 Old login design 

Fig 2.2 New login page redesign 

Fig 2.3 Old signup page design 

Fig 2.4 New signup page redesign 

Fig 2.5 Old main menu design

Fig 2.6 New main menu redesign

Prototype

OLD:

NEW: