AI Analysis
Prompt: can you generate review, feedback and analysis for the
interface design?
Onboarding Screen
✅ What’s Working Well
Logical Narrative - Clear journey from discovery to action,
supporting mental model building.
Consistent Visual Design - Monochromatic blue illustrations
create strong visual cohesion (Gestalt: Uniform Connectedness).
Clear CTA - “Next” and “Get Started” buttons are
high-contrast and well-positioned for easy tapping (Fitts’ Law).
Progress Indicators
Dots show user location and progress, enhancing system
visibility (Nielsen's Heuristic).
Legible & Concise Text
Short titles and descriptions reduce cognitive load and
improve scannability.
🔧 Areas for Improvement
Skip Button Visibility
Darken or underline "Skip" for better control and visibility.
Button Tap Feedback
Add animations or color changes for better microinteraction
feedback.
Illustration-Content Alignment
Update visuals to better reflect mobile actions like booking
and managing spots.
Accessibility Check
Test color contrast to meet WCAG 2.1 AA standards for better
readability.
Argument
I had set the microinteraction in original design.
Accessibility check(WCAG 2.1 AA ) for the Next button has no issue
for bold and big text.
|
|
Original Onboarding
|
Improvement I made:
-
Bold and underline the Skip button to make it more obvious
-
The illustration in original "Manage your booking" page moved to
the "Reserve a spot" page as it is more align to the content.
-
I design a new illustration for "Manage your Booking" page,
there are some edit button, cancel button and time, date, cost
related sign floating around, showing the flexibility of
checking status and manage their booking details.
|
|
Redesigned onboarding page
|
Signup/ Login
✅ What’s Working Well
Clear Visual Hierarchy
Strong labels, consistent padding, and icon+label combos help focus
and reduce cognitive load.
Smart Progressive Disclosure
Button states updates based on form completeness, improving feedback
and guiding users (Nielsen's Heuristic).
Smooth Social Login
Familiar icons speed up signup (Hick’s Law) and offer inclusive
options.
Good Accessibility
Buttons are sized well for touch (Fitts' Law) and text contrast
supports readability.
🔧 Areas for Improvement
Field Labels
Use floating or persistent labels instead of placeholders to
support error recovery.
Terms Link Visibility
Make “Terms & Conditions” a clear, underlined hyperlink;
consider opening it in a modal.
Password Toggle Spacing
Add more padding between password text and the eye icon to avoid
mis-taps.
Sign Up/Log In Toggle
Style navigation links with bold or underline, and add hover/tap
feedback for clarity.
Personal Analysis
Design is clean and clear but visual can be improved
Argument
Field label is present in original design.
Improvement I made:
-
Bolded and coloured the “Terms & Conditions”, "Log in"
button
- Added spacing for the eye icons
-
Add background for signup title as I think the original visual
is too clean and plain.
|
|
Redesigned Signup Page
|
Home Page
✅ What Works Well
Clear Primary Action
The large “Nearby Me” button uses a strong visual hierarchy to
highlight the main task.
Map Usability
Color-coded markers follow recognition over recall, simplifying
parking status visibility.
Compact Info Card
Key details (name, availability, distance) are cleanly presented,
aiding quick decisions (Hick’s Law).
Navigation Bar Clarity
Icons plus labels boost affordance and make navigation intuitive for
first-time users.
🔧 Areas for Improvement
Marker Interactivity
Make pins tappable to update the info card and provide visual
feedback.
Expandable Bottom Card
Allow users to drag up the card to reveal more details progressively.
Empty Map State
Add a friendly message when no parking is available and suggest
expanding the search area.
Accessibility Improvements
Pair color codes with icons (e.g., checkmarks) to support colorblind
users.
Floating Button Clarification
Replace the floating settings icon with a filter icon if it’s meant
for map options.
Argument
-
Location pin is tappable but not showing in the static design.
-
No needed for expandable bottom card. The original horizontal
card gives more visual spacing to the map and make it easier to
see the key details with the map. They can tap to see the
details, and go back easily.
- Misread of floating icon (the icon is "locate me" icon.)
-
It can directly show the nearest result instead of giving an
empty map state.
|
Original Home Page
|
Improvement I made:
-
Added the cross and checkmark for location pin to support
colorblind users.
|
|
Redesigned Home page
|
Parking Information & Reservation Details
✅
What Works Well
Strong Visual Hierarchy
Info flows logically (location → booking → pricing → action) with
clear section separation (Gestalt’s Proximity).
Effective CTA Buttons
Bold, bottom-placed buttons (Reserve Now, Confirm and Pay) follow
Fitts’ Law for easy thumb access.
User Trust Elements
Real location photos, clear hours, address, and transparent policies
build credibility.
Cost Transparency
Fee breakdown and bold total price help users decide quickly (Hick’s
Law).
Smooth Payment Experience
Pre-selected wallet with easy "Change" option ensures user control and
frictionless checkout.
🔧 Areas for Improvement
Confirmation Feedback
Add loading indicators and a success message after payment to close
the feedback loop.
Edit Time Visibility
Make the "edit" pencil icon larger or add a label for clarity.
Heart Icon Clarification
Add a tooltip like “Saved to Favorites!” to explain the heart button's
function.
Wallet Top-up Flow
Prompt users with a pop-up if the balance is insufficient to prevent
payment failure.
Minor Spacing Fixes
Add more padding around the pricing table for better readability on
smaller screens.
Argument
Edit time icon used red colour in original design, which is obvious
enough.
Saved to favourite tooltips present in original design.
|
|
Original Parking information and reservation details
|
Improvement I made:
- Added spacing for the price list.
-
unify all pricing with 2 decimal and change the "credits" to
actual "RM" price.
- Added "payment in process" screen.
|
|
Redesigned Details pages
|
|
|
New added payment in process screen.
|
My Booking & Current Booking
✅ What Works Well
Visual Design
Clean layout, consistent purple/white palette, clear “Unlock My Bay”
CTA.
Info Hierarchy
Key details (booking ID, bay number, arrival time) are
well-emphasized.
Usability
Tab navigation (Current, Upcoming, Past) is intuitive and familiar.
Feedback
Real-time countdown adds urgency and supports task awareness.
Icons
“Cancel,” “Help,” and “Navigate” icons are intuitive and match
expectations.
🔧 Suggestions for Improvement
Accessibility
Improve text contrast (e.g., “Arrive within”) for colorblind users;
add icons.
Microcopy
Use dynamic labels for “Unlock My Bay” based on timing context.
Icon Clarity
Add text labels below icons to support all user types.
Empty States
Display friendly messages or animations when no bookings exist.
Confirmation Feedback
Add modals for “Cancel” and “Unlock” to prevent accidental taps.
( Not necessary )
Argument
Tried for adding time icon for "arrive within" but it does not seems
fit, so I removed and just keep it bold.
Empty States text label for icons present in original design.
Not necessary for confirmation feedback.
**No changes in My Booking & Current Booking screen
In-Session & End Flow
✅ What Works Well
User Guidance
Clear step-by-step flow with friendly prompts like “I've Parked” and
“Confirm Car Removed.”
Visual Clarity
Minimalist layout, legible typography, and well-aligned dialog
cards.
Microcopy
Friendly, instructional language eases user stress.
Pricing Transparency
Clear cost breakdown enhances trust.
Visual Hierarchy
Key actions like “End Session” are prominent and intuitive.
🔧 Suggestions for Improvement
Timing Feedback
Add progress visuals (e.g., animated circle) to enhance
urgency.
Action Confirmation
Show visual cues (e.g., checkmark) after taps for reassurance.
Extend CTA
Boost visibility when time runs low (color or animation).
Dialog Consistency
Standardize layout and illustration sizes across steps.
Accessibility
Improve color contrast and consider voice/haptic cues.
Argument
Animated circle present in the original design.
Visual cues is no needed as the next step has clearly show the
action has been done.
|
|
Current Session Page flow
|
Improvement I made:
- Added spacing for the pricing list
-
Boost visibility of Extend button by making it into secondary
button style and change "Extend" to "Extend Parking Time" for
better clarity of the button function.
|
|
Redesign Current Session page
|
- Unify dialog size and illustration size.
|
|
Redesign Current Session Dialog
|
Past Session Summary
|
|
Original Past Session Page
|
✅ What Works Well
Content Clarity
Clear segmentation of session recap and billing info.
Visual Hierarchy
Well-structured cards with headings guide the eye.
Primary Action
“Generate Receipt” is clear and encourages trust.
Friendly Microcopy
Labels like “Rate your experience!” feel human and conclusive.
Feedback Loop
Star rating supports user reflection and app improvement.
🔧 Suggestions for Improvement
Star Rating Feedback
Add visual/tactile feedback on tap (color fill, “Thanks!”).
Currency Format
Use consistent "RM5.00" style for polish.
Duration Labeling
Replace "9m14s" with "9 min 14 sec" for clarity.
Unused Fields
Hide or label “Not Applicable” for empty energy info.
Receipt Confirmation
Add toast or dialog after generating receipt.
Improvement I made:
- Added toast after pressed generate receipt.
-
make the star rating yellow colour darker, as i feel the
contrast is not enough.
-
Change "Rate your experience" to "Thanks for rating" after user
give the rating.
Booking Confirmation
✅ What’s Working Well
Positive Feedback
Large green tick and “Booking Successful!” message offer instant
reassurance.
Transaction Summary
Card layout neatly groups booking and payment info.
Price Highlight
RM7.00 is prominently displayed, addressing key user concern.
Clear Next Actions
“Navigate Me” and “Home” provide clear, task-focused options.
🔧 Suggestions for Improvement
Replace "13.30pm" with “1:30 PM” or “13:30” for standard formatting
Visually group action buttons (e.g., background card or divider)
Add icons to action buttons for easier recognition
Include options like “Share Booking” or “Save Receipt”
Argument
I don't think adding background for action button is needed.
Improvement I made:
- Added share button at top right corner
- unify time format using "10:00 AM" format
-
tighten a little for the gap between the card and the buttons.
(Originally the button is too far from the card.)
Wallet & Top-Up Flow
✅ What Works Well
User Flow Clarity
Linear, step-by-step sequence from wallet → top-up → payment →
confirmation. Predictable and easy to follow.
Consistent Design
Cohesive use of color, typography, and rounded buttons enhances trust
and visual unity.
Payment Hierarchy
Clear grouping of payment options with recognizable icons.
Confirmation Feedback
Green checkmark and payment details offer strong feedback and closure.
Microinteractions
Disabled buttons until valid input and real-time payment selection
reinforce system feedback.
🔧 Suggestions for Improvement
Card Entry Security
Mask full card number after input (show only last 4 digits).
No Progress Indicator
Add stepper or breadcrumbs (e.g., Step 2 of 4) to orient users.
Success Screen Hierarchy
De-emphasize Transaction ID and Date for cleaner look.
Top-Up Amount Selection
Add clear “selected” state (e.g., filled background or border).
No Error State
Include a screen or toast for failed transactions.
Settings
What Works Well
Visual Hierarchy
Profile info stands out with clear layout and icon use.
Navigation Grouping
Related options grouped neatly in rounded cards.
Brand Consistency
Colors and styles match the app’s overall identity.
Tab Bar Clarity
Active tab clearly highlighted, aiding navigation.
🔧 Suggestions for Improvement
Add section headers (e.g., "Account", "Support") for better grouping
Make profile avatar interactive (e.g., camera icon overlay)
Include visual feedback on taps (e.g., ripple effect)
Add essential settings (e.g., Notifications, Privacy)
Improvement I made:
-
Added section headers: Account, Support, Preference, Feedback
& Share.
-
Add settings: Tutorial, Transaction History, Notification,
Language and system.
Changed Logout colour to red for visual clue.
-
Added camera icons on profile picture to let user know it is
editable.
-
Added round corner for the dark blue background.
Overall Evaluations
Strength
In the original design, there is good handling in setting the visual
hierarchy, such as emphasizing important information by using icons,
colours, bolder font or bigger font, and so on. The flow is friendly
for first-time users, every icon has text descriptions, and the
clues or prompts give ease of guiding and understanding to users.
The overall colours and style are consistent, clean, and show
minimalist design, keeping visual clarity and functionality.
Weakness
Accessibility is less considered in the original design,
where some parts use colour to emphasize or deliver the message but
ignore ease of use for colour-blind people. There are some
inconsistencies in terms of time and currency format, which create
confusion. I also notice some minor spacing issues in the app, such
as elements being too tight or too far apart. The lack of
confirmation feedback decreases users' confidence.
Improvement
I mainly made improvements on spacing, unifying text format,
adding more contrast to certain elements, such as colour for star
ratings, emphasizing important buttons, aligning visuals with
content, and adding some loading screens and toast messages after
actions for better feedback.
Figma Link
Slide
Application Design 2 - Task 1
评论
发表评论