APP 2

 


📱 App Design 1 – Self Evaluation & Reflection

✦ Week 1 Tutorial: Level Up Past Design with AI Feedback

🧩 1. Project Overview

This project is a food delivery order tracking interface, designed to help users monitor their order progress from confirmation to delivery.

The main feature of this screen is a timeline-based status tracker, which visually represents different stages such as:

  • Confirmed
  • Handling
  • On the way
  • Delivered

The goal of the design is to provide clear, real-time feedback about the order status and ensure users feel informed and in control.

🔍 2. AI Feedback Analysis (Senior UI/UX Perspective)

After uploading my design to AI and assigning it the role of a Senior UI/UX Designer, I received structured feedback based on four key areas:

🎯 2.1 Visual Hierarchy

What works well:

  • The timeline layout effectively communicates a step-by-step process
  • Icons and colors help differentiate each stage
  • Information is structured logically from top to bottom

What can be improved:

  • The current order status is not clearly emphasized
  • All steps look visually similar, making it hard to identify priority
  • Important information (e.g. total payment) lacks visual emphasis

👉 This relates to the Visual Hierarchy principle, where elements should guide user attention through size, color, and contrast

♿ 2.2 Accessibility

What works well:

  • Icons support understanding of different states
  • Layout is relatively clean and readable

What can be improved:

  • Low color contrast (light blue, light green)
  • Small text size reduces readability
  • Potentially small tap targets for interaction

👉 This violates Contrast and Readability principles, which are essential for accessibility

🎨 2.3 Modern Aesthetics

What works well:

  • Card-based product layout feels structured
  • Use of icons creates a friendly interface

What can be improved:

  • Overall UI feels slightly outdated
  • Lack of depth (no shadows or layering)
  • Inconsistent color usage reduces visual harmony

👉 Missing application of Depth, Consistency, and Color Harmony principles

🚨 2.4 One Big Fix (Most Important Improvement)

The most critical issue identified is:

👉 The design does not clearly highlight the current order status

This creates a usability problem because:

  • Users cannot quickly understand where they are in the process
  • It increases cognitive load
  • It slows down decision-making

A professional solution would include:

  • Highlighting the current step using stronger contrast
  • Enlarging or emphasizing the active status
  • Reducing emphasis on completed or upcoming steps

🧠 3. Deep Dive: Understanding Visual Hierarchy

One key feedback I wanted to understand deeper was the issue of unclear visual hierarchy.

Visual hierarchy is a fundamental UI principle that helps guide the user's attention by prioritizing elements based on importance. Designers achieve this using:

  • Size
  • Color
  • Contrast
  • Position

In my design, all order steps are visually equal, which means users must interpret information manually instead of being guided visually.

According to UI/UX principles, when all elements share similar visual weight, it increases cognitive load, making the interface less intuitive

A professional designer would improve this by:

  • Making the current step visually dominant
  • Using color contrast to guide attention
  • Creating a clear distinction between active and inactive states

This also relates to Hick’s Law, where reducing complexity improves decision-making speed.

🔁 4. Reflection & Comparison

💡 Did the AI catch something my lecturer missed?

Yes. The AI highlighted issues with visual hierarchy and user focus, which I did not consider deeply before. Previously, I focused more on completing the layout rather than guiding user attention.

💡 Do I agree with the AI?

Yes, I agree with the feedback. After reviewing my design, I realized that:

  • All elements appear equally important
  • The current status is not immediately visible
  • Users need to spend extra effort to understand the interface

💡 What will I improve?

Based on this reflection, I will improve my design by:

  • Emphasizing the current order status
  • Improving color contrast for better readability
  • Creating a consistent color system
  • Increasing spacing and visual hierarchy
  • Adding depth (e.g., shadows) to enhance modern UI feel

🚀 5. Proposed Design Improvements

To elevate this design to a more professional level, I would:

1. Highlight Current Status

  • Use a stronger color (e.g., primary brand color)
  • Add animation (pulse or progress indicator)

2. Improve Visual Hierarchy

  • Increase font size for key information
  • Use bold text for important elements
  • Reduce emphasis on less important details

3. Enhance Accessibility

  • Increase contrast between text and background
  • Ensure readable font sizes
  • Improve spacing for touch interactions

4. Apply Modern UI Principles

  • Add subtle shadows for depth
  • Use a consistent color palette
  • Improve alignment and spacing system

⭐ 6. Design Evaluation Summary

Clarity: ★★★☆☆
Consistency: ★★★☆☆
Layout & Structure: ★★★★☆
Accessibility: ★★☆☆☆
Usability: ★★★☆☆

Comments

Post a Comment

Popular posts from this blog

Interactive Design Exercise 1

Image
Exercise 1 Week 1 Website Analysis For this exercise, I have selected five websites to review and analyze. The focus is on examining their design, layout, content, and functionality, while identifying strengths and weaknesses that influence the overall user experience (UX). Each analysis highlights the site’s purpose, main color palette, visual presentation, and interactive features, followed by an evaluation of how effectively the website communicates with its intended audience. Finally, recommendations are provided to suggest potential improvements for usability, performance, and brand impact. 1. https://www.juice.agency 2. https://culinaryodissey.uprock.pro 3. https://joseph-san.com 4. https://atom.uprock.pro 5. https://xlncdigital.com 1.   Website: juice.agency  （https://www.csswinner.com/winners） Purpose and Goals Juice is a creative branding and digital agency. Its main goal is to showcase its capabilities in branding, web design, and marketing, while also attracting po...
Read more

Spatial 2 assignment 1

Image
Here are the project what we shuld do. 🧠 Assignment Overview: You are required to conduct a precedent study and analysis of two retail stores: One international (overseas) store – researched online. One physical store – that you can visit in person. This assignment is individual and counts for 20% of your final grade. 🎯 Objective: To apply design processes critically and creatively by analyzing real-world retail environments. You will propose innovative, context-specific solutions that improve spatial quality, customer experience, and brand identity. 📌 Analysis Areas to Cover: Store Overview Name, location, and type (e.g., fashion, electronics, lifestyle) Brief brand history or background Design Features Layout: Floor plan sketch; how the layout guides flow and interaction Materials: What materials are used and their functional/aesthetic effect Lighting: How lighting contributes to mood and experience Color Scheme: How color supports brand identity and ambiance Brand Identity How...
Read more

Spatial design 2 FINAL

Image
Starbacks Name:HE KEHUA Student ID:0379395 This is my spatial design. This is my sketch at the beginning. This is my initial modeling. The teacher asked me to modify it. Put the order area at the door. Add a little designed locker to the empty area. After the teacher gave feedback, I revised and improved the content. Light In the last class, the teacher continued to give me some feedback, asking me to continue to make changes on my existing basis, slightly increase the children's area, the bad material of the floor of the service area, and install a window at the gate, and put two small mats under my two apple core cabinets. Here are the final project i made
Read more