Application Design 2 | Task 1: App Design 1 Self-Evaluation and Reflection
04.24.2025 - 18.05.2025 || Week 01 - Week 04
Hanson Pea Wei Hao || 0359463
Application Design 2 || Bachelor of Design (Honours) in Creative Media || Taylor's University
Task 1: App Design 1 Self-Evaluation and Reflection
Hanson Pea Wei Hao || 0359463
Application Design 2 || Bachelor of Design (Honours) in Creative Media || Taylor's University
Task 1: App Design 1 Self-Evaluation and Reflection
Lists
1. Instructions
2. Feedbacks
3. Reflections
Instructions
For Task 1, we need to doing a self reflection for our works in Application Design 1. By the design suggestion, I will do step-by-step accessibility review across the flow and do a structured feedback based on layout and interaction.
Screen 1: Splash / Welcome Screen
Fig, 1.1, Welcome Page [before and after]
For Design Suggestion:
- Add a semi-transparent overlay behind the text buttons to ensure consistent readability against the image background.
- Increase touch target spacing between "Log In or Sign Up" and "Continue as Guest" to prevent accidental taps.
For Structured Feedback:
- Clarity: Visually appealing but readability is at risk due to image background.
- Interaction: Buttons are recognizable, but may not be distinguishable for low-vision users.
- Layout: Minimalist and clean, but relies too heavily on the background for mood-setting. Consider dark overlay or blurring effect.
Screen 2: Log/ Sign in page
Fig, 1.2, Log/Sign in Page [before and after]
Design Suggestion:
- Add floating labels or maintain label visibility outside input fields to help users understand expected input after typing.
- Consider a "show password" toggle for the password field.
- Group third-party login options under a heading like “Sign in with” to enhance clarity.
Structured Feedback:
- Clarity: Generally clear, but placeholders shouldn't replace labels.
- Interaction: Smooth and familiar sign-in pattern. Consider feedback on invalid credentials or input format.
- Layout: Well-balanced. Vertical spacing is generous.
- Accessibility: Partially met. Contrast for placeholders and label persistence need improvement.
- Consistency: Button styles are consistent, but visual language of “OR” separator could be emphasized more (e.g., with divider lines).
Screen 3: Search Page – Pick-up/Drop-off Details
Fig, 1.3, Search Pick-up/Drop-off Page
Design Suggestion:
- Clearly separate sections using visual dividers or spacing to reduce cognitive load (e.g., between location and time pickers).
- Use icons with text labels for switches and buttons to improve recognition.
- Consider using steppers or wheel selectors for time input — more mobile-friendly.
Structured Feedback:
- Clarity: Good, but minor visual clutter. Could benefit from spacing and grouping improvements.
- Interaction: Strong sense of control and clear primary action.
- Layout: Logical vertical structure but a bit dense. Use card containers to visually chunk related inputs.
- Accessibility: Mostly strong; just needs label enhancements and visual cues for interactive elements.
- Consistency: Iconography and button styles are in line with previous screen.
Screen 4: Pick-Up Location Selection
Fig, 1.4, Pick-up/Drop-off location Selection Page[nothing to change]
Design Suggestion:
- Add section headings (e.g., “Recent Searches”) to improve hierarchy.
- Include a highlight or selection state when a location is tapped.
- Consider adding a search bar placeholder like “Enter location name” to guide the user.
Structured Feedback:
- Clarity: Simple and understandable — good minimalist layout.
- Interaction: Missing feedback states slightly impact user confidence.
- Layout: Very clear spatial organization, but could benefit from more padding between groups.
- Accessibility: Icons and text are legible, but semantics and feedback should be added.
- Consistency: Continues style from previous screens effectively.
Screen 5: Car Selection List
Fig 1.5, Pick-up/Drop-off location Selection Page[before and after]
Design Suggestion:
- Use card shadows or elevation to distinguish each vehicle listing more clearly.
- Add filter or sort options (e.g., by price, fuel level) to improve user control.
- Include a "select" button within each card to make the action explicit, rather than assuming the whole card is tappable.
Structured Feedback:
- Clarity: Visual hierarchy is solid, though icons could use more explanation (especially fuel).
- Interaction: Tapping anywhere to select a car is efficient but lacks affordance; “Select” CTA would clarify it.
- Layout: Clean, repeatable structure. Could use clearer spacing between cards.
- Accessibility: Needs support for semantic descriptions (car name, price, fuel) per card.
- Consistency: Matches overall visual system well.
Argument:
- the whole card can tap so no need to add a select button
Screen 6: Car Details & Booking Overview
Fig 1.6, Car Detail & Booking Overview page [nothing to change]
Design Suggestion:
- Use a section divider or card layout between “Booking Details” and “Zone Information” for improved grouping.
- Consider using expandable sections (accordion style) to reduce vertical scrolling.
- Add a “Back” or “Change” option for editing previous selections (e.g., date/time or car).
Structured Feedback:
- Clarity: Strong; all necessary details are present. Just needs slightly more visual organization. But the feature might confuse users unfamiliar with icon meaning( maybe can add name beside).
- Interaction: Mostly static view; a “Modify Booking” option would increase user control, and can add hover/pressed state.
- Layout: Informative and compact. “Zone Location” could use a card style or border to isolate content.
- Accessibility: Mostly met, though interactive text like “Map” and icons need screen reader support. and missing descriptive text for icon and checklist items.
- Consistency: Continues the same structure, typography, and icon usage
Screen 7: Confirmation Summary + Promo Code
Fig 1.7, confirmation Summary and promo code page[nothing to change]
Design Suggestion:
- Visually emphasize “Total Price” using bold text or a colored background for clarity.
- Align Promo Code field more clearly with its action icon — consider using a button instead of an arrow icon alone.
- Group “Price Details” in a card container to separate from the booking summary.
Structured Feedback:
- Clarity: Very readable, with a clear overview of payment info. Small enhancements to feedback would improve it.
- Interaction: Tap area for promo feels small — may cause errors.
- Layout: Organized into sections, but lacks strong visual boundaries between them.
- Accessibility: Mostly good, just needs promo input improvements and label clarity.
- Consistency: Matches visual language well.
Screen 10: Booking Confirmation (Success Page)
Fig 1.8, Booking confirmation Page [before and after]
Fig 1.9, a confirmation Pop up [add-on]
Design Suggestion:
- Enhance the success message with an icon (e.g., checkmark) and larger font size to reinforce feedback.
- Add a “View Booking Details” or “Back to Home” button to guide next steps.
- Slightly increase spacing around the green success banner to make it more noticeable and visually separate.
Structured Feedback:
- Clarity: Clear confirmation, but lacks follow-up options (e.g., modify, cancel).
- Interaction: Static; opportunity to deepen interaction with next steps.
- Layout: Minimal and clean, but success message could be emphasized further.
- Accessibility: Relies too much on color, and lacks semantic cues.
- Consistency: Visual consistency is strong with previous screens.
In this task, the feeling of doing the prototype is a bit different than previously when I was doing the application design 1. because for now, I will have to think about possibility or workable for me to code it for the future task. I also realised that previously there is so many important parts that I didn't notice and take care of which is some of the detail which includes the alignment, size of each element, and typography.
Comments
Post a Comment