Order. Checkout. Fast.
This is a UI design project I worked in the request from a food-ordering platform startup. The platform's mobile app is aiming at enabling customers to take order before they arrived at the restaurant and enjoy the food right after they were seated. The service is targeting busy urbanites who do not often have much time for a meal but still want to enjoy quality food in restaurants. In the core of the app is the ordering and checkout process. The busy users need to enjoy and feel the expedited flow. In search of a simple and fast ordering and checkout interaction, I design and prototype this single interface.
Inspired by a physical menu clipboard and traditional tab view in UI design, the single interface is designed to use 3 staggered layers to pack multiple tasks into one view. The elements in this interface are located by analyzing when and where they shall be hidden or shown. From ordering to paying, users can focus on a large area of what they are doing now, while having the hint of what they've done and what's ahead. And, it is always easy for users to switch between different stages, since all 3 layers are always visible and accessible at the same time.
Exploration by Sketching
Wireframes
3 Staggered Layers in Single Interface
Mockups
Interactive Prototype