# Food delivery app order tracking

> Order tracking for a Figma food delivery app: a map and route, the arrival time, a four step timeline, the courier with chat and call, and the orders list.

Where the food is, drawn in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: Order AP 4192 on a map with its route, Arriving in 12 minutes, a timeline that stops at Idris picked up your order, and Idris with chat and call buttons. Orders shows the same delivery as an In progress card with a Track order button.

Page: https://www.appetiteui.com/screens/food-delivery/order-tracking. Every screen of the app: https://www.appetiteui.com/docs/screens-foodie.

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| Tracking | A map, the arrival time, a delivery timeline and the courier | Top Bar, Avatar, Button, Lucide icons |
| Orders | The order in progress with its steps, and past orders | Section Header, Progress Steps, Badge, Button, List, Navigation |

- Tracking, light: Foodie app Tracking screen: Order AP 4192 with a map and a route, Arriving in 12 minutes, a four step timeline that stops at Idris picked up your order, courier Idris with chat and call buttons, and the order lines Shoyu ramen and Sushi set
  Picture: https://www.appetiteui.com/images/au_foodie_tracking_light.webp (dark: https://www.appetiteui.com/images/au_foodie_tracking_dark.webp)
- Orders, light: Foodie app Orders screen: an In progress card for Ramen Kitchen with an On the way label, Arriving at 19:20, a four step progress line on step 3, a Track order button, and Past orders for Green Bowl, Forno Vecchio and Poke House above a floating tab bar
  Picture: https://www.appetiteui.com/images/au_foodie_orders_light.webp (dark: https://www.appetiteui.com/images/au_foodie_orders_dark.webp)

## How the screen follows the order tracking pattern

| Rule | On this screen |
| --- | --- |
| Lead with the arrival time | Arriving in 12 minutes is the largest line on Tracking and Arriving at 19:20 on the Orders card: the time leads, the steps follow. |
| Steps, not a percentage | The four stages are named rows on Tracking and a Progress Steps line on Orders, so both say what happens next instead of a percentage. |
| The person is one tap away | Chat and call sit on the courier’s row, beside Idris and his Avatar. |

## Built from

| Component | Screens |
| --- | --- |
| Top Bar | Tracking |
| Avatar | Tracking |
| Button | Tracking, Orders |
| Lucide icons | Tracking |
| Section Header | Orders |
| Progress Steps | Orders |
| Badge | Orders |
| List | Orders |
| Navigation | Orders |

## iOS and Material

The frames are drawn in the ios-md Platform mode; an android frame reads the Material values.

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| List | iOS / List with a 44 minimum row | M3 / List Item, 56, 72 or 88 high by Lines | Material sets the row height by lines of text, iOS sets only a minimum |

## Related

- Food delivery app: [Food delivery app home](https://www.appetiteui.com/screens/food-delivery/home)
- Food delivery app: [Food delivery app restaurant menu](https://www.appetiteui.com/screens/food-delivery/restaurant-menu)
- Food delivery app: [Food delivery app cart](https://www.appetiteui.com/screens/food-delivery/cart)
- Food delivery app: [Food delivery app checkout](https://www.appetiteui.com/screens/food-delivery/checkout)
- Docs: [Foodie app screens, every screen and token](https://www.appetiteui.com/docs/screens-foodie)
- Booking app: [Booking app confirmation](https://www.appetiteui.com/screens/booking/confirmation)
- Docs: [Progress Steps](https://www.appetiteui.com/docs/progress-steps)