Pizza booking and delivery app
Mobile App
The problem
Apps such as Dominos and Pizza Hut let me find a pizza, add sides and place an order. Choosing the meal felt less engaging: static images sat in a 2x1 or 2x2 grid, and changes to size or toppings only appeared at checkout. I wanted the pizza to respond as I made those choices.
The original screens show where the interaction became awkward:
Pizzas appeared in a single row of static choices.
Toppings used the same row of options, with little visual response.
The size selector showed a large pizza image that stayed the same size.
The order tracker showed progress through an animated circle, with no interaction.
My redesign
I brought the pizza, size and toppings onto one screen. The proposed interactions respond to each choice, removing the extra taps needed to reach separate selection screens.
Fling through pizzas, with details shown above the selected one.
Choose the size and toppings on the same screen, with the pizza responding visually.
Smooth the animations between screens.
Replace the circular tracker with animated people showing the preparation stages.
Animate the current stage; show completed stages as still, greyed-out figures.
I designed the screens in Figma and built the interactions in Protopie.
Try the prototype
Open the prototype link below in your browser, or in Protopie Player on your phone. You'll need Protopie installed on your computer to edit the source file.
I built the prototype to demonstrate the interactions. Some behaviour is still incomplete and would need further development for a working app. Only some pizzas and toppings can be selected, and the checkout screen uses a predefined order rather than the exact pizza you added. I set the tracker to run on a timer to demonstrate the sequence; it isn't a live order. To follow the intended flow, add mixed pizza in sizes L and S, with mushrooms and pineapple on L and mushrooms on S.
Tools
Figma · Protopie · iOS · Open-source .pie file
Source file
Prototype
