Application Design 2 - Task 1 : App Design 1 Self Evaluation & Reflection

21/04/2025 -  ( Week 1 - Week 4 )

Ho Winnie / 0364866 

Application Design 2 / Bachelor's of Design Honors In Creative Media 

Task 1 : App Design 1 Self Evaluation & Reflection

---

1. Lectures

2. Task 1 : App Design 1 Self Evaluation & Reflection

3. Feedback 

4. Reflection 

---

1. Lectures 

Week 1 : 

This week, Mr. Razif provided an overview of Application Design 2, emphasizing that design is an iterative process and encouraging us to improve upon the software developed in Application Design 1. He also introduced us to his GPT-powered plugin, UX Lab Assistant, which will help evaluate our app and provide constructive feedback. Additionally, we signed up for FlutterFlow as our main development platform for this project.

Week 3 :

This week, we were given the task of redesigning an AirAsia boarding pass to better serve both our primary and secondary audiences. The main objective was to improve the layout and organization of information to enhance usability and overall user experience.

After careful discussion, my team identified AirAsia travelers as the primary audience, focusing on their need for quick access to essential flight details such as boarding time, gate number, seat assignment, and destination. The secondary audience, flight attendants, rely on the boarding pass for passenger verification and seating arrangement, so clarity and accuracy were equally important for them.

We began by analyzing the existing boarding pass layout, identifying areas of clutter and inconsistencies in information hierarchy. From there, we proposed a new design that clearly separates key information into visual zones, uses icons to support quick recognition, and applies font hierarchy to guide the reader’s eye. Our goal was to create a boarding pass that is not only visually appealing but also intuitive and efficient for both user groups.

Our Attempt

---

2. Task 1 : App Design 1 Self Evaluation & Reflection

Instructions : 

Students are required to perform a self-evaluation and reflection based on their mobile application design I final project. This project aims to document the issues, problems, and difficulties and propose solutions to improve the mobile app design aesthetic and user flow. Mobile App design is an iterative process, and this task will expose to students the constant improvements one can make to their app. Students are required to submit the documentation in Google Docs for ease of commenting and feedback by the module coordinator.

Progress : 

A. Recap Of Design In Application Design 1

During Application Design 1, I undertook the redesign of the TBS Bus Ticketing App with a focus on enhancing both the user experience and the app’s core functionalities. My redesign primarily revolved around improving the Minimum Viable Product (MVP) — the bus ticket booking system — by introducing a more intuitive and efficient booking flow.

Key enhancements included a real-time bus arrival tracking feature to reduce uncertainty for travelers, a streamlined seat selection interface for quicker decision-making, and the implementation of downloadable e-tickets for user convenience. Additionally, I added a comprehensive FAQ section to help users navigate the app with ease and resolve common queries independently.

Below are the Figma files and interactive prototypes that showcase these improvements in detail.

Click HERE to view the Figma File :

   

In Week 1, Mr. Razif introduced us to a valuable evaluation tool — the UX Lab Assistant, a GPT-powered plugin designed to provide AI-driven feedback on our screen designs. Leveraging this tool, I received initial insights into areas of improvement and strengths in my interface.

In addition to the UX Lab Assistant, I conducted my own critical evaluation and sought external perspectives through Claude.ai, another AI platform that offered diverse suggestions to refine the user experience further.

To ensure a structured and comprehensive assessment, I organized my self-evaluation around the following key sections of the app:

1. Onboarding 

2. Login Screens

3. Home Page Screens 

4. Bus Schedule Screens 

5. Sort & Filter Screens

6. Adding Passenger Screens

7. Payment Screens

8. Profile and FAQ Screens

1. Onboarding Pages

Fig 1.1 Onboarding Pages

Self Reflection : 

Pros Of Design :

1. Clear Messaging

Each page communicates a distinct value:

• Page 1 sets the tone and purpose.

• Page 2 explains the main feature (booking).

• Page 3 adds extra value with live updates.

→ This aligns with Jakob’s Law—users expect familiar, structured onboarding experiences.

2. Visual Anchoring

Each page uses large contextual imagery (TBS station, booking system, bus) which enhances user orientation and supports the message.

→ A nod to Gestalt’s Law of Similarity – consistent image placement and layout reinforce comprehension.

3. Consistent CTAs

• Good use of button hierarchy with visual distinction (color contrast).

Suggestions for Improvements : 

1. Hierarchy & Readability

The body text is quite dense, especially in Page 2 and 3. Consider:

• Breaking it into shorter lines or bullet points

• Highlighting key benefits with bolding or icons

→ Improves scanability and adheres to Hick’s Law (minimize choices and cognitive load).

2. Removing the "Skip" Button 

• The last onboarding screen does not need the skip button , instead change it to a more appealing text like " Let's Get Started "

AI Evaluation : 

Strengths:

• Clear visual hierarchy with prominent headlines and well-structured text
• Consistent layout across screens creates a cohesive user experience
• Good use of relevant imagery that relates to transportation services
• Action buttons are prominently displayed and follow consistent placement
• Each screen clearly communicates a distinct value proposition

Areas for improvement:

1. Button contrast: The yellow "Sign In" buttons may have insufficient contrast with white text - consider a darker yellow or different color combination
2. Information density: Text blocks are relatively long for onboarding screens - consider shorter, more scannable copy
3. Account options: The "Do You Have An Account?" and "Sign Up" text at bottom appears small and might be easy to miss
4. Accessibility: Consider evaluating color contrast ratios to ensure text is readable for all users
5. Visual hierarchy: The "Skip" button has equal visual weight to "Sign In," potentially creating confusion about the primary action

Argument : 

• I feel that AI's evaluation on the button contrast is not valid as the yellow used firstly is part of TBS's branding color and the contrast is high enough against a black text on a light background.

Redesign Of Onboarding Screens : 

Fig 1.2 Redesigned Onboarding Screens

As part of the design enhancements:

• I updated the border color of the “Skip” button, making it more visible and accessible by improving its contrast against the white background.

• I also darkened the “Do you have an account?” text to a deeper grey, enhancing readability and visual hierarchy without drawing too much attention away from the primary call-to-action.

• On the final onboarding screen, I removed the “Skip” button entirely. By this point, the user has reached the end of the sequence, so skipping is no longer necessary. Instead, a more action-oriented “Let’s Get Started” button was used to guide users into the app.

• Additionally, I reduced the amount of text on each screen to avoid overwhelming users. This ensures that the key benefits of the app — such as real-time tracking, faster booking, and e-ticket convenience — are communicated clearly and concisely.

2. Login Pages 

Fig 1.3 Login Pages

Self Reflection : 

Pros Of Design :

1. Clear Visual Hierarchy

• The TBS logo is prominent and reinforces brand identity.

• The “Log In To Your Account” header uses strong typography for immediate clarity.

• The yellow "Sign In" button is visually dominant and aligns with your onboarding CTA style.

→ This supports Nielsen’s Visibility of System Status and ensures cognitive ease.

2. Well-Designed Input Fields

• Email and password fields are clear, with good spacing and familiar placeholder behavior.

• The "show/hide password" icon is a great usability touch.

→ Aligns with Fitts’ Law and Error Prevention Heuristics (user can avoid typos with password visibility).

3. Alternate Access Options

• Social sign-ins (Google, Facebook, Apple) are easily recognizable by icon.

• This provides flexibility and reduces friction, especially for users who prefer SSO (Single Sign-On).

→ Good application of User Control and Freedom.

Suggestions For Improvements : 

1. Visual Weight of “Forgot Password?”

• It feels slightly detached from the password field.

• It could use lighter styling (e.g., underlined or grey) to indicate it's a link—but also increase touch target size.

2. Contrast Issues

• The text “No Account Yet? Register Here” is quite faint on the white background, especially the first part.

3. Social Sign-In CTA Clarity

• Currently shows only icons without text labels.

Suggestion: Add text labels underneath or on hover (e.g., “Sign in with Google”) to enhance accessibility and clarity for all users (especially new or visually impaired users).

AI Evaluation : 

Strengths:

• Clean, minimal design with good use of white space
• Clear identification with the TBS logo prominently displayed
• Standard login form pattern that users will find familiar
• Alternative login options with social accounts are provided
• Password visibility toggle is included

Areas for improvement:

• Form field styling: The input fields have minimal styling - adding subtle shadows or borders could enhance their visual prominence
• Social login clarity: The social login icons are small and lack explanatory text - users may not immediately understand their function
• Secondary options: "Forgot Password?" and "Register Here" links have different placements and styling, creating visual inconsistency

Argument :

• I feel that AI's evaluation of the  "Forgot Password?" and "Register Here" having different placements and styling causing inconsistency is not valid as both of them aren't the same thing and the Register Here is highlighted in red which encourages uses to create or link the account.

Redesign Of Login Pages : 

Fig 1.4 Redesigned Login Screens

As part of the design enhancements : 

• I updated the placeholder text to “Registered E-mail” and “Password” to make the input expectations more descriptive and user-friendly. This small change is especially helpful for first-time users and aligns with Nielsen’s heuristic of matching the system with the real world.

• I added a horizontal divider labeled “Or continue with” to clearly separate the main login form from the social login options. I also adjusted the spacing between elements to create a more breathable layout. This follows Gestalt’s Law of Proximity, which helps users scan the screen more comfortably.

• I kept the “Sign In” button visually dominant using a bold yellow, while improving the readability of the surrounding text. “No Account Yet?” now has better contrast, and “Register Here” remains red to draw attention without distracting from the main action. This helps users focus while supporting accessibility.

• I added clear labels under each social login icon — Google, Facebook, and Apple ID — to reduce ambiguity and support users who rely on screen readers. This decision follows the principle of recognition over recall, making the screen more inclusive and intuitive.

3. Home Page Screens

Fig 1.5 Home Page Screen

Self Reflection : 

Pros Of Design : 

1. Clear Task Focus – Booking First

• The booking panel (departure, destination, date, etc.) is placed at the top, making it immediately actionable.

• This aligns with user goals—get in, book fast.

→ Strong application of Nielsen’s “Match between system and real-world tasks.”

2. Quick Wallet Access

• Including a TBS E-Wallet panel with a clear balance and CTA (Add Money) is convenient and informative.

• Transaction history is a useful secondary action and doesn’t clutter the primary flow.

→ Supports progressive disclosure and dashboard thinking.

3. Round Trip / One Way Toggle

• Simple toggle makes selection intuitive.

• Helps minimize cognitive load using Hick’s Law.

4. Consistent Visual Language

• Yellow buttons stand out for key actions ("Search Bus").

• Icons in the bottom nav bar are well-used and familiar.

Suggestions For Improvements : 

1. Passenger Input Label

• The label “Enter Pax” isn’t instantly clear to all users.

Suggestion: Change it to “Number of Passengers” or add a small icon (👥) with a tooltip or helper text.

→ Improves accessibility and avoids jargon.

2. Delayed Status – Color Usage

The red “Delayed” status is clear but can be improved for accessibility:

• Make sure red is not the only indicator (consider using an icon or bolded text like “⚠ Delayed”)

3. Bottom Navigation Highlight

The current tab bar shows the home icon in red, but it's subtle.

AI Evaluation :

Strengths : 

Comprehensive functionality with wallet, booking form, active tickets, and promotions in one view

Clear hierarchy with primary booking function prominently positioned

E-wallet integration provides convenient access to payment balance

Active tickets section gives quick access to upcoming travel information

Bottom navigation provides easy access to core app functions

Areas For Improvements :   

Actionable elements: Some interactive elements (like "Add Money" and "View All") lack sufficient visual distinction as clickable items

Color inconsistency: The yellow search button differs from the blue header and other UI elements, creating visual fragmentation

Arguments : 

I disagree with AI's point where they mention that the interactive elements lack visual distinction as the "Add Money" has been made into a button with yellow background 

The yellow search button is the distinct CTA feature so it is normal for it to appear different from the header or background. 

 

Redesign of Home Screen Elements : 

Fig 1.6 Redesigned Home Screen

As part of the design enhancements : 

• I increased the contrast of the “Delayed” status indicator under “My Active Tickets” to make it more noticeable at a glance. To further reinforce the urgency of the message, I added a caution icon, helping users quickly recognize that an important update needs attention. This small visual cue can help reduce the cognitive load for users scanning their ticket status.
• I introduced a passenger icon above the “Enter Pax” field to improve input recognition and reinforce the field’s purpose. This aligns with visual consistency throughout the form and enhances the user’s ability to quickly understand the context of each input box without needing to read each label in full.

3. Bus Schedule Screen

Fig 1.7 Bus Schedule Screen

Self Reflection  :

Pros Of Design : 

1. Clear, Card-Based Layout

Each bus operator is presented in a modular card, which:

• Keeps content chunked and digestible

• Allows easy vertical scrolling for comparison

• Uses icons for transport duration, rating, seat count — excellent for scannability

→ This follows Gestalt's Law of Similarity and supports mobile-first readability.

2. Key Info Hierarchy Is Strong

Each card communicates the essentials in order:

• Operator logo/name

• Departure & arrival times

• Duration

• Price (visually weighted well)

• Extra info: rating, seats, date

→ Adheres to Information Architecture best practices and Nielsen’s “Visibility of system status.”

3. Filter-Friendly Design

The structure is clear:

• Price filtering

• Rating filtering

• Departure time selection

→ Enables future support for custom sorting or filter overlays.

4. User Feedback with Heart Icon

• Each card includes a heart icon for saving/favoriting — useful for comparisons.

• A good micro-interaction opportunity!

→ Builds personalization and leverages user control and memory.

Suggestions For Improvements : 

1. Duration Icon Consistency

The bus icon between times is visually symbolic, but the duration (“4h 30m”) could benefit from:

• A clock icon or time symbol

• Slight left alignment from the central bus route layout for quick scanning

→ Adds clarity using redundant coding (text + symbol).

 AI Evaluation : 

Strengths :

Clean, consistent card-based layout for each bus option

Strong information hierarchy that makes comparison between options easy

Clear visual representation of journey times with the bus icon and dotted line

Essential information (departure/arrival times, duration, price) is prominently displayed

Ratings system helps users make informed choices

Areas For Improvements : 

Sorting options: No visible way to sort by price, departure time, or rating

Accessibility: The star ratings and passenger icons use relatively small text that might be difficult for some users to read

Visual hierarchy: The bus company logos vary in style and prominence, creating some visual inconsistency

Arguments : 

I disagree that there is no visible way to sort price as a filter option is provided at the top right hand corner of the screen. 

The star ratings and passenger icons provided a distinct text next to it which has a heavier weight ( semi-bold) than other normal texts

The bus logo stye differs from company to company hence it is not in our control to change it, I already maintained the same spacing from the logo to the company name (12px) to ensure consistency. 

Redesign Of Bus Schedule Screen : 

Fig 1.8 Redesigned Bus Schedule Screen

As part of the design enhancements : 

• I replaced the bus icon in the middle of each card with a clock icon to better represent the travel duration. This change helps users instantly associate the value with time rather than mode of transport — which is already clear from the context. The updated icon also improves the semantic accuracy of the design.
• I adjusted the vertical spacing and line height within each card to give the layout a more breathable feel. This small change significantly improves scanability and reduces visual fatigue, especially for users browsing multiple bus options.

4. Sort & Filter Screen

Fig 1.9 Sort & Filter Screen

Self Reflection : 

Pros Of Design : 

1. Clear Section Separation

• Sort By and Filter By are cleanly separated by label, layout, and spacing.

• Using bold headings (like “Time,” “Class,” “Company”) supports user navigation within the modal.

→ This enhances scanability and supports cognitive chunking (Gestalt’s Law of Proximity).

2. Intuitive Toggle States

• Filter chips for time slots, class, and company are visually distinct.

• Good size, spacing, and button shape for tappable targets on mobile (likely 48px+ height).

→ Adheres to Fitts’ Law and Mobile Accessibility Guidelines.

3. Dual Action Buttons (Cancel / Apply)

• “Cancel” and “Apply” are well-positioned and styled with clear visual hierarchy:

  • “Cancel” in outline

  • “Apply” in filled yellow

→ Encourages decisive action and supports Nielsen’s Heuristic: Clearly Marked Exits.

4. Close Button Placement

• Top-left “X” button aligns with thumb reach and common modal dismissal patterns.

→ Follows Jakob’s Law (users prefer familiar UI patterns).

Suggestions For Improvements : 

1. AM/PM Time Blocks – Potential Ambiguity

• Having two “AM” labels (08:00–06:00, 06:00–12:00) is confusing:

  • 08:00–06:00 seems like an error or may imply “overnight” filter

AI Evaluation : 

Strengths :

Clear section division between sort and filter options

Logical grouping of filter categories (Time, Class, Company)

Visual distinction between different filter types (checkboxes vs. selectable buttons)

Clear action buttons at bottom (Cancel/Apply)

Simple, focused functionality without excessive options

Areas For Improvements : 

Button sizing: The company filter buttons have inconsistent widths based on text length, creating a somewhat uneven appearance

Consistency: The yellow Apply button matches previous screens but contrasts with the overall blue theme of the app header

Arguments : 

I disagree that the company filter options which have different widths may cause uneven appearance as each company is different. If all sizes became the same, it might cause more empty white space as some company has shorter names.

The yellow apply button is a CTA button hence it needs to appear differently from the other UI colours.

Redesign Of Sort & Filter Screen :  

Fig 2.0 Redesigned Sort & Filter Screens

As part of the design enhancements : 

• I replaced the vague “AM/PM” labels with more intuitive terms like Night, Morning, Afternoon, and Evening, along with their respective time ranges (e.g., Night: 00:00–06:00). This change helps users quickly understand and choose the time slots that best match their travel preferences without second-guessing.

5. Add Passenger Details Screen 

Fig 2.1 Add passenger details screen

Self Reflection: 

Pros Of Design : 

1. Clear Journey Summary at the Top

• Provides route, date, operator, time, and duration in a compact, familiar card layout.

• “1 seat” and “View Details” link allow for quick context without visual overload.

→ Supports Recognition over Recall and offers progressive disclosure.

2. Contact and Passenger Details Section

• Very clear separation of contact vs passenger

• The “Add new passenger” button is highly visible and action-oriented

• Pre-filled example (Winnie Ho, 35 Years Old) gives visual cue of a completed step

→ Strong use of Form Design Best Practices: chunking, prefill, edit-in-place logic

3. Optional Upsell (Travel Insurance)

• Nicely done as an opt-in section, not forced

• Includes concise info, icons, and a toggle with confirmation options

• Two clearly distinct choices with radio selection – avoids confusion

→ Supports User Autonomy and adheres to ethical upsell principles

4. Primary CTA (“Next”)

• Bright yellow button placed at the bottom – ideal position for progressive flow

• Button label is simple and matches common patterns

→ Aligns with Fitts’ Law and supports flow state interaction

Suggestions For Improvements : 

1. Passenger Count Feedback

• You currently show 0/1 selected which is not very intuitive, consider changing it to 1/1 passenger selected with a tick icon indicating.

AI Evaluation : 

Strengths :

Clear journey summary at the top provides context

Logical grouping of related information (Contact Details, Passenger Details)

Edit options for key sections allow for easy modifications

Insurance options are presented with clear value propositions

Good use of sectioning to separate different types of information

Clear primary action button ("Next") at the bottom

Areas For Improvements : 

Information clarity: "Tickets would be sent here" is informal language and lacks specificity about delivery method

Action button placement: The "Add new passenger" button breaks the visual flow of the passenger section

Arguments : 

I disagree that the "Add new passenger" button breaks off the visual flow as , it's intentionally placed as the gateway to entering data

Redesign of Add Passenger Details Screen : 

Fig 2.2 Redesigned Add Passenger Details Screen

As part of the design enhancements :

• I replaced the generic bus icon in the travel duration section with a clock icon, making it more intuitive and semantically accurate. This better reflects the purpose of the field, which is to display travel time, not transport type.
• I added a green indicator with a checkmark and “1/1 passenger selected” label to show when all required passenger details have been filled in. This creates a clearer sense of completion and reassures users that they’ve fulfilled that part of the process.
• I changed the original line “Tickets would be sent here” to “Tickets would be sent to this e-mail”, which is more direct and user-friendly. This improves the clarity of communication and reduces ambiguity, especially for users unfamiliar with the app.

6. Payment Details Screen

Fig 2.3 Payment Details Screen

Self Reflection : 

Pros Of Design : 

1. Wallet-Specific Framing

• Clearly labeled as “TBS Wallet”, distinct from generic payment screen

• Reinforces that this is a secure, in-app transaction method

→ Builds trust and matches user expectations (Jakob’s Law)

2. Encouraging Message for Loyalty

“210 TBS points would be collected...”

• Great incentive copy to nudge wallet usage

• Clear value proposition without being pushy

• Positions wallet payment as smart and rewarding

→ Aligns with nudge theory and increases perceived value of using the in-app wallet

3. Clear Transaction Breakdown

• “Ticket Details” and “TBS Savings” are visually distinct but related

• Highlights:

  • Price (RM 26.00)

  • Savings applied (RM 2.00)

  • Wallet balance before and after

→ Follows UX financial transparency principles, which increase trust and reduce drop-off

4. Visual Hierarchy & Typography

• Red typography for total and balance creates attention priority

• Card layout with adequate spacing aids scannability

→ Aligns with visual hierarchy best practices (especially in fintech contexts)

Suggestions For Improvements : 

1. Clarify Deduction Source

• You mention:

  • Ticket total is RM 26.00

  • Deducted amount is RM 2.00 (from wallet)

This suggests only points are applied, not full payment.

Suggestions:

• Rename “Deducted Amount” → “Points Deducted”

• Add: “Remaining RM 24.00 will be charged to TBS Wallet”

→ Ensures full cost path clarity, avoids misinterpretation

2. Visual Cue for Wallet Balance

Consider adding a wallet icon beside the "TBS Savings" label or next to the final balance:

• Helps tie the information to wallet functionality

• Strengthens brand visual language

AI Evaluation : 

Strengths : 

Clear breakdown of costs with line items clearly separated

Good use of negative values to indicate discounts and deductions

Prominent display of total amount

Section headers in red create clear visual distinctions

Straightforward navigation with back button and next button

Areas For Improvement : 

Visual emphasis: The most important information (total amount) could be more visually prominent

Terminology inconsistency: "TBS E-Points" in the ticket details vs. "TBS Savings" as a section header creates confusion

Arguments : 

I disagree with the point that the total amount is not prominent enough as the total amount is in red and right-aligned, which already increases visibility.

The TBS E-points is the discount applied and the savings referred to the amount left in the wallet after the deduction of points so the distinction is useful. 

Redesign Of Payment Details Screen : 

Fig 2.4 Redesigned Payment Details Screen

As part of the design enhancements : 

• I added icons beside the “Ticket Details” and “TBS Savings” section titles to make the content more visually digestible and scannable. These icons help break up text-heavy sections and give users a quick reference point for understanding the breakdown of charges and savings.
• I changed the button label from “Next” to “Confirm & Pay” to reflect the actual action the user is taking at this point in the journey. This change removes ambiguity and sets clearer expectations, reducing potential hesitation or confusion during payment.

7. My Profile & FAQ Page 

Fig 2.5 My Profile & FAQ

Self Reflection  : 

Pros Of Design : 

Profile Screen 

1. Clear Identity at Top

   • Profile image + name (Xiao Ming) gives a strong user anchor

   • Establishes identity and access point for personalization

2. Well-Organized Feature List

   • Uses intuitive icons and recognizable labels (TBS Wallet, Community, FAQ, Settings, etc.)

   • Log Out button is clearly styled in yellow, separate from destructive actions

3. Footer Social Links

   • Inclusion of web + social icons subtly encourages external engagement without cluttering UI

→ Follows Information Architecture best practices and User Control & Freedom

FAQ & Support Page

1. Search Bar Placement

   • Top-aligned with icon and placeholder – perfect for FAQ behavior

   • Supports search-first help discovery

2. Expandable FAQ Cards

   • Accordion-style interaction is compact and scalable

   • Encourages exploration without overwhelming

3. Booking-Specific Issue Reporting

   • Excellent inclusion: shows recent bookings and provides direct “Report” button per trip

   • Anchors user assistance in context

→ Demonstrates strong Task-Relevant Support, applying Recognition over Recall

4. Multi-Channel Support

   • “Call Us,” “Chat,” “Feedback,” “Mail” — multiple modalities for varied user preferences

   • Each action visually distinct with icons

→ Excellent accessibility and inclusivity

AI Evaluation : 

Strengths : 

Clean, organized layout with clear navigation options

User profile information is prominently displayed

Good categorization of account-related functions

Consistent card-based UI for navigation options

Clear log out button

Bottom navigation maintains consistency with other screens

Areas For Improvement : 

Visual hierarchy: All menu options have equal visual weight despite different importance levels

Search implementation: Search field lacks clear button or auto-suggestions

Arguments : 

The current flat layout intentionally gives all menu items equal weight to maintain visual simplicity, reduce cognitive bias, and ensure equal discoverability — especially for new users who may not know what’s important yet.

The search bar is intended to serve as a keyboard-triggered input — typing auto-filters FAQ entries in real time or encourages user to scroll. A separate button may be unnecessary if results update dynamically.

Redesign of My Profile & FAQ Screens : 

Fig 2.6 Redesigned My Profile & FAQ Screens

As part of the design enhancements : 

• I introduced an “Edit Profile” button below the user avatar to make profile management more accessible. This gives users direct access to modify their account details, reducing the number of steps needed to reach that functionality — an important UX improvement for user autonomy.
• I adjusted the search bar styling on the FAQ & Support page by lightening its background. This creates a stronger contrast between the search input and the FAQ cards below, making it easier for users to identify the search function and distinguish it from static content.

Google Docs File : Click HERE For Link

 

Final Design : 

 

Presentation :

App Design 2 Task 1 by Winnie Ho

---

3. Feedback

Week 2 : 

Mr Razif mentioned that some AI feedback might not make sense so it is good to include in our blog mentioning why it does not work.

---

4. Reflection

Experience : 

Through this project, I had the opportunity to revisit and improve the TBS App after completing App Design 1. It was a valuable experience to build upon my earlier design, as I could apply new knowledge and refine my existing work. While integrating feedback from both human users and AI tools, I realized how much my design perspective had evolved. Working through iterations made me more aware of the importance of balancing design intent with practical usability, especially when transitioning from wireframes to a functional UI.

Observation : 

One key observation I made during this process was that there is still a lot of room for improvement in the app’s interface. Although AI-generated feedback provided many helpful suggestions, I noticed that not all of them aligned with the core goals of user experience. Some recommendations focused heavily on aesthetics or theoretical best practices, but didn’t take into account the specific context of our app or user base. This emphasized the need to critically evaluate feedback, rather than accepting every suggestion blindly.

Findings : 

Ultimately, I found that successful UI enhancement relies on understanding which suggestions genuinely support the user journey and which do not. It is vital to filter out advice that may compromise the app’s usability in favor of visual trends or unnecessary complexity. This reflection reinforced the principle that UX should always be the central focus of app design decisions. By maintaining this priority, we ensure that improvements serve the users first—creating not only a more attractive app, but also one that is intuitive, accessible, and meaningful to its audience.