Application Design 2 - Task 01: Application Design 1 Self Evaluation and Reflection
APPLICATION DESIGN 2 DST 61004
WEEK 01 - Week 04 (24.04.2025 - 15.05.2025)
NAME: Chin Tze Wei
I.D: 0357423
COURSE: Application Design 2 / Bachelor of Design (Honors) in Creative Media
GROUP: Class 01 Sec 01
Application Design 2 - Task 01: Application Design 1 Self Evaluation and Reflection
1. LECTURES AND CLASS ACTIVITY
WEEK 01 - 24/04/2025
In the first week, Mr. Razif gave us a thorough introduction to the course
Application Design 2. He began by outlining the key phases of the design
process, highlighting best practices and essential factors for developing
effective applications. After this, he guided us to revisit and enhance the
Figma prototypes we created in Application Design 1, motivating us to improve
the user experience and visual design aspects.
Moreover, Mr. Razif introduced us to his custom GPT-powered tool known as UX
Lab Assistant. This innovative plugin is intended to aid our design workflow
by assessing our app prototypes and providing detailed, constructive feedback
to help us pinpoint areas that need improvement. To prepare for the next
stages of development, we also completed the registration for FlutterFlow,
which will be our main platform for creating and implementing our projects in
the future.
WEEK 02 - 01/05/2025 (Public Holiday)
This week is Public Holiday, there is no class today.
WEEK 03 - 08/05/2025
Improve the organization and information of the boarding pass
WEEK 04 - 15/05/2025
This week, our task involved examining the user journey for purchasing
products or booking services through an app. Our team concentrated on creating
a wireflow for a Hospital Appointment Booking App, detailing each step a user
takes to schedule an appointment. Throughout the process, we paid close
attention to the placement of the back and forward buttons to ensure users
could navigate the app easily. After we completed our wireflow, Mr. Razif
assessed our work and commended the overall design. He suggested improving the
directional arrows to clarify which buttons lead to the next screens, thereby
guiding users more intuitively.
Final Wireframe
Click
HERE
to access to our group final wireflow in Figma.
2. INSTRUCTIONS
Module Information Booklet
Module Information Booklet (MIB)
3. TASK 01: APP DESIGN 1 SELF EVALUATE AND REFLECTION
3.1 Self - Reflection and Evaluation
To-Do List
- Get analysis feddback from ChatGPT, outlining all the advantages and disadvantages of my app's MVP features. (Compare Old vs New)
- Identify any issues or shortcommings in previous applicaion (User Interface problems, ineffective user navigation, inadequate feeddback mechanisms, etc.)
- Write down the iteration
- Outline the steps taken to enhance your application’s design. Include any feedback you gathered and how it influenced your modifications.
- Demonstrate your grasp of usability and design principles by referencing a UX law or heuristic.
Before we start with our task, Mr Razif shared a link and introduced a tool
called UX Lab Assistant, which is an AI that can reviews screen designs and
gives feedback. I then give it a try and it pointed out problems.
📌 Recap of Application Design 1: Click
HERE
The Chosen Flow and MVP Feature:
Scenario 3: Checkout a product
Imagine you are planning to checkout the product from your cart. Now click on
the Cart button and then choose the product you're gonna checkout. After that,
it will navigate to th checkout progress.
3.1.1 Analysis from ChatGPT
The following attatchment was the overall feedback given by ChatGPT.
Compilation of design feedback given by ChatGPT
Click
HERE to access to the document in Google Docs.
ChatGPT Quick Design Score
Figure 3.0 Design Snapshot Score
Total score: 19/25
Summary of feedback from ChatGPT:
You’ve done a great job! The app feels clean, well-structured, and follows solid design principles. The navigation is simple and intuitive, making it easy for users to explore and shop. With a few thoughtful improvements like increasing tap area sizes, refining color contrast, and adding small animations or feedback states, your app will feel even smoother, more accessible, and polished at a professional standard. Well done — you’re on the right track!
You’ve done a great job! The app feels clean, well-structured, and follows solid design principles. The navigation is simple and intuitive, making it easy for users to explore and shop. With a few thoughtful improvements like increasing tap area sizes, refining color contrast, and adding small animations or feedback states, your app will feel even smoother, more accessible, and polished at a professional standard. Well done — you’re on the right track!
3.1.2 Argument and Self-Reflection
📌 Argument:
The refinement of the Padini mobile app was driven by core UI/UX principles
aimed at improving usability, clarity, and user satisfaction. A consistent
design system was implemented across all screens, with cohesive use of
typeface, color palette, and button styles to strengthen visual hierarchy and
brand identity. The onboarding and log-in flows were refined to reduce
friction, with simplified forms and larger touch areas aligned with Fitts’
Law. Key changes in the product listing and search pages focused on enhancing
scanability, using improved spacing, better contrast, and clearer typographic
emphasis for item names and prices. Additionally, micro-interactions and
visual cues were planned for cart updates and checkout steps, offering better
system feedback in line with Nielsen’s usability heuristics. These design
decisions collectively aim to streamline the shopping experience while
maintaining a clean and accessible interface.
📌 Self-Reflection:
Through this refinement feedback process, I learned the importance of
balancing aesthetic quality with usability. Initially, some design choices
looked visually appealing but lacked practical clarity — such as low-contrast
text or dense button placements. By applying feedback and revisiting
accessibility guidelines and interaction principles, I was able to adjust the
design to be more user-friendly, especially for mobile screen sizes. The
result is a smoother, more coherent experience from onboarding to payment. I
also recognized the value of consistent component behavior and spacing systems
in reducing user cognitive load. Moving forward, I see opportunities to
further enhance interactivity with subtle animations and more dynamic feedback
states. This reflection highlights how iterative design, grounded in usability
theory, leads to a more thoughtful and effective user interface.
3.1.3 Old and New Design
(a) Onboarding Page
Figure 3.1 Comparison between old design and new design - Onboarding
Page
Changes made after Feedback by ChatGPT
-
Imagery and Style
The old version used neutral, soft branding with minimal personality, but the new version used a high-fashion lifestyle images with stronger personality. -
Copy / Text
The old version don't have clear message or engaging copy, but the new one have strong messaging: "Look Good, Feel Good", "Your Style, Your Way". -
Call-to-Action (CTA)
In old version, there are no CTA or vague interaction. But in new version, I have added CTAs button to make users have more interaction with the app, there are clear CTAs such as "Next", "Start" with button styling. -
Progress Indicator
There are missing progress indicator in the old version, but have a dot-based progress indicator in the new version. -
Visual Hierarchy
Previously, there was lacked of strong contrast or sepration. In the new version, text, image, and button have better alignment and spacing. -
Logo Page
There is static page with repeated logo in old version. But now I have changed to isolated at the end of the onboarding page (branding splash) before entering to the main page.
Why These Changes Were Made
- To provide clear messaging that aligns with user expectations and lifestyle values.
- To create a more engaging onboarding journey through a step-by-step visual flow.
- To build a stronger brand presence with consistent and styled imagery.
- To improve orientation and guidance for new users with visible progress and CTAs.
- To reduce interaction friction by guiding the user through a simplified and intuitive experience.
Effects of the Changes
- Better First Impressions: Bold visuals and clear copy quickly communicate the app’s fashion focus.
- Improved Usability: CTA buttons and progress indicators reduce user hesitation and make the experience smoother.
- Enhanced Hierarchy: Clear separation between text, imagery, and interaction helps users focus on one thing at a time.
- Brand Identity Strengthened: Visual and verbal design elements now align with the brand's tone and fashion audience.
(b) Log In and Sign Up Page
Figure 3.2 Comparison between old design and new design - Log in
and Sign Up Page
Changes made after Feedback by ChatGPT
-
Colour Scheme
The old version used a dark pink background and have a lower contrast. The new version used a light gradient background (creamm to blush) for better visibility. -
Form Filed Design
The old design filled white fields with less spacing and smaller size. The new version have a larger input fields with better padding and visibility. -
Button Styling
In old version, there are flat or dark-filled buttons. But in new version, I have rounded and raised buttons with shadows for depth. -
Terms Agreement
There is low hierarchy placement in the old version, but I have added prominent checkbox and bolded terms for clarity in the new design. -
Login Feedback State
Previously, there was absent of login feedback state. In the new version, it shows filled input example state (email/password) -
Third-Party Login
The third-party login are positioned lower with extra options. But in the new version, they streamlined with Google and Facebook icons only. -
Typography and Layout
There is tighter spacing and centered layout in the old version, but I have improved line height, breathing room, better alignment. -
Visual Hierarchy
Previously, there clulttered text blocks in the old version. In the new version, there is clear top-down hierarchy from branding to CTA.
Why These Changes Were Made
- The new light background improves contrast and makes text easier to read.
- Form fields are now larger, making them easier to tap and fill in.
- The layout follows a clear order, helping users focus and understand each step.
- Buttons like “Login” and “Sign Up” now stand out more and feel easier to use.
- The updated design looks cleaner and more modern, making the app feel more trustworthy.
Effects of the Changes
- Higher Clarity & Confidence: Users are less likely to make input errors thanks to better text legibility and clearer layouts.
- Faster Interaction: Reduced form friction helps users complete login/signup steps more efficiently.
- Increased Trust & Visual Appeal: Cleaner typography, softer color palette, and structured layout enhance perceived professionalism.
- Improved Accessibility: Larger touch targets, better contrast, and clear field labels accommodate a broader range of users.
(c) Home Page
Figure 3.3 Comparison between old design and new design - Home
Page
Changes made after Feedback by ChatGPT
-
Background and Colour Scheme
The old version used a dark rose/pink background with black navigation bar. The new version's design used a clean, soft cream/pink gradient background, more open feel. -
Navigation Bar
The old design used a black icons on dark background. The new version used a lighter background, improved icon visibility. -
Header Section
In old version, all-caps sale banner with minimal hieraarchy. But in new version, I have used stronger hierarchy with large banner, CTA separation. -
Category Display
There is centered carousel dots and denser layout in the old version, but more breathing spcae and clearer icon labels in the new version. -
Icon Style and Clarity
Previously, there was absent of login feedback state. In the new version, it shows filled input example state (email/password) -
Overall Tone
The third-party login are positioned lower with extra options. But in the new version, they streamlined with Google and Facebook icons only.
Why These Changes Were Made
- The lighter background makes text easier to read and reduces eye strain.
- Important elements like banners and buttons are now easier to see and understand.
- More space and simpler buttons help users focus better.
- The new design looks more stylish and matches the Padini brand.
Effects of the Changes
- Improved First Impressions: The home page now feels modern, welcoming, and more brand-appropriate.
- Stronger Visual Balance: Color contrast and spacing give each section room to breathe, reducing visual clutter.
- Easier Navigation: Clearer icons and labels at the bottom support faster recognition of available features.
- Enhanced Call-to-Action Clarity: The "Shop Now" button stands out more, guiding the user toward action.
(d) Product Listing Page
Figure 3.4 Comparison between old design and new design - Product
Listing Page
Changes made after Feedback by ChatGPT
-
Background Colour
Changed from grey-blue to a soft cream tone for a warmer and cleaner feel. -
Navigation Bar Style
Old version used dark background with circular icons; new version uses a cleaner white background, removing visual heaviness. -
Product Card Design
Product cards now have more padding and a subtle elevation effect for better separation. -
Typography and Labeling
Fonts are slightly larger with better spacing, improving readability of product names and prices. -
Visual Balance
Filter tabs and item grids now have more breathing space between them, making scanning easier.
Why These Changes Were Made
- To make the interface feel lighter and more modern.
- To improve readability and focus on key elements like product name and price.
- To enhance visual hierarchy and reduce clutter.
- To support better navigation clarity through simplified bottom nav icons.
- To align with the cleaner style used across the rest of the app.
Effects of the Changes
- Easier to browse products with clear layout and spacing.
- More visually appealing and brand-consistent design.
- Higher readability of text due to better contrast and typography.
- Better user focus on product cards thanks to reduced distractions.
(e) Product Page
Figure 3.5 Comparison between old design and new design - Product
Page
Changes made after Feedback by ChatGPT
-
Image Display and Interaction
- Old version used multiple full-screen image frames.
- New version introduces a main image with selectable thumbnails that users can tap to switch views. -
Component Efficiency
The new design replaces 3-4 full product image sceens with a single image-switching component, reducing page length. -
Visual Layout
The new layout is more compact and vertical space is optimized. The image area is focused and clean, with interaction elements below. -
Hierarchy and Focus
Important buying options (color, size, quantity) are visually prioritized under the image, enhancing purchase focus.
Why These Changes Were Made
- To reduce screen clutter and make the page more compact and scannable.
- To improve interaction efficiency using tap-to-switch instead of long scrolling.
- To enhance user control and engagement by letting users choose which product angle to see.
- To create reusable, flexible components in Figma, making future edits easier.
Effects of the Changes
- Faster Navigation: Users can view multiple product images without scrolling down the entire page.
- More Control: Users interact directly with thumbnails, improving focus and engagement.
- Shorter Screen Flow: Designers and developers can manage fewer frames while maintaining the same content.
- Improved Mobile UX: The tap-to-view model fits better with mobile interaction patterns.
(f) Information Page
Figure 3.6 Comparison between old design and new design - Information
Page
Changes made after Feedback by ChatGPT
-
Size Guide
- Old version included cart controls at the bottom (Add to Cart Button).
- New version introduces a cleaned layout with focus on fit data and size recommendation. -
Model Size
In the old version, the cart controls visible, layout slightly cluttered. But I removed cart controls for a more focused, visual-first layout. -
Details
- Old version included cart controls at bottom, limited white space.
- New version have more breathing room, simplified content with cleaner hierarchy.
Why These Changes Were Made
- To separate product information from purchasing action, reducing cognitive load.
- To prioritize content clarity, especially when users are comparing fit details.
- To make the pages feel more calm, clean, and informative, aligned with best practice UX writing and layout.
- To improve visual focus on measurement, model fit, and care instructions.
Effects of the Changes
- Users now focus better on fit and sizing information without distraction from action buttons.
- The layout is cleaner, with more space around text and visuals.
- Pages feel more trustworthy and professional, especially for users checking product fit before buying.
- Users can now scan and compare more easily due to reduced visual clutter.
(g) Voucher Page
Figure 3.7 Comparison between old design and new design - Voucher
Page
Changes made after Feedback by ChatGPT
-
Size Guide
- Old version included cart controls at the bottom (Add to Cart Button).
- New version introduces a cleaned layout with focus on fit data and size recommendation. -
Model Size
In the old version, the cart controls visible, layout slightly cluttered. But I removed cart controls for a more focused, visual-first layout. -
Details
- Old version included cart controls at bottom, limited white space.
- New version have more breathing room, simplified content with cleaner hierarchy.
Why These Changes Were Made
- To separate product information from purchasing action, reducing cognitive load.
- To prioritize content clarity, especially when users are comparing fit details.
- To make the pages feel more calm, clean, and informative, aligned with best practice UX writing and layout.
- To improve visual focus on measurement, model fit, and care instructions.
Effects of the Changes
- Users now focus better on fit and sizing information without distraction from action buttons.
- The layout is cleaner, with more space around text and visuals.
- Pages feel more trustworthy and professional, especially for users checking product fit before buying.
- Users can now scan and compare more easily due to reduced visual clutter.
(h) Search and Filter Page
Figure 3.8 Comparison between old design and new design - Search and
Filter Page
Changes made after Feedback by ChatGPT
-
Visual Style
- Old version used darker beige tone with heavier font and compact layout.
- New version introduces a soft gradient background, more open and modern feel. -
Search Field
- Old version used plain bar with minimal interaction feedback.
- New version enlarged input field with clearer placeholder text. -
Popular Search
- Old version used static list with muted pill tags.
- New version have dynamic-looking tags with light shadow and more spacing. -
Result Display
- There are not shown in old design.
- New version includes live results as the user types. -
Filters UI
- Old version included functional dropdowns with flat styling.
- New version have same categories, but lighter design and modern dropdowns. -
Bottom Navigation
- Old version included black background and bold icons.
- New version used a soft-tone navigation bar consistent style.
Why These Changes Were Made
- To make the search experience feel lighter and more modern.
- To improve visual clarity and breathing room for better usability.
- To enable real-time feedback when searching, improving user control.
- To make filters feel less intimidating and more scannable.
- To align the screen with the overall updated visual language of the app.
Effects of the Changes
- The new search UI feels more approachable and clean.
- Popular search tags are easier to scan and tap due to improved spacing.
- Displaying search results while typing gives users faster access to what they want.
- The filters section is more aesthetically consistent with the rest of the app.
- Overall flow is more intuitive and user-friendly.
(i) Cart Page
Figure 3.9 Comparison between old design and new design - Cart
Page
Changes made after Feedback by ChatGPT
-
Background Colour
- Old version used muted beige with low contrast.
- New version introduces a soft gradient background for a fresher, lighter feel. -
Typography Style
- Old version used Serif-style, heavier "My Cart" title.
- New version used a clean, modern sans-serif font used throughout. -
Total Section Label
- Old version have the label shown as just "Total".
- New version changed to "Total Payment" (more user-friendly). -
Spacing and Layout
- Old version shown a denser layout with tighter margins.
- New version improved spacing and cleaner visual structure. -
Visual Hierarchy
- Old version included flat layout with minimal contrast.
- New version have a clear sectioning, more visual weight on action button.
Why These Changes Were Made
- To improve visual clarity and readability using a lighter background and modern font.
- To enhance user understanding by clarifying key labels (e.g., “Total Payment”).
- To simplify the interface and improve alignment for better focus on task.
- To make the design more consistent with the overall refined style of the app.
Effects of the Changes
- Easier for users to review their cart and understand the total cost.
- The layout feels cleaner and more modern, matching the updated UI direction.
- Improved spacing and visual balance enhance usability on smaller screens.
- The Checkout button is more prominent, guiding users smoothly to the next step.
(j) Checkout Page and Payment Page
Figure 3.10 Comparison between old design and new design - Checkout
Page
Figure 3.11 Comparison between old design and new design - Payment Page
Changes made after Feedback by ChatGPT
-
Shipping Information Position
- Old version shown at the bottom.
- New version shown at the top for better visibility. -
Payment Methods Display
- Old version was compact, center-focused layout.
- New version was expended, clean radio list for easier selection. -
Voucher Feature
- There are no voucher feature in old version.
- New version added "Apply Voucher" area to enhance user options. -
Order Summary Layout
- Total only shown at bottom in Old Version.
- New version have full breakdown: item subtotal, service fee, shipping, discount. -
Visual Hierarchy
- Old version have a mixed focus (payment first).
- New version have a logical sequence: address → product → cost → payment. -
UI Styling
- Old version used darker background and denser layout.
- New version have a lighter clean aesthetic consistent with rest of app.
Why These Changes Were Made
- To follow logical user mental models — shipping info should be seen first.
- To give full payment clarity with a clear breakdown of costs.
- To offer more flexibility and value by adding voucher redemption.
- To improve readability and layout hierarchy, especially on mobile.
- To create a more modern, professional interface.
Effects of the Changes
- The checkout flow now feels clearer and more trustworthy, with visible cost details.
- Adding a voucher feature gives users a sense of control and reward, boosting satisfaction.
- A cleaner interface and proper sequence reduce user confusion or hesitation.
- Payment method selection is now faster and more intuitive with separated choices.
(k) Confirmation Page
Figure 3.12 Comparison between old design and new design -
Confirmation Page
Changes made after Feedback by ChatGPT
- Added a confirmation page after the payment.
- Displays a large success icon, a summary message, and the order number.
- Includes a clear CTA button: "Continue Shopping".
Why This Page Was Added
- To provide closure and assurance after the user completes a purchase.
- To follow Nielsen’s Usability Heuristic #1 – Visibility of System Status, confirming that the action was successful.
- To reduce uncertainty by showing an order number and follow-up message.
- To guide the user’s next step (Continue Shopping) with a soft re-entry into the browsing experience.
- To enhance brand trust and leave a positive emotional impression at the end of the journey.
Effects of Adding This Page
- Reassures users their purchase was successful and reduces anxiety.
- Strengthens the sense of completion and builds brand reliability.
- Offers a graceful exit or continuation point instead of abruptly ending the process.
- The clean layout and visual hierarchy make the content easy to scan and understand.
3.1.4 Finalise Design (Figma)
Refined Figma File
Click HERE to access to my refined prototype in Figma
After finnish the refination, I have asked ChatGPT about my new design.
.png)
Figure 3.13 Design Snapshot Score (After refinment)
Total score: 21/25
Summary of feedback from ChatGPT:
You’ve done a great job creating a clean, cohesive, and user-centered mobile experience. The design now shows strong visual consistency, with clear typography, aligned elements, and a calm color palette. Key interactions like login, checkout, and product browsing are more intuitive and simplified. You've also improved accessibility by increasing tap target sizes and clarifying button states. The enhanced search and filter logic makes product discovery easier, while thoughtful additions like the confirmation page and voucher section build trust and improve the overall shopping journey.
You’ve done a great job creating a clean, cohesive, and user-centered mobile experience. The design now shows strong visual consistency, with clear typography, aligned elements, and a calm color palette. Key interactions like login, checkout, and product browsing are more intuitive and simplified. You've also improved accessibility by increasing tap target sizes and clarifying button states. The enhanced search and filter logic makes product discovery easier, while thoughtful additions like the confirmation page and voucher section build trust and improve the overall shopping journey.
My Refinement Conclusion:
Through this refinement, the Padini app prototype has become more user-friendly, visually consistent, and aligned with key UX principles. Each screen now supports a smoother shopping experience with clearer layouts, stronger interaction flow, and thoughtful design choices. These improvements not only enhance usability and accessibility but also strengthen the brand’s overall professionalism and trustworthiness.
Through this refinement, the Padini app prototype has become more user-friendly, visually consistent, and aligned with key UX principles. Each screen now supports a smoother shopping experience with clearer layouts, stronger interaction flow, and thoughtful design choices. These improvements not only enhance usability and accessibility but also strengthen the brand’s overall professionalism and trustworthiness.
3.2 Presentation Video
4. FEEDBACK
There were no feedback given.
5. REFLECTION
During the process of improving this app, I learned a lot about how design affects how people use and feel about the app. I focused on making the screens easier to understand, nicer to look at, and smoother to use. I learned that even small changes , like better spacing, clearer buttons, or adding a confirmation message, it can really help users feel more comfortable. Adding new features like the image switch, voucher section, and confirmation page made the app more useful and complete. It was not always easy, but this task helped me get better at thinking from the user’s point of view. I’m happy with how much the design has improved and proud of the progress I’ve made.
