Application Design 2

 Week 1

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: ★★★☆☆

                                                                              Week 2

Part 1: Task Definition

My Core Task:
Book 2 movie tickets, select seats, and complete payment for a movie showing tonight.

---

Part 2: The 4-Level UX Audit

1. Functional (Utility)

The app allows users to browse movies, choose cinemas, select showtimes, and book tickets. Overall, it supports the core task. However, some information such as seat availability and pricing is not immediately clear during the early stages of booking, which can slow down decision-making.

---

2. Reliable (Performance)

The app generally works, but there are occasional delays when switching between cinema locations and showtimes. The loading time increases during peak hours, and the payment page sometimes takes longer to respond, which may create uncertainty for users.

---

3. Usable (Ease of Use)

The navigation is slightly confusing, especially when selecting cinema locations and filtering showtimes. The booking process involves multiple steps across different screens, which feels unnecessarily long. Some buttons are small and not suitable for one-handed use, and important actions are not always visually prominent.

---

4. Pleasurable (Delight)

The interface design is clean and modern, but lacks engaging elements such as smooth animations or interactive feedback. There is minimal guidance during the booking process, which makes the experience feel less intuitive and slightly stressful for first-time users.

---

Part 3: Friction Identification

The Primary Friction Point:
The booking process is too long and fragmented across multiple screens, making it confusing and inefficient for users to complete their task quickly.

---

Part 4: The “Friction Fix” Wireframe

 

---

Explanation:

My redesign combines cinema selection, showtime selection, and seat selection into a single screen. This reduces the number of steps and eliminates the need to navigate back and forth between pages. By simplifying the process and improving layout clarity, users can complete their booking faster and with less confusion.

---

Part 5: Peer Review (Lightning Showcase)

Feedback from my partner:
My partner suggested making the seat selection area larger and highlighting the selected seats more clearly to improve visibility and usability.

                                                                                  Week 3

Today teacher told us the assignment requires us to transform your previous static UI design into a more functional and interactive app concept. You need to choose one core user task from your earlier work that involves real data interaction, then design how it behaves through both micro-interactions (such as button feedback, loading animations, and success indicators) and macro-interactions (such as screen transitions). After that, you must plan how this task connects to a backend system using Firebase by identifying what data the user inputs, how it is processed, and how it is stored in a database, usually shown through a simple flow diagram. Once your logic is reviewed and approved by your lecturer, you will then prepare your design system in Figma by organizing colors and typography into local styles, and finally import and map these styles into FlutterFlow to create a consistent visual theme. Overall, the task is about moving from visual design to a more complete, data-driven and interactive application concept.

 

 Interactive Main User Task

Based on the prototype screens, the main interactive user task is:

Browsing food categories, selecting food items, entering delivery/payment information, and completing a food order.

The prototype demonstrates a complete food ordering flow that includes:

• Food category browsing
• Viewing food reviews
• Selecting food details
• Entering delivery information
• Entering payment information
• Order confirmation
• Tracking transport status
• Final delivery success page

This task involves continuous user interaction and multiple stages of data processing, making it suitable for backend integration.

Micro-interactions (Feedback)

Several micro-interactions can be identified throughout the interface:

Food Browsing

• Food cards visually respond when selected
• Category pages update dynamically when users switch between food types
• Review sections provide interactive scrolling and visual rating feedback using stars and progress bars

Form Interaction

• Input fields highlight when users type information
• Buttons such as “Next”, “Pay”, and “Tracking Orders” provide touch feedback through color or press-state changes
• Navigation icons in the bottom bar visually indicate the active page

Order & Payment Feedback

• During checkout and payment processing, loading indicators can be applied while data is submitted
• The final “Congratulations – Your food is on the way” page acts as a success feedback state after order confirmation
• Transport status indicators visually update delivery progress (“Packing”, “Being transported”, “Arrive”)

These micro-interactions improve usability by continuously informing users about system status and interaction results.

 Macro-interactions (Navigation)

The prototype shows a structured multi-screen navigation flow:

Main Navigation Flow

Home Page
↓
Food Category Page
↓
Reviews / Food Information
↓
Food Detail & Customization
↓
Checkout Address
↓
Payment Information
↓
Order Confirmation
↓
Transport Tracking
↓
Success Page

Screen Transition Behavior

• Splash/Home transitions use smooth fade or slide animations
• Category pages transition horizontally between sections
• Checkout screens follow a step-by-step linear navigation process
• Transport tracking behaves like a progress-based workflow
• Final confirmation screen uses a full-screen success state transition

 The macro-interactions create a guided ordering experience that leads users through the full purchase journey.

 Firebase Integration Plan

The prototype clearly demonstrates several types of data interactions that would connect to Firebase services.

 Firebase Services Used

 Cloud Firestore

Used for storing and retrieving:

• Food categories
• Food items
• Reviews and ratings
• Order information
• Shipping details
• Transport status

 Firebase Authentication (possible but not shown directly)

The prototype does not explicitly show login/signup pages, so authentication is not confirmed. Therefore, it is optional and not included as a primary feature.

 Data Elements Identified

Food Data

- food_id
- food_name
- category
- image
- price
- description
- rating

Review Data

- review_id
- food_id
- reviewer_name
- review_text
- rating

Order Data

- order_id
- selected_food
- quantity
- type
- size
- store_location
- total_price

Delivery Information

- full_name
- phone_number
- email
- address
- city
- zip_code

Payment Information

- bank_name
- card_type

Transport Tracking Data

- merchant
- rider
- delivery_status
- estimated_arrival

 Data Flow (Based on Prototype)

User browses food categories
↓
Selects a food item
↓
Views reviews and product details
↓
Enters order customization
↓
Submits delivery address
↓
Submits payment information
↓
Order data stored in Firestore
↓
Transport information updates dynamically
↓
User receives confirmation page

Before proceeding to FlutterFlow implementation, the following components should be reviewed:

• User flow structure
• Micro and macro interaction planning
• Firebase database structure
• Data flow logic

This prototype demonstrates a complete food ordering experience with:

• Interactive browsing
• Dynamic review systems
• Multi-step checkout flow
• Delivery tracking
• Order completion feedback

Compared to a simple static UI, this design already shows strong consideration for:

• User journey structure
• Data organization
• Backend connectivity
• Interactive feedback systems

The application structure is suitable for Firebase integration and FlutterFlow implementation because the interface already follows a modular and database-oriented workflow.