AmericanPie pizza ordering - desktop app UI design

Overview

Following the mobile ordering prototype, the same ordering system was adapted for a desktop web interface. The platform needed to support a network of independent pizzerias operating under the AmericanPie brand, with customers ordering delivery or pickup from their nearest participating location.

Design

The desktop layout featured a consistent two-column design throughout the ordering process: choices on the left and a fixed order summary on the right. This setup kept the entire order visible at all times, preventing users from having to navigate away—especially important during the multi-step customization, where customers need to review their selections easily.

The build-your-own section guided users step-by-step through crust, thickness, size, preparation, sauce, cheese, veggies, and meat, with icon-based info for those interested. After customizing the pizza, users could add sides, fried foods, salads, desserts, and drinks before moving to the cart. The delivery feature used Google Maps to show the service radius in concentric rings—under 3, 7, and 10 miles—helping customers verify coverage before placing an order. A "Switch to Pickup" option was available at all times for those outside the delivery zone. The cart clearly listed all customizations, showing tax, delivery fee, and a Groupon promo code field before checkout.

Outcome

A comprehensive desktop UI that manages the entire ordering process for both delivery and pickup, created in Adobe XD to complement the existing mobile prototype.