A rapid prototyping study mirroring Uber Eats’ checkout flow to practice precise UI replication and interaction behavior in a real-world context.
Tools
Figma, Origami Studio
Skills
High-fidelity prototyping, microinteractions, scroll behavior, conditional logic
Context
This prototyping project involved recreating key screens and flows from the Uber Eats app with high visual and interaction fidelity. Using Figma for layout and Origami Studio for logic-based interactions, the goal was to simulate real app behavior and deepen my understanding of micro interactions, transitions, and conditional flows. To explore business impact through design, I also introduced an original feature: Flash Deal at Checkout — a limited-time offer triggered during the final checkout step to test how urgency and contextual upselling could drive conversions.
High-Fidelity Designs, Prototyping, and Animations
The following prototypes highlight specific interaction details—from scroll-linked headers to animated upsell cards—used to bring the Uber Eats experience to life. These moments focus on motion, clarity, and usability, simulating how subtle UI behaviors can enhance the overall flow.
Home Feed Layers
An annotated breakdown of the Uber Eats home feed, deconstructed into functional layers: navigation, featured items, categories, and scroll behavior. This view provides a broader structural context for how the app organizes and displays dynamic content.
3D mock up of the structural layers behind the Uber Eats home feed UI
End-to-End Flow + Flash Deal Concept
This prototype simulates the user journey from the home feed to a store, through to checkout, ending with the Flash Deal. The timed offer appears just before confirming the purchase, surfacing personalized deals (e.g. Buy 1 Get 1 Free desserts) that disappear if not acted on immediately.
💡 Timed offers like these are designed to leverage FOMO and purchase momentum. Studies suggest that urgency-driven upsells at checkout can significantly boost average order value.
User flow starting from Uber Eats Home feed — timed upsell appears just before order confirmation.
3. Combo Deal Animation
A closer look at the Flash Deal card interaction. Built in Origami, the animation mimics real-time behavior: cards expand with motion and collapse smoothly, creating a polished, intuitive interaction pattern.
Dessert cards animate open/close with smooth transitions.
4. Checkout Scroll Behavior
This prototype continues from the Flash Deal, showing the final checkout screen. As the user scrolls, the large page title transitions into a compact, fixed header — a subtle cue that maintains clarity while optimizing space.
Header minimizes and sticks as user scrolls.
5. Store Page Scroll Header
Here, I focused on scroll-linked animation: the store image and title dynamically resize and fix to the top of the screen as users browse deeper into the menu. This improves usability by keeping key information accessible without cluttering the UI.
Store info shifts upward to stay accessible. Hero image fades to keep focus on main items.
6. Category Navigation with Sticky Tabs
This prototype showcases sticky category tabs that remain pinned as users scroll. Clicking a tab automatically jumps to the relevant menu section, streamlining navigation and helping users explore the store more efficiently.
Tabs pin and auto-scroll to relevant menu sections.
Learnings
This project deepened my understanding of how motion, spatial hierarchy, and interaction design shape user experience. Exploring 3D layers gave me a clearer sense of how content is structured beneath the surface, while Origami Studio challenged me to build logic-driven flows with real-time feedback. I also saw how subtle design choices—like scroll behavior, animated transitions, and time-sensitive offers—can influence usability and support business goals.
