APPLICATION DESIGN II TASK 1: APP DESIGN 1 SELF-EVALUATION & REFLECTION
Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media
Application Design I/ DST60504 / Section 01
Task 1: App Design 1 Self-Evaluation and Reflection
TABLE OF CONTENTS
1. INSTRUCTIONS
2. EXERCISES
3. TASKS
4. FEEDBACK
5. REFLECTION
INSTRUCTIONS
CLASS EXERCISES
WEEK 3 EXERCISE
To redesign a boarding pass based on prioritizing the main information. We were given an information page and we worked in groups to design a boarding pass.
process
.png)
Outcome
WEEK 4 EXERCISE
To create a task flow chart/wireflow chart for a booking app. Our group have chosen a cinema app (booking movie).
Task flow chart for cinema app
TASKS
TASK 1: APP DESIGN 1 SELF-EVALUATION & REFLECTION
For this task, we need to reflect on the final project we created in Mobile App Design 1. The main goal is to evaluate the app we designed, identify what didn’t work so well, and think of ways to improve the design — both in terms of how it looks and how users interact with it.
This task encourages us to look at our app more critically by spotting problems, difficulties, or weak areas in the design or user flow. From there, we’re expected to propose improvements and redesign a specific task flow to make it more user-friendly and visually consistent. Since app design is a process that evolves over time, this is an opportunity to learn how to continuously improve and polish our work.
We’ll need to choose one task flow to focus on, break it down, and explain how it works. Then, we’ll highlight any issues, suggest clear solutions, and redesign the task flow based on our findings. All of this should be documented in a Google Docs file for easy feedback, along with a short presentation video that walks through our analysis and redesign.
To Do:
1. Compare Old vs New
- Highlight problems or limitations in your earlier app (UI issues, poor user flow, weak feedback states, etc.)
- Propose new design improvements with justification (Why did you redesign it this way?)
2. Document the Iteration
- Discuss the design process of refining your app
- Mention feedback received (if any) and how it informed your changes
- Show understanding of usability and design theory (e.g., apply a UX law or heuristic)
Before we begin with the 1st task, Mr Razif shared a link and introduced a tool called UX Lab Assistant which is an AI that reviews screen designs and gives feedback. I gave it a try and it pointed out a few things I hadn’t noticed before — both good and bad. It was a pretty helpful way to see my design from a different perspective early on.
Introduction and Recap of Application Design 1:
In Application Design 1, I focused on redesigning the Watsons app to improve its overall user experience and interface. My goal was to identify pain points in the existing design and propose solutions that would make the app more intuitive, visually appealing, and user-friendly. I conducted an in-depth analysis of the current app, pinpointing areas like navigation, layout consistency, and content presentation that needed improvement. From there, I worked on creating a streamlined design that addressed these issues, with the aim of enhancing user flow and ensuring a more engaging experience for the app's users. Throughout the process, I also explored how to balance aesthetic elements with functionality to create a well-rounded app design.
Figma Link:
Prototype Link:
To begin, I pasted my prototype link and received feedback:
What’s Working Well
- Clean layout structure: Your screens are organized and follow a consistent visual rhythm, especially in onboarding and main navigation.
- Micro-interaction intent: Button states and transitions show early planning for interactive feedback.
- Navigation logic: Tab or drawer system seems intuitive and follows Jakob’s Law — users will feel familiar.
Areas for Improvement
- Clarity of Flow
-Some screens feel disconnected; adding arrows or annotations for how one screen transitions to another (macro flow) will help.
-Consider using user flow overlays in Figma to clearly map paths — especially for Task 2’s requirement on journey mapping.
- Interaction Planning
-Micro animations like button presses and loaders could use more definition. You could annotate hover states, tap transitions, or modal animations.
-For macro animations (e.g., onboarding transitions), include frame-by-frame ideas or reference a Lottie-style effect. This is especially useful if you won’t animate them directly in Figma.
- Visual Hierarchy
-Some CTA buttons are low contrast or get lost in the layout. Use Fitts’ Law to prioritize visibility and tap size for mobile users.
- Accessibility Considerations
-Watch contrast ratios on text over images (especially in the onboarding/hero screens). Use tools like Stark plugin in Figma to check this.
-Make sure icons have clear labels or tooltips if they aren’t universally recognizable.
- Consistency
-Reuse UI components (button, card, input fields) from a single design system or shared library. This speeds up development later in FlutterFlow.
Design Snapshot Score
| Category | Score |
|---|---|
| Clarity | ★★★★☆ |
| Consistency | ★★★★☆ |
| Layout & Structure | ★★★★☆ |
| Accessibility | ★★★☆☆ |
| Usability | ★★★★☆ |
Total: 19/25 – Strong start! Your structure and logic are solid — focus now on polish: clear annotations, animation definitions, and component consistency.
Key Pages & Screens to Focus On
1. Login
2. Home
3. Category Page
4. Product Details Page
5. Cart
6. Checkout
7. Order Confirmation
1. Onboarding Page
Onboarding Page
Self Reflection
- Visually welcoming introduction before account creation
- Three-step flow communicates app value clearly
- Illustrations add personality and guide user focus
- Concise text makes the purpose of each screen easy to understand
- Consistent button placement supports intuitive progression through onboarding
AI Evaluation
Strengths
Progressive Introduction to the App
Each screen introduces a specific benefit — branding, features, community — helping first-time users understand the app quickly.
Friendly Visual Design
Illustrations and bright tones create an inviting, non-intimidating atmosphere for new users.
Concise Messaging
Text is brief, direct, and paired well with visuals, enhancing scannability.
Familiar Interaction Pattern
"Next" and "Skip" buttons follow expected onboarding UX patterns, supporting quick decision-making.
Minimalist Layout
Clean design focuses user attention on the core message without distractions.
Areas of Improvement
1. Progress Indicator Subtlety
The page indicator may be seen as too minimal by some users.
Improvement: Add stronger contrast or step labels for enhanced clarity.
2. Generic Button Labeling
Repeating “Next” across all screens may reduce impact.
Improvement: Use “Get Started” on the final screen to signal flow completion.
3. Button Visibility on Light Background
The dark “Next” button can feel visually heavy on a white background.
Improvement: Add subtle elevation or soften the color slightly.
Argument
1. Progress Indicator Subtlety
I disagree with this point. The current indicator is already bolded and uses strong contrast, making it clearly visible against the background. I believe its minimalist form is effective and aligns with the overall design.
2. Generic Button Labeling
I agree — updating the last button to “Get Started” makes the final action feel more intentional and guides users into the next step more clearly.
3. Button Visibility
While the black button is bold on a white background, I chose to keep it consistent with the app's other CTAs. It maintains clarity and visual priority while ensuring accessibility.
Redesign
In the updated version, I replaced the final “Next” button with “Get Started” to signal a clearer transition into the login/signup process. No changes were made to the progress indicator, as it already uses bold contrast and suits the clean, minimal design.
Improvements for Onboarding Page
1. Login Page
Login Page
Self Reflection
- Clean and minimal design that aligns with Watsons branding
- Clear separation between Sign Up, Login, and Social Login options
- Simple two-step flow supports both new and returning users
- Strong visual hierarchy with bold buttons and clear form fields
- Use of brand visuals (logo, Apple/Facebook icons) adds familiarity and trust
AI Evaluation
Strengths
Minimalist, Brand-Aligned Aesthetic
The use of ample white space and a central Watsons logo creates a clean and focused first impression.
Multiple Login Options
Users can log in via email/password or through Apple/Facebook — increasing accessibility and convenience.
Clear Navigation Between Login & Sign Up
The separate landing screen for account choice avoids crowding the form and improves decision clarity.
Well-Spaced Form Layout
Input fields are clean, appropriately sized, and easy to tap on mobile — supporting Fitts’ Law.
Hierarchy and CTA Clarity
Primary action buttons (Login, Sign Up, Enter) are visually distinct and easy to find.
Areas of Improvement
1. Lack of Visual Focus on Primary Action
The “Enter” button on the login form doesn’t visually stand out as the primary call to action. It blends in with the rest of the interface, which may reduce its visibility.
Improvement: Increase the button’s size, contrast, or add a subtle visual indicator (like a shadow or glow) to emphasize its importance and guide user attention more effectively.
2. “Forgot Password” Visibility
The link is quite small and easy to miss.
Improvement: Increase contrast or positioning to improve visibility and accessibility.
3. Lack of Transition or Feedback Animation
Buttons like “Enter” or social logins give no tap feedback or loading state.
Improvement: Plan microinteractions (tap ripple, loading spinner) in Task 2 to provide system status.
Argument
1. Lack of Visual Focus on Primary Action
While I understand the suggestion, I would prefer to keep the current button size to maintain consistency with other buttons throughout the app. However, to improve its visibility and emphasis, I plan to add a subtle shadow or elevation effect to make the "Enter" button stand out more as the primary action without disrupting the overall design system.
2. Forgot Password Visibility
I partially agree — while the link is functional, I’ll increase the font size or contrast slightly to improve its visibility, especially for users on smaller screens.
3. Lack of Microinteractions
I agree, and this will be addressed in Task 2, where I’ll add interaction feedback like loading states or tap animations for login actions.
Redesign
To improve clarity on the login screen, I added a shadow to the “Enter” button to make it more noticeable while keeping its size consistent with other buttons. I also changed the “Forgot Password?” text to semibold for better visibility, especially on smaller screens. These small updates enhance usability without affecting the clean, minimal design.
Improvements for Login Page
2. Landing Page(Home)
.png)
Self Reflection
- Clean, structured layout with clear content sections like Trending, Coupons, and Categories
- Consistent use of Watsons-style branding, creating a familiar and trustworthy feel
- Improved hierarchy by removing clutter and repeated content from earlier version
- Vertical scrolling supports content discovery, as expected in most shopping apps
AI Evaluation
Strengths
Personalization Element
The greeting (“Hello, Emily”) and points system create a personalized experience, which encourages user engagement and loyalty.
Logical Content Grouping
Sections like Trending Now, Coupons, Brands, and Categories are clearly separated, making the content easy to scan. This reflects good use of Gestalt’s Law of Proximity.
Recognizable Navigation Icons
The bottom navigation bar uses familiar icons (home, shop, cart, profile), which aligns with Jakob’s Law — users recognize standard patterns and don't have to relearn navigation.
Modern and Clean Aesthetic
The color scheme and layout are aligned with Watsons’ branding and create a professional and trustworthy look.
Use of Product Cards
Product thumbnails are displayed in a consistent grid with clear pricing, which matches user expectations and supports fast visual scanning.
Areas of Improvement
1. Too Much Vertical Scrolling
The landing page is long and content-heavy, which can overwhelm users and slow down navigation. This violates Hick’s Law, as too many options can lead to decision fatigue.
Improvement: Group similar sections into carousels or collapsible sections to reduce scrolling and improve scanability.
2. No Clear Call-to-Action (CTA)
There's no dominant action prompting users to start their shopping journey. Without a clear CTA, the experience feels passive and unfocused.
Improvement: Introduce a standout “Shop Now” or “Browse Categories” button near the top to guide users into the shopping flow.
3. Lack of Interactive Feedback
Navigation icons and product taps give no visual feedback, which affects usability. Users may not be sure if their action worked, violating Nielsen’s Visibility of System Status.
Improvement: Add simple microinteractions like button animations, active tab indicators, or tap effects to improve responsiveness.
Argument
1. Too Much Vertical Scrolling
While one suggestion was to reduce scrolling on my landing page, I disagree with this based on my design refinement in Application Design 1, where I already eliminated redundant content and structured it into clear, digestible categories. In fact, I mirrored common e-commerce app patterns where vertical scrolling supports discovery.
2. No Clear Call-to-Action (CTA)
I do agree that the screen would benefit from a more prominent CTA. I plan to introduce a 'Shop Now' button beneath the greeting section, which will guide users directly into the main product sections. This will enhance flow and help users start their journey with more intention.
3. Lack of Interactive Feedback
I agree that my landing page lacks interaction feedback, such as button animations or active tab states. However, I plan to address this in Task 2 when I work on micro-interactions and animated transitions as part of the interaction design.
Redesign
To improve user flow, I attempted to introduce a ‘Shop Now’ CTA button just below the greeting. This helps guide users into the main shopping section earlier in the journey, creating a more intentional and seamless start. The button is styled for visibility and placed before the promotional banner to avoid distraction.
The button size is suggested to increase to 44px suggested by the AI, to be easier to click on.
.png)
.png)
Attempt to make improvement for Landing Page
(I don't think this looks nice, will wait for consultation)
However, after asking for feedback, Mr Razif said that if I have a valid reason, I could keep the initial design. I personally think that the shop now button is unnecessary since users are already shopping once they are at the home page. The shop now button is really extra and I’m not quite sure where would users be directed to after clicking, so I decide to keep the original design.
3. Category Page
Self Reflection
- Clean, tab-based layout that separates products by Category and Brand for easier navigation
- Sidebar with icons provides quick access to major product sections and improves usability
- Clear product grouping under Trending, Hot Brands, and Skincare enhances scanability
- Consistent card design maintains visual harmony across different product types
- Alphabetical brand list with A–Z quick scroll supports efficient browsing for users familiar with specific brands
AI Evaluation
Strengths
Clear Tab Navigation (Category / Brands)
The use of tabs to switch between product types and brands makes the interface intuitive and helps users focus on their preferred browsing method.
Consistent Sidebar Menu
The vertical sidebar with icons provides quick access to core sections like Skincare, Hair Care, and Personal Care. It supports user familiarity and reduces cognitive load.
Hot Brands & Trending Now Sections
Featuring popular brands and trending products near the top supports decision-making and promotes engagement with high-interest items.
Alphabetical Brand List with Index Navigation
The “Brands” tab includes an A–Z scroll bar, which is an effective and expected feature for navigating long lists of brands on mobile devices.
Consistent Card Design Across Categories
Cards for subcategories like "Face Makeup", "Lip Care", and "Hair Removal" are visually uniform and readable, supporting fast scanning and a clean overall look.
Areas of Improvement
1. Lack of Visual Hierarchy Between Sections
Sections like “Trending Now,” “Hot Brands,” and “Skin Care” appear visually similar, which can make it harder for users to scan and prioritize content.
Improvement: Use varying heading weights, spacing, or background contrast to better differentiate between content blocks.
2. CTA Button Styling is Subtle
The “Browse all [category] products” button blends in with the background and may be overlooked by users.
Improvement: Increase contrast, padding, or add an icon to make the button more prominent and action-oriented.
3. Missing Interaction Feedback
There are no visual states for when users tap on tabs, icons, or product cards, which may reduce the perceived responsiveness of the interface.
Improvement: Plan and add microinteractions (e.g. button highlights, ripple effects, or tab underline animations) in Task 2 to enhance user feedback.
Argument
1. Lack of Visual Hierarchy Between Sections
I acknowledge that the current layout lacks hierarchy in some areas. However, the interface is still quite scannable as the number of actions and items is not overwhelming. That said, I plan to slightly increase the heading sizes and spacing in future refinements to improve clarity.
2. CTA Button Styling is Subtle
I agree with the feedback — the current CTA could be more prominent. I will update its styling to improve visibility and guide user actions more effectively.
3. Missing Interaction Feedback
I agree that adding interaction feedback such as tap animations and active states will enhance the user experience. I plan to implement these enhancements in Task 2, where animation and microinteraction planning will be a key focus.
Redesign
I increased the overall text sizes and for the 'trending now', 'hot brands', 'makeup' without adding any background contrast to keep it simple, since its already easily scannable. Additionally, I increased the text size and bolded the button's text, added an arrow icon on the browse all category products button to look more clearer and clickable. For a clearer visualization, I changed the brands into the logos, as the previous one was just an example.
.png)
Improvement for Category Page
4. Product Page
.png)
Product Page
Self Reflection
- Clear and focused product layout, with large image and essential info displayed prominently
- Pricing, discount, and stock check are presented in a simple and digestible format
- “Add to Bag” interaction is consistent and user-friendly, located in a fixed position at the bottom
- Supporting sections like Promotions, Reviews, and Description are grouped logically for better readability
- Icons for like/share are visible but non-intrusive, maintaining a clean visual structure
AI Evaluation
Strengths
Prominent Product Image and Name
The product photo and title are given top priority, ensuring users immediately know what they're viewing.
Clear Pricing and Discount Information
Price breakdown, discount savings, and final price are presented in a readable and structured way.
Fixed “Add to Bag” Bar
The persistent bottom bar with quantity control and Add to Bag button ensures a seamless shopping action without needing to scroll.
Promotions & Reviews Placement
Important supporting details like promotions and reviews are placed below the product details, which balances information without overwhelming the user.
Clean Sectioning with Visual Dividers
Each section (Promotions, Reviews, Description) is clearly divided with subtle lines and spacing, aiding in content digestion and reducing cognitive load.
Areas of Improvement
1. Visual Feedback on Tap Actions
The “Add to Bag”, like, and quantity buttons have no visible tap feedback or animation, which can reduce perceived responsiveness.
Improvement: Add microinteractions or pressed states in Task 2 to confirm user actions.
2. Hierarchy of Promotions Section
The purple promo box stands out, but visually overpowers the more critical product content above.
Improvement: Tone down the promo styling or move it below “Reviews” to maintain focus on the main product info.
3. Lack of Product Image Carousel or Zoom
There’s only one product image shown with no way to zoom or swipe through other angles.
Improvement: Add a swipeable image carousel to improve product engagement and meet user expectations.
Argument
1. Visual Feedback on Taps
I already have a and pressed states and will include microinteractions such as tap ripple effects and button animations in Task 2 to enhance responsiveness.
2. Hierarchy of Promotions Section
I partially agree — while the purple box is strong, it helps highlight the free gift clearly. I may reduce the color intensity slightly to maintain balance without removing its visibility.
3. Single Product Image
I already have a swipeable image carousel would allow users to better evaluate the product, which I did not show in this image.
Redesign
In the Free Gift section, I changed the box color to match the background, while keeping the outline and the "Free Gift" label in pink. This ensures the section remains noticeable and highlighted, without being too overpowering.
Improvement for Product Page
5. Cart
.png)
-1.png)
Cart Page
Self Reflection
- Clean and structured layout showing items, prices, and delivery clearly
- Delivery method options are easy to switch between, supporting flexibility
- Summary section with subtotal, promotion, and total is simple and readable
- Persistent bottom bar with total and “Next” button keeps checkout flow clear
- “Save for Later” and “Wishlist” buttons offer useful alternatives without cluttering the checkout path
AI Evaluation
Strengths
Clear Item Breakdown with Quantity Control
Each product is listed with pricing, quantity adjusters, and visual feedback — supporting quick edits.
Flexible Delivery Options
Users can easily toggle between Home Delivery and Click & Collect, improving convenience and control.
Well-Structured Cost Summary
Subtotal, promotions, and final price are separated cleanly, avoiding confusion during checkout.
Bottom Navigation CTA (“Next” Button)
Total amount and call-to-action are fixed at the bottom, aligning with mobile e-commerce best practices.
Address Management Screen
Delivery Options screen includes a clear default address and the ability to add or change easily, improving flow and flexibility.
Areas of Improvement
1. Visual Feedback for Delivery Option Selection
The selection of delivery types could benefit from clearer visual states (e.g., a selected card shadow or color change).
Improvement: Add state styling or animation to clearly show which delivery option is selected.
2. “Applicable Vouchers” Banner Styling
The purple banner may compete visually with the "Next" CTA and bottom nav bar.
Improvement: Reduce visual weight or reposition to avoid overwhelming the checkout button area.
3. No Loading/Confirmation Feedback
Tapping “Next” doesn’t suggest whether the action is processing or confirmed.
Improvement: Add a loading animation or screen transition feedback for clarity during the checkout flow (planned for Task 2).
Argument
1. Delivery Option Selection Feedback
I agree this can be improved. In future iterations, I’ll add stronger visual cues or microanimations to make the selected delivery method more obvious.
2. Voucher Banner Styling
I partially agree — while the banner stands out to grab attention, I will reduce its opacity of colour slightly so that it doesn’t compete with the checkout CTA. However, visual size will remain since it was designed based on previous feedbacks on increasing the size.
3. Loading Feedback
I agree this is missing and plan to address it in Task 2, where animation and transition feedback will be implemented.
Redesign
In the updated cart page, I changed the “Applicable Vouchers” banner from a bold purple to a softer pink. This adjustment was made to improve the overall visual balance of the screen. While the purple banner was effective at drawing attention, it competed with the “Next” checkout button and disrupted the visual hierarchy. The new pink version still highlights the voucher feature but does so in a way that is more harmonious with the rest of the interface, allowing the total amount and call-to-action to remain the focal point. This improves clarity and supports a smoother checkout experience.
%20(1).png)
Improvement for Cart Page
6. Checkout
Checkout Page
Self-Reflection
- Logical layout with clear grouping of address, items, points, and payment sections improves readability and flow
- Delivery address is editable and clearly shown, with expected delivery dates visible upfront
- Points redemption and voucher banners are integrated without interrupting the main purchase journey
- Multiple payment methods offer flexibility and accommodate user preferences
- Persistent bottom bar shows total and a clear “Checkout” or “Continue” CTA, maintaining consistency from the cart page
AI Evaluation
Strengths
Clear Hierarchical Structure
Checkout elements are organized into intuitive sections: delivery info, items, promotions, payment, and summary — reducing friction and improving scanability.
Editable Delivery Information
The delivery section includes address details with an “Edit” option, enhancing transparency and user control.
Diverse Payment Options
Users can choose from a variety of payment types including credit card, online banking, and e-wallets — boosting accessibility and conversion.
Integrated Points and Vouchers
Points redemption and applicable vouchers are shown in context, providing users with opportunities to save without breaking the flow.
Persistent Bottom CTA
The fixed bottom bar maintains visibility of total amount and primary action, following mobile UI best practices.
Areas of Improvement
1. Visual Emphasis on Payment Selection
The selected payment method lacks clear visual distinction.
Improvement: Add styling such as a background highlight or animation to indicate the active selection more clearly.
2. Voucher Banner Visual Hierarchy
The bright purple “Applicable Vouchers” bar may compete visually with the bottom CTA.
Improvement: Reduce its visual weight or reposition it to avoid drawing attention away from the checkout button.
3. Lack of Feedback on Action
Tapping “Continue” or “Checkout” provides no visual confirmation or loading state.
Improvement: Add a loading animation or transition to give users clear feedback that the process is underway (planned for Task 2).
Argument
1. Payment Selection Feedback
I agree — the selected option should be more visually distinct. I’ll enhance it with stronger visual cues or microanimations.
2. Voucher Banner Styling
I agree, will change to the same design as the cart page.
3. Loading Feedback
I have the loading feedback through transition animations during processing after the submission of payment already, so this part is not necessary.
Redesign
In the updated checkout page, I changed the “Applicable Vouchers” banner from a bold purple to a softer pink, same as the adjustment made for the cart page. As for the payment method, I added the background colour to show visibility of selected payment method.
Improvement for Checkout Page: banner
Improvement for Checkout Page: selected payment method
7. Order Confirmation
Order Confirmation
Self Reflection
- Order ID, Payment ID, and total are clearly presented before input, giving users trust and context
- Clean form layout with standard fields for card payment supports ease of use and data entry
- Branding with VISA/Mastercard icons adds credibility and helps reassure users
- Submit button is placed clearly at the end of the form, completing a natural input flow
- Loading screen confirms transaction processing, helping manage user expectations
AI Evaluation
Strengths
Clear Transaction Overview
Key information like Order ID, Payment ID, and amount are shown upfront, creating trust and clarity before user proceeds.
Standardized Payment Fields
The payment form follows expected conventions — Cardholder Name, Card Number, Expiry, and CVV — reducing friction and cognitive load.
Minimal, Focused Design
Form design is visually clean with no distractions. The “Submit” button is well-positioned and recognizable.
Recognizable Payment Logos
VISA and Mastercard icons reinforce legitimacy and help users quickly understand acceptable card types.
Loading Feedback Provided
A full-screen loading animation ensures users are informed that the transaction is in progress, preventing confusion or duplicate submissions.
Areas of Improvement
1. No Back Confirmation on Exit
Tapping the back button during payment could accidentally exit the process without warning.
Improvement: Add a confirmation prompt (e.g., “Are you sure you want to leave? Your payment is not complete.”) to prevent accidental exits during a critical step.
2. Submit Button Hierarchy
The “Submit” button is clear but visually understated relative to its importance.
Improvement: Use a bolder visual treatment (e.g., color contrast, shadow) to emphasize it as a primary action.
3. Generic Loading Message
The loading screen simply states “Please wait while transaction is in progress…” which may feel vague or impersonal.
Improvement: Use a more reassuring or branded message (e.g., “Hang tight! We’re confirming your order...”) to enhance the user experience during wait times.
Argument
1. Back Confirmation on Exit
I agree this is a critical usability issue. Accidental exits during payment can lead to user frustration or abandoned transactions. I plan to implement a confirmation prompt in the next iteration to protect the user’s progress.
2. Submit Button Hierarchy
I disagree with this point. The current button styling is intentionally minimal to maintain a clean and distraction-free layout. It aligns with the overall design language and provides enough contrast to stand out without overwhelming the interface.
3. Generic Loading Message
I agree with this point. The current message is functional but lacks a personal or engaging tone. Updating it to something more friendly and on-brand would help reduce user anxiety during wait time and improve the overall experience.
Redesign
In the updated payment gateway screen, a confirmation prompt was added when users attempt to leave during the payment process. The message “Are you sure you want to leave? Your payment is not complete.” appears, offering two clear options: Leave Anyway and Stay and Continue. This helps protect user progress and reduces the risk of accidental exits.
Improvement for Confirmation Page: confirmation prompt
The loading screen message was updated from the generic “Please wait…” to a more engaging and humanized message: “Hang tight! We’re confirming your order...” This small change helps reassure users that their transaction is being processed smoothly.
.png)
Improvement for Loading Screen
Presentation Video:
Link here
FEEDBACK
WEEK 1
General Feedback
- complete 1-2 screen analysis
- submit blog by Sunday
Specific Feedback
- -
WEEK 2
public holiday
WEEK 3
General Feedback
- focus on main points and info for the airplane ticket
- can book consultation through teams
WEEK 4
General Feedback
- task flow chart— arrows from specific buttons or part instead of the edges of a page
Specific Feedback
- showed home page: its fine to not follow the AI’s suggestion, sometimes they might not be great in evaluating based on what it sees, sometimes it’d make sense
- if have reasonable reason, its possible to not change anything of initial design
- showed product page free gift section: Mr Razif agreed that the initial design was overpowering
- he also think that the redesign is good that it’s not “screaming” like the initial one, the redesign feels eye catching yet not too sharp
REFLECTION
Experience
This task pushed me to look beyond surface-level visuals and think critically about how design decisions affect usability and user flow. Revisiting my earlier screens helped me see how much my design understanding has grown, especially in applying structure, hierarchy, and consistency.
Observations
Through this task, I observed how small interface elements — such as button contrast, text weight, or layout spacing — can significantly impact clarity and user confidence. I also noticed the importance of content prioritisation and how effective grouping supports faster decision-making in shopping apps.
Findings
The findings reveal that while my initial designs were visually aligned with branding, they lacked some interaction cues and call-to-action clarity. Subtle refinements like improving section headings, adjusting voucher styling, and refining visual hierarchy led to a more intuitive and consistent experience. This task reinforced the value of user-centered design and iterative feedback in creating purposeful, usable interfaces.
QUICK LINKS
Comments
Post a Comment