Task 1: App Design 1 Self-Evaluation and Reflection

21/4/2024 - 12/5/2024 / Week 1 - Week 4
Tee Jia Ern / 0348512
Application Design 2 / Bachelor of Design in Creative Media
Task 1: App Design 1 Self-Evaluation and Reflection

---

LECTURES

Week 2

Exercise

Fig 1.1: AirAsia Boarding Pass 

Fig 1.2: AirAsia Boarding Pass Redesigned

We were tasked with redesigning AirAsia boarding pass. Our lecturer gave his feedback for us to understand the user journey of the flight so that it helps with sorting the information in order of accessing the information. It is also helpful to list out all the available information to arrange it in order of usage. I asked ChatGPT to arrange the information based on a flight user journey. 

Based on the typical flight user journey (what the passenger needs and when) and importance during the travel experience, I would rank your boarding pass elements in this order:

1. Flight Date

First, the passenger must check the date to make sure they are traveling on the correct day.

2. Flight No.

They need the flight number to find their correct flight on departure screens and for boarding.

3. Gate

After checking flight info, the gate tells them where to go in the airport.

4. Gate Closes

Important to know the deadline to be at the gate, to avoid missing the flight.

5. Seat No.

Once on board, the seat number tells them where to sit.

6. Booking No.

Useful mainly at check-in; not so critical after that for the boarding pass itself.

7. Seq No. (Sequence Number)

Used by airlines for boarding order or operational purposes; passengers usually don't need it much.

8. SSR (Special Service Request)

Information about special services (e.g., wheelchair assistance, special meals), important but only for those who requested it.

I rearranged the information according to the user journey. 

Fig 1.2: AirAsia Boarding Pass Individual Redesign

Week 3

Our task is to create a wire flow. Our team chose the topic of booking a room in Taylor's. Here is the Miro board of the wire flow. Feedback we got from the lecture is the diamond shape has yes and no branching out of the decision. If statements are also diamond shaped because it is related to decision. 

---

INSTRUCTIONS

Instruction

Students are required to perform a self-evaluation and reflection based on their mobile application design 1 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. 

We are tasked with a self reflection on the app we designed in Application Design I along with old and new comparisons. 

Lotus's Design Before

The image below is the mockup of Lotus's mobile application redesigned. The app is created as an easy to use online grocery shopping app based on the existing app. It contains main features such as searching, browsing, add to cart and tracking groceries that are bought. It also contained additional wildcard features as required for the previous project like meal planner and grocery list. 

Fig 1.3: Lotus's Mobile Application Redesigned

Link to Lotus's Mobile Application Redesigned File:

https://www.figma.com/design/5VLrQDvHQVDo7HLeg1e7Vv/Lotus's-App-Redesign-2?node-id=0-1&t=ObUf9LhoE1hQaN1N-1

Link to Lotus's Mobile Application Redesigned Prototype:

https://www.figma.com/proto/5VLrQDvHQVDo7HLeg1e7Vv/Lotus-s-App-Redesign-2?node-id=0-1&p=f&t=ObUf9LhoE1hQaN1N-0&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=2055%3A1756&show-proto-sidebar=1

1. Onboarding Page

Fig 1.4: Onboarding Page Before

Fig 1.5: Onboarding Page After

Fig 1.6: Onboarding Page After Lecturer's Feedback

ChatGPT Feedback

Strengths

1. Strong Visual Hierarchy: The layout has consistency on each screen: illustration > heading > body text.
2. Engaging Illustrations: The illustrations are relevant, colorful, and add character. They visually explain the concept of each screen, improving cognitive understanding.
3. Consistent Layout: A consistent user journey is supported by the three screens' consistent placement and spacing. Learnability is strengthened by repeating elements (dots, text alignment, etc.).
4. Final CTA is Clear: The "Shop now" button is prominently displayed, visually distinct, and well-placed. Nice use of color contrast between button and background.

Areas of Improvement

1. Progress Indicator: The dots are quite small and low-contrast.
2. Spacing Between Elements: In some screens (e.g., Onboard 2), the illustration and text feel slightly too close vertically.
3. Call-to-Action (CTA) Consistency: Only Onboard 3 has a CTA button (“Shop now”), while the first two screens do not.
4. Text Alignment & Sizing: Body text may be slightly dense in certain spots (especially Onboard 3).

Solution

1. Progress Indicator: Enlarge the dots slightly and use higher contrast colors (e.g., brand teal for active, soft gray for inactive).
2. Spacing Between Elements: Add a bit more vertical spacing between illustration and text blocks to improve visual breathing room and scannability.
3. Call-to-Action (CTA) Consistency: 
   Option 1: Add “Next” or “Skip” buttons to the first two screens for navigation control.
   Option 2: Display the CTA throughout all screens and enable it only at the last screen.
4. Text Alignment & Sizing

   Slightly increase line height for better readability.

   Consider breaking long paragraphs into two lines max for faster skimming.

My Feedback

Points That I Agree:

Strengths

1. Strong Visual Hierarchy: The design principle of hierarchy is utilized to organize the content in the order of Illustration>Headings>Body Text. Another principle which is alignment is unified, all elements and center aligned, so the user will have a smooth reading process. 

2. Engaging Illustrations: The inclusion of illustration provides a more memorable experience for users compared to texts. 

3. Consistent Layout: Repetition is a design principle that is consistently reusing visual elements thus ensuring the user has a easy time navigating the app. 

4. Final CTA is Clear: For CTAs an accent colour like a brand colour can drag attention for users to click on the button. The text is readable and the padding is sufficient for the text to have more negative space. 

Areas of Improvement

1. Progress Indicator: I could use colour and adjust the size to make the progress indicator more visible. 

2. Spacing Between Elements: I wanted to show there is a connection between the text and the illustration by putting them close together. So my initial thinking was more different than the ai. 

3. Call-to-Action (CTA) Consistency: I decide to have a consistent call to action button by adding a circle next button on the right. 

Points That I Disagree:

Areas of Improvement

4. Text Alignment & Sizing: Inter, which is the font family chosen for this application texts, is already designed with a tall x-height to help readability so I think the font is good as it is. I think reducing the amount of text might not be a good way to convey the services provided in the app, so I would choose for a long paragraph than a two line paragraph. 

Lecturer's Feedback

The arrow can be placed in the center because the design drags attention to the center. The progress indicator bar can be placed below the arrow button. The text can move upwards to have more spacing around the elements. 

2. Login Page

Fig 2.1: Login Page Before

Fig 2.2: Login Page After

Fig 2.3: Login Page After Lecturer's Feedback

ChatGPT Feedback

Strengths

1. Clear Visual Hierarchy: The brand logo, form fields, and CTA ("Login") are placed in a logical, top-down sequence.
2. Minimal Distraction: The design is focused, with only essential elements present—ideal for a login flow.
3. Accessible Input Fields: Placeholder texts (“Mobile Number”, “Password”) are clear and use standard patterns that users are familiar with.
4. Consistent Alignment and Styling: Everything is center-aligned, contributing to a clean and balanced layout.

Areas of Improvement

1. Hierarchy of text elements: “New customer? Sign up here.” and “Forgot Password?” are very similar in size and style. One is proactive (signup), the other reactive (forgot password). Use size, weight, or color contrast to differentiate their importance.
2. Spacing: Spacing between the form fields and the “Login” button could be slightly increased to avoid visual crowding.
   Bottom spacing for "Forgot Password?" might need more breathing room on devices with gesture bars (on newer iPhones, for instance).
   Add more padding inside the input fields to prevent text from touching the edges.
3. Visual Clarity: 
   Field borders could be more visually distinct (slightly darker or with subtle shadows) to better separate form areas, especially for users with vision impairments.
   Consider input labels above fields (instead of placeholders only). Placeholders disappear once users start typing, which can be disorienting.
4. Consistency: Text link styles (“Sign up here” vs “Forgot Password?”) could be made more uniform: Right now, one is colored and one is not. Either both should be links (blue and underlined) or styled in a consistent way.
5. Accessibility: Placeholder text (“Mobile Number”, “Password”) may not meet contrast standards. Consider adding visible labels or making placeholders darker.

Solution

1. Hierarchy of text elements & Consistency: Either differentiate or uniform “Sign up here” vs “Forgot Password?” with text styles.
2. Spacing: Increase spacing between the form fields, login button and forgot password. Add padding in input fields.
3. Visual Clarity & Accessibility: Add input labels above fields and make the filed borders and placeholders darker.

My Feedback

Points That I Agree:

Strengths

1. Clear Visual Hierarchy: Some elements of visual hierarchy include scale and contrast, which can be translated into the text size and font weight. The logo has a big text size and thick font weight, the input fields and buttons have similar font size, while the text description is smaller than the other two elements. The clickable link is in accent colour attracting attention to click on it. 

2. Minimal Distraction: The design only consists of the elements required in login pages such as input fields, linked text for sign up and forgot password and the brand logo to reinforce the brand. 

3. Accessible Input Fields: Placeholder texts (“Mobile Number”, “Password”) are clear. Visual hierarchy contrast is used via font colour is gray for users to understand it is a input field compared to the plain text. 

4. Consistent Alignment and Styling: All elements are center aligned for consistency for an easier time reading through the information.

 

Areas of Improvement

1. Hierarchy of text elements & Consistency: I agree that I should be consistent with the text styling of clickable text, since the forgot password is the same style as plain text it might not be recognized as a clickable link. 

2. Spacing: I learned that white space is an important aspect in UI design. I should consider increasing empty spaces between elements and add padding to buttons. 

3. Visual Clarity & Accessibility: Details about log in screen such as labels above text fields is a good touch to aid the login experience. The placeholder fields can be darker for accessibility. 

Points That I Disagree:

Areas of Improvement

1. Hierarchy of text elements & Consistency: I don't think I need to differentiate the styling of sign up and forgot password because I want the design to be minimalistic and simple, so I'll unify both of the text styling. 

3. Visual Clarity & Accessibility: I disagree with darkening the placeholder text. The placeholder text is typically gray to avoid being mistaken as body text. The gray I chose is visible and light enough to differentiate between body text. 

Lecturer's Feedback

Add more spacing throughout the design to increase readability and reduce clutter. 

3. Home 

Fig 3.1: Home Before

Fig 3.2: Home After

Fig 3.3: Home After Lecturer's Feedback

Fig 3.3: Home After Lecturer's Feedback 2

ChatGPT Feedback

Strengths

1. Search is highly visible: Good placement at the top — easy to find.
2. Banners provide deals immediately: Good marketing placement without being overwhelming.
3. Clear categorization: Having icons for different categories ("Best Sellers", "Bulk Deal", etc.) makes exploration easy.
4. Consistent iconography: Icons are simple and consistent in style, which helps usability.
5. Bottom navigation bar: Home, Member, Cart, and Profile are clearly accessible and separated.
6. “View All” links: Users can explore more if they are interested, giving freedom without overwhelming the homepage.

Areas of Improvement

1. Hierarchy: The 5 carousels and banners visually compete with each other. No clear primary focus.
2. Spacing: Very tight vertical and horizontal spacing between: Banners, Icons, Product cards
3. Visual Clarity: Banner ads are colorful and detailed → competing visually with the main content.
   Category icons and product lists are the same visual weight.
4. Consistency: Some sections like Weekly Highlight and Health & Beauty Fair use slightly different layouts (number of product cards per line, card size, etc.).
5. Accessibility: Some text (e.g., product prices, points information) may have low contrast against the white background.

Solution

1. Hierarchy: Create a stronger hierarchy by differentiating important sections (e.g., larger title for Weekly Highlight, slightly muted smaller banners).
   Use larger section headers ("Weekly Highlight", "Health & Beauty Fair", etc.) to guide scanning.
2. Spacing: Add more white space between major blocks (e.g., 16-24px padding).
   It will feel less cramped and users can better focus on one section at a time.
3. Visual Clarity: Use lighter backgrounds for icons or give them slightly softer shadows to separate them from product areas. 
4. Consistency: Standardize the product card layout (padding, image size, font size) across all carousels.
   Keeps the rhythm and makes it feel more polished.
5. Accessibility: Check contrast ratio (aim for at least 4.5:1 for normal text).
   Ensure text is readable even in outdoor light or for visually impaired users.

My Feedback

Points I agree with: 

Strengths 

1. Search is highly visible: Reading patterns describes that the eye scans the top first, which is where the search bar is located. 
2. Banners provide deals immediately: Banners in a carousel allows the company to promote their deals. 
3. Clear categorization: Having icons along with text makes it visually appealing while communicating the function to the user.
4. Consistent iconography: Consistency enhances usability and makes it simpler for users to complete their tasks. 
5. Bottom navigation bar: The icons are clear and label text informs the function of the button. 
6. “View All” links: Streamlines the app page design and reduces clutter.

Areas of Improvement

1. Hierarchy: The header could be bigger to differentiate from the other body texts.

2. Spacing: I should add more spacing between the categories. White space is something I keep seeing the ChatGPT mentioned so I'll keep it in mind.  

3. Visual Clarity: I'll add some divider, change the background colour or add shadow to separate from the product carousel. 

Points I disagree with: 

Areas of Improvement

1. Hierarchy: The banner doesn't need to mute the colours because it is supposed to be eye catching to the viewer. 

4. Consistency: Product section is consistent with similar card size, text styling and number of product cards per line. No changes are needed. 

5. Accessibility: The normal text is in black colour, the linked text are slightly darker than the brand colour to increase visibility. 

Additional Information from ChatGPT

Prioritize and Separate Sections More Clearly: Move banners into a horizontal carousel (like how Shopee or Lazada does it).

Reduce "Icon Clutter": Add light background cards behind each icon (rounded corners) to visually group them nicely.

Use a Card Layout for Products: Instead of just listing the products, put each product inside a card (with a slight shadow or a soft background color).

Improve Visual Spacing: Increase vertical padding between sections: at least 24px. Don't be afraid of empty space — it makes things feel lighter and easier on the eyes.

Lecturer's Feedback

Make sure the margin of the grocery list button, icons and weekly highlight product card are aligned. The light background colour behind the icons are a nice touch to group the elements into categories and make it more organized. 

4. Search Bar 

Fig 4.1: Search Page Before

Fig 4.2: Search Page After

ChatGPT Feedback

Strengths

1. Simple and Clean Layout: The screen is not overloaded — this keeps cognitive load low, which is excellent for search functionality.
2. Immediate Focus on Search: The keyboard is active by default, focusing user attention immediately on typing their search — good usability practice.
3. Consistent Navigation: The back arrow in the top left corner is intuitive and consistent with common app navigation.
4. Clear Search Field: The search bar is styled well — clear, with an icon and placeholder text that sets the right expectations.

Areas of Improvement

1. Hierarchy (Text Size): The product results (e.g., "NARTUREL SUNFLOWER OIL 2KG") are very small and lack visual emphasis.
   They look almost the same as the placeholder text and background, making it hard to scan quickly.
2. Spacing: The results are crowded vertically; each product line is sitting too close together.
3. Visual Clarity (Icons): The tiny arrow icons on the right feel disconnected and too small.
4. Consistency (Font Style): The placeholder ("Search in Lotus's") font looks slightly lighter or smaller compared to the result text.
5. Accessibility: Text contrast could be an issue, especially the light placeholder text vs the white background.
6. Empty State (When Nothing is Typed): Right now, when the user hasn’t typed anything, it’s just blank.

Solution

1. Hierarchy (Text Size): Make search result text bigger (at least 16–18pt) and bold important keywords ("OIL 2KG" for example).
2. Spacing: Add more vertical padding (at least 12–16px) between each result to breathe better.
3. Visual Clarity (Icons): Use larger arrow icons, aligned properly to the center of each row. Alternatively, you can show a chevron (>) or right arrow inside a circle to make the interaction feel clearer (i.e., tapping will proceed to next page).
4. Consistency (Font Style): Maintain consistent font family and weight across all text elements for professionalism.
5. Accessibility: Ensure at least a 4.5:1 contrast ratio for text per WCAG standards.
   The tap targets for search results and back buttons must be at least 44x44px to be easily tappable.
6. Empty State (When Nothing is Typed): Add a simple "Suggested Searches," "Recent Searches," or "Popular Products" section in the empty state to make the experience more engaging and helpful.

My Feedback

Points I agree with: 

Strengths 

1. Simple and Clean Layout: There is a search bar and back button aligned at the top which keeps it simple. 

2. Immediate Focus on Search: The keyboard appearing makes typing intuitive to the user. 

3. Consistent Navigation: The back arrow is in the top left is intuitive because it is similar to most common app navigation. 

4. Clear Search Field: The styling of the search bar is well with an icon and placeholder text which inform it's functionality. 

Areas of Improvement

1. Hierarchy (Text  Sie): I make the search result text bigger (16–18pt).

2. Spacing: I added more vertical padding (at least 12–16px) between the search results. 

3. Visual Clarity (Icons): I increase the size of the arrow and align it to the center. 

Points I disagree with: 

Areas of Improvement

1. Hierarchy (Text Size): I don't want to bold keywords of search results ("OIL 2KG" for example), it will distract from the title of the brand. 

3. Visual Clarity (Icons): I want to avoid using icons in circle shapes and instead use icons for less clutter due to the amount of search results present

5. Search Feed 

Fig 5.1: Search Feed Before

Fig 5.2: Search Feed After

Fig 5.3: Search Feed After Lecturer's Feedback

ChatGPT Feedback

Strengths

1. Clear product layout: The 2-column grid makes it easy for users to scan multiple products quickly.
2. Consistent card design: Each product card looks the same — same padding, image size, and text alignment — which builds trust and predictability.
3. Simple and clean top bar: Search input, filter buttons, and cart icon are neatly placed. No clutter.
4. Actionable CTA icon (cart): The cart icon under each product is a good touch — encourages immediate action without too many taps.

Areas of Improvement

1. Hierarchy: Price vs Product Name: Currently, product names and prices are visually similar in weight. Users have to work harder to separate the information.
2. Spacing:
   a) Tight margins: The spacing between cards and the screen edge feels a little too tight.
   b) Space between product image and name: The text is too close to the product image.
3. Visual Clarity:
   a) Filter Buttons (“Best Match”, “All Categories”): They look functional, but visually small and light.
   b) Cart Icon Size: It feels a little small compared to the size of the product cards.
4. Consistency: Back arrow icon: In this screen, the back arrow is quite large compared to the search bar.

Solution

1. Hierarchy: Make the price slightly bolder or a different color (e.g., darker or highlight color). Reduce the font size of product names slightly if needed.
2. Spacing: Add at least 8-12px padding around the grid for breathing room. Increase vertical padding between the product image and the text block.
3. Visual Clarity: 
   a) Filter Buttons: Increase padding inside the buttons.
   Add a subtle outline or background fill to make them stand out.
   Consider using pill-style buttons (rounded edges) for a more modern look.
   b) Cart Icon Size: Slightly increase the cart icon size for easier tapping.
4. Consistency: Normalize icon sizing (back arrow, cart, etc.) to feel unified.
5. Accessibility: The text (“RM24.95” and product names) should have at least 4.5:1 contrast with the white background. If it’s light gray, it might need darkening.

My Feedback

Points I agree with: 

Strengths 

1. Clear product layout: There is only a two column grid to scroll for products which makes it easy to navigate. 

2. Consistent card design: Each product card has the same design elements such as padding, image size and text alignment. 

3. Simple and clean top bar: The search field, filter and view cart are arranged to the standard UI design, making it intuitive to the user. 

4. Actionable CTA icon (cart): The inclusion of the add to cart button below the products allows for users to add products to cart with only one click. 

Areas of Improvement

1. Hierarchy: I'll bold the price so the visual hierarchy is clearer. 

2. Spacing: I'll add at least 8-12px padding around the grid. I also agree that the vertical padding between the product image should be increased. 

3. Visual Clarity: 
a) Filter Buttons: For the buttons increase the padding for additional white space. I never considered pill size buttons as a actual design component, I'll implement it. 
b) Cart Icon Size: Scale is part of visual hierarchy, I want to increase the size of the add to cart button so the button stands out against the text. 

Points I disagree with: 

1. Hierarchy: I don't want to change the text colour because the original app has the price as red and I want to explore whether there are other ways of executing the product UI. Product name doesn't need to reduce the size for readability. 

3. Visual Clarity: The filter buttons already have an outline thus a background fill in not necessary. 

4. Consistency: The cart icon will include the price of the purchases in cart so the cart icon has to be smaller than the search and back icon. 

5. Accessibility: The body text is mostly black, as for the gray text in promotions I ensure it reaches the 4.5:1 colour contrast requirement. 

Additional Information from ChatGPT

• Use a card shadow or slight border to make cards pop.
• Highlight promotions (if any) on the product card with a small badge ("Sale", "Best Seller")
• Top Filters Layout
  Problem: The "Best Match" and "All Categories" filters are not visually grouped.
  Solution: Place the filters on a horizontal scrollable bar with clear chip-style buttons. Add a slight background behind filters to group them visually (e.g., light gray or very subtle background).

Additional Notes

I made the spacing consistent in the grid. I also changed the drop shadows around the product card to be neater. 

Lecturer's Feedback

Make the drop shadows thinner. Add some spacing to the text box and align them. 

6. Product Description 

Fig 6.1: Product Description Before

Fig 6.2: Product Description After

ChatGPT Feedback

Strengths

1. Simple and Clean Layout: It's minimalistic — keeps user focus on the product.
2. Clear Call-to-Action (CTA): "Add to Cart" button is prominent and easy to find.
3. Visual Hierarchy: The image, product title, and price are arranged logically from top to bottom.
4. Accessibility Considerations: Button sizes look tappable for mobile, and important actions are not cramped.

Areas of Improvement

1. Hierarchy: The price feels a bit "lost" in the layout. It should stand out more (e.g., bolder font, slightly bigger size) because it's critical information.
   Right now, the "points" reward card (yellow box) draws more attention than the price. You might want the reward info to be less prominent than price and title.
2. Spacing: The "Brand" and "Category" tags are a little cramped against the product title.
   The bottom "Add to Cart" button is close to the description text, making it feel a bit squeezed.
3. Visual Clarity: The "X" icon for close and the cart icon should have consistent visual weight — currently, the cart icon is heavier because it has a badge + teal color, while the "X" is just a line.
4. Consistency: In the second screen, the price "RM24.95" is merged into the top-right corner cart button. In the first screen, it's placed normally under the brand/category tags. This inconsistency may confuse users if the screen suddenly changes behavior.
5. Accessibility: Ensure the font color for "Brand" and "Category" tags have sufficient contrast with the background. The "View More" text may not meet the minimum contrast ratio.

Solution

1. Hierarchy: Increase the price font size and boldness, and/or reduce the visual weight of the "points" box.
2. Spacing: Add more vertical spacing between sections for better breathing room. (E.g., more padding between brand/category tags and price, more margin above "Add to Cart".)
3. Visual Clarity: Make the "X" icon slightly bolder or adjust it so it visually balances with the cart icon.
4. Consistency: Keep the placement of price consistent on all product detail screens.
5. Accessibility: Test your color combinations with a contrast checker and aim for at least 4.5:1 for small text.

My Feedback

Points I Agree With:
Strengths
1. Simple and Clean Layout: I only show the necessary elements such as product image, name, brand, category, price, quantity controls, reward info, and description, nothing extra or distracting.
2. Clear Call-to-Action (CTA): The CTA has accent colour and placed at the bottom of the screen which as typically the CTA is placed at the end of the information which is intuitive to the user.
3. Visual Hierarchy: I arranged the elements like image, product title and price in order of importance of information. 
4. Accessibility Considerations: The button size are well adjusted and actions are clear and not cluttered. 

Areas of Improvement
1. Hierarchy: I increased the price font size and bold to reduce the visual weight of the "points" box.
2. Spacing: I went ahead to increase more padding between brand/category tags, more margin above "Add to Cart" for more white space to improve readability. 

Points I Disagree With:

Areas of Improvement
3. Visual Clarity: ChatGPT mentioned the teal cart button and x icon only being lines doesn't have consistent visual weight. The x icon and cart icon are different because I decided to include the total pricing after adding products in cart which makes the cart button have 2 rows of icon and text. Thus the x and cart icon will be different size. 
4. Consistency: I want to include the total price in the cart button, the smaller cart design choice is intentional. 
5. Accessibility: The lecturer mentioned the coloured text is fine even if it is not meeting the colour contrast checker as long as it's visible. 

Additional Information from ChatGPT
Group Related Information Together: Visually group the brand and category tags closer to the product title — maybe even in a badge row style under the title.

7. Cart

Fig 7.1: Cart Before

Fig 7.2: Cart After

Fig 7.3: Cart After Lecturer's Feedback

ChatGPT Feedback

Strengths
1. Clear Sectioning: The cart is well-organized into:

• Delivery address

• Delivery time

• Product list

• Order total

• Checkout button

2. Recognizable Icons: Location and truck icons add helpful visual cues for address and delivery method.
3. Readable Font and CTA Button:
"Check Out" button is clearly distinguishable and meets minimum tap size standards.
The reward/points information is easy to spot, adding value to the cart experience.
4. Consistent Bottom Navigation: Matches other screens and ensures seamless navigation.

Areas of Improvement

1. Visual Hierarchy: The primary action ("Check Out") is visually isolated and could use more prominence.
2. Spacing: The spacing between elements is tight in some places.
3. Interactive Cues: Some tappable elements (like “Choose time” and the address area) lack visual feedback.
4. Cart Item Design: The quantity selector feels detached and a bit small.

Solution
1. Visual Hierarchy: Consider placing the Order Total and Checkout button together in a fixed bottom card or sticky footer for better conversion.
2. Spacing: Add more space between:

• Delivery section and product list
• Product list and "Back to shopping"
• “Order Total” and the loyalty points card

3. Interactive Cues: 

• Add a subtle background color or border on tap
• Include arrow icons for all interactive rows for consistency (e.g. “Choose time” row)

4. Cart Item Design: 

• Make it visually closer to the product or styled with a rounded background to group it better.
• Consider +/- buttons for easier quantity updates.

My Feedback

Points I agree with: 

Strengths

1. Clear Sectioning: White space and gray dividers are used to sort information. Visual hierarchy is present in text like the title weight being bold. 

2. Recognizable Icons: Icon image like location and truck provides visual, creating easier and more appealing navigation. 

3. Readable Font and CTA Button: "Check Out" button is distinct with accent colour of the brand, attracting attention via visual hierarchy colour.

The reward/points information is simple with a light background and readable text, providing information about points to the user. 

4. Consistent Bottom Navigation: Consistency in app layout increases learnability and easier navigation. 

Areas of Improvement

1. Visual Hierarchy: Arranging the Order Total and Checkout button together in a fixed bottom card puts two of the most important information together. 

2. Spacing: Adding space enhances readability and keeps the interface from looking cluttered.

4. Consistent Bottom Navigation: In all screens call to action button is at the bottom while the other text information is at the top, ensuring consistency throughout the app. 

Points I disagree with:

3. Interactive Cues: There is no space for "Choose time" to add arrow, instead I changed the colour of the text to the brand colour which is associated with linked text. 

Lecturer's Feedback

Use elements that have been applied to the design for a more cohesive look. User feels more intuitive to have information on the left and CTA button on the right. 

8. Checkout

Fig 8.1: Checkout Before

Fig 8.2: Checkout After

Fig 8.2: Checkout After Lecturer's Feedback

ChatGPT Feedback

Strengths

1. Clear Information Hierarchy:

   • The screen separates “Cart” and “Checkout” visually and functionally. This helps users understand what step they’re at in the process.

   • Important actions like "Place Order" and total cost are placed at the bottom for visibility and easy access.

2. Logical Flow: The flow from delivery address → delivery time → items → checkout options is consistent with common user expectations.

3. Use of Icons: The icons (location pin, truck) help users quickly identify sections, improving scannability.

4. Toggle for Points: Offering a toggle for reward points is a user-friendly touch that simplifies interaction.

Areas of Improvement

1. Spacing

Issue: There's a lack of adequate vertical spacing between elements in the Checkout area. This can make the content feel crowded and difficult to scan.

Fix: Add more vertical padding between “Payment Method,” “Coupons and Vouchers,” and “Use my Lotus’s Points” sections to clearly separate them.

2. Visual Clarity of Interactive Elements
Issue: The "Select" text on "Coupons and Vouchers" isn’t clearly interactive (e.g., doesn’t look like a button or link).
Fix: Use a chevron > or underline/text color differentiation to indicate interactivity, or use a card-style layout with full-row tapability.

3. Consistency in Typography
Issue: The font weights and sizes for section headers ("Checkout", "Payment Method", etc.) are not visually distinct enough from the content below them.
Fix: Use bolder text or larger font for section titles to establish stronger hierarchy.

4. Total Cost Alignment & Emphasis
Issue: "$13.97" is right-aligned and slightly understated considering its importance.
Fix: Increase font weight/size and ensure alignment is consistent with the rest of the form fields, or use a background highlight to make it more prominent.

My Feedback

Points I agree with:

Strengths

1. Clear Information Hierarchy: The design separates “Cart” and “Checkout” conveying the purpose of the screen which is checkout. CTA button and price are licated at the bottom of the screen after information. 
2. Logical Flow: Delivery address, delivery time, items, checkout is sorted in an intuitive way.
3. Use of Icons: The icons (location pin, truck) helps users visually locating the function. 
4. Toggle for Points: Giving the user flexibility on whether they want to use points during checkout. 

Areas of Improvement
4. Total Cost Alignment & Emphasis: I also increase the size of the the price to bring attention to a important factor while grocery shopping. 

Points I disagree with:

Areas of Improvement

1. Spacing: I want the payment tab to only take up half the screen. And I think there is enough vertical space in between the texts. 
2. Visual Clarity of Interactive Elements: The "Select" text on "Coupons and Vouchers" already has a chevron next to it showing that it is an accessible button. 

Lecturer's Feedback

In terms of whether the price should stay cohesive to the rest of the text or become a bigger number, the lecturer suggest choosing a bigger font because the price is an important information of he process of checking out. The arrow next to the price can be removed because the x button serves the same purpose. 

9. Profile 

Fig 9.1: Profile Before

Fig 9.2: Profile After

Fig 9.3: Profile After Lecturer's Feedback

ChatGPT Feedback

Strengths: 

1. Simple and Clear Structure: Sections (Orders, Account, Support) are easy to understand at a glance — no confusion.
2. Good Icon Usage: Icons for payment, delivery, FAQ, etc., help users quickly identify functions.
3. Logical Grouping: "My Account" and "Support" are clearly separated with a grey divider — nice touch for cognitive grouping.
4. Primary Info Placement: Edit profile at the top makes sense since it's the user's personal area.

Area of Improvement

1. Visual Hierarchy: "Edit My Profile" looks a bit small and lightweight compared to its importance.
    "All Orders" block (Ongoing vs Previous): The icons are good, but the "Ongoing" and "Previous" text looks a little small and low-weight.
2. Button vs Link Differentiation: The "1300131313" and "lotusshelpline@lotuss.com.my" look like links, but they blend into the regular text because of low visual weight.
3. Spacing: The "Support" section feels slightly tight vertically compared to the "My Account" section.
4. Interactive Indicators: For "Call Center" and "Email Us", it’s unclear if they’re clickable
5. Color Consistency: The bright cyan color used for "Edit My Profile", link texts, and the cart badge in other screens should be the same exact shade everywhere.

Solution

1. Visual Hierarchy: "Edit My Profile" increase its font size slightly or bold it so users notice it immediately.
   "All Orders" block (Ongoing vs Previous) Bump up the font size a little for "Ongoing" and "Previous", or add a bolder font to improve scanability.
2. Button vs Link Differentiation: Underline them or add an icon for call and email next to them. Users expect a more "actionable" visual for links. 
   Also make sure their contrast ratio is high enough for accessibility.
3. Spacing: Increase the vertical padding between Support items (FAQs, Call Center, Email Us) slightly for better breathing space.
4. Interactive Indicators: Add a small arrow ">" next to them like you have for FAQs, to indicate they are tappable.
5. Color Consistency: Ensure the hex code is consistent (small differences can make the app feel unpolished).

My Feedback

Points I agree with: 

Strengths

1. Simple and Clear Structure: The text's visual hierarchy like size and weight is utilized to bring attention to the section title first like Orders, Account, Support.
2. Good Icon Usage: Icons are more appealing and informs the user about the function of the button. 
3. Logical Grouping: A gray divider separates the information into groups of information which is easier for users to scan. 
4. Primary Info Placement: Profile is at the top which is intuitive to most profile page design. 

Area of Improvement

2. Button vs Link Differentiation: Underline the links so it is clear if it's clickable. 
3. Spacing: Increase the vertical padding between Support items (FAQs, Call Center, Email Us) slightly for better breathing space.
4. Interactive Indicators: Add a small arrow ">" next to the items to show that the button is clickable. 
5. Color Consistency: The colour of the linked text is consistent with the brand colour. 

Points I disagree with: 

1. Visual Hierarchy: "Edit My Profile" increasing the size or bold the text will take away attention from the name which should be more prominent than edit profile. 

I want to stay consistent with "Ongoing" and "Previous" along with the items under "My Account" and "Support". 

Lecturer's Feedback

The card styling on the profile is better because the white background and green linked text of the edit profile is cohesive with telephone number and email. The arrows can be removed because it is not an in app action, the phone number immediately goes to the call app, the email also pops up external apps. 

10. Order Tracking

Fig 10.1: Order Tracking Before

Fig 10.4: Order Tracking 2 After Lecturer's Feedback

ChatGPT Feedback

Strengths

1. Clear Tab Navigation: The “Ongoing” and “Previous” tabs are clearly labeled and easy to switch between. The active tab has a visual indicator (underline), which helps users understand context.

2. Minimalist Design: The layout is simple and avoids clutter, which is good for cognitive ease. It's clear this screen is focused on tracking current orders.

3. Visual Hierarchy for Product Info: Using bold text for the product name and lighter styling for the price gives a reasonable reading structure.

Areas of Improvement

1. Empty Space Feels Unbalanced

Issue: There’s a lot of unused gray space under the order item, making the layout feel unfinished or empty. 

Fix:

• Adding status info (e.g., "Packed", "On the way", "Estimated delivery time").
• Including an order ID, expected delivery date, or delivery progress bar.
• If it’s just one item, center it vertically for better visual balance.

2. Spacing

Issue: The product image, name, and quantity field are a bit tightly packed. Improving the spacing adds clarity, makes it easier to scan and reduces visual tension.

Fix: Group related content (image + name + price) with slightly tighter spacing, and separate unrelated content (e.g., tabs vs. order list) with more white space.

3. Quantity Field Design

Issue: The quantity field feels out of place in an order tracking context. Since the user can’t change the quantity at this stage:

Fix:

• Replace it with plain text like “Qty: 1”
• Or gray it out / make it non-interactive to indicate it's not editable.

4. Missing Contextual Feedback

Issue: Users typically expect status indicators when checking an ongoing order. For example:

Fix: Add something like 

• “Preparing for shipment”
• “Dispatched at 12:45PM”
• Progress bar or timeline

This improves user confidence and trust in the process.

5. Visual Design Consistency

Issue: The gray horizontal divider between the tab bar and order card is quite thick compared to the rest of the UI. 

Fix: Reduce its height or use a more subtle color

My Feedback

Points I agree with:

Strengths

1. Clear Tab Navigation: The active tab has an underline and brand colour which is clear which section the user is using. 

2. Minimalist Design: Include only those components that are clearly useful or advance the user's objectives. Eliminating visual clutter by removing any unnecessary borders, textures, shadows, or icons.

3. Visual Hierarchy for Product Info: I changed the text weight of the title rather than the price to show emphasis on the product the user is attracting. 

Areas of Improvement

1. Empty Space Feels Unbalanced: I added a status information like "Preparing for Shipment". I also decided to include expected delivery date. The delivery progress bar is on a new page after clicking on the status information. 

3. Quantity Field Design: I changed the design from a box to text only so that the user knows it is not a interactable button. 

4. Missing Contextual Feedback: I added “Preparing for shipment” as the status indicator. I also included “Dispatched at 12:45PM” and progress bar in the expanded tab. 

5. Visual Design Consistency: I reduced the height of the gray divider to be more consistent with the rest of the ui. 

Points I disagree with:

Areas of Improvement

1. Empty Space Feels Unbalanced: Centering the product on the tracking order may feel out of place and clashes with the product description page which might confuse the user. 

2. Spacing: I want the related content (image + name + price) to have more space to increase readability. There is a gray divider so the order list is separated visually from the tabs, there is no need to add more white space. 

Lecturer's Feedback

Instead of making a new page, reveal the information at the bottom of the linked text. 

Final Submission

Figma Prototype

Click here for the Figma file. 

Fig 11.1 Figma Screens

Click here for the presentation slides in Canva.

Video Presentation

---

FEEDBACK

Week 2

General Feedback: The linked text can follow the brand colour without darkening it and it won't impact readability. 

Specific Feedback: 

Onboarding page: The arrow can be placed in the center because the design drags attention to the center. The progress indicator bar can be placed below the arrow button. The text can move upwards to have more spacing around the elements. 

Login page: Add more spacing throughout the design to increase readability and reduce clutter. 

Home: Make sure the margin of the grocery list button, icons and weekly highlight product card are aligned. 

Search Feed: Make the drop shadows thinner. Add some spacing to the text box and align them. 

Week 3

Specific Feedback: 

Home: The light background colour behind the icons are a nice touch to group the elements into categories and make it more organized. 

Search Feed: The shadows only need just enough to make a clear separation. 

Cart: Use elements that have been applied to the design for a more cohesive look. User feels more intuitive to have information on the left and CTA button on the right. 

Checkout: In terms of whether the price should stay cohesive to the rest of the text or become a bigger number, the lecturer suggest choosing a bigger font because the price is an important information of he process of checking out. The arrow can be removed because the x button serves the same purpose. 

Profile: The card styling on the profile is better because the white background and green linked text of the edit profile is cohesive with telephone number and email. The arrows can be removed because it is not an in app action, the phone number immediately goes to the call app, the email also pops up external apps. 

Track Order: Instead of making a new page, reveal the information at the bottom of the linked text. 

---

REFLECTION

Experience: I learned to incorporate ai to get feedback analysis on my UI/UX mockup. Surprisingly ChatGPT is really good at identifying design elements on the screen. Sometimes it gives me an idea I never considered before. Though the Mr Razif's feedback has different considerations than ChatGPT. ChatGPT is really useful to use to get additional feedback though consultations provides something more that the ai doesn't have. 

Observations: In my first design of the application I was spending a lot of time on the designing aspects and didn't go through different versions of what it could be. This assignment is like a redemption to create a design that is more effective in communicating to the user about the functions of the app through various UI design elements. I tried different versions to see what works and what doesn't. 

Findings: I am lacking in judgment skills of designing an interface. With the help of ChatGPT and the Mr Razif's feedback I learned about various considerations of a UI/UX designer. I never considered using ChatGPT and this assignment shed light about a way to access feedback without someone. But I still think ai doesn't give the same feedback as a experienced designer would.