IHOP
Ecommerce Redesign (order.ihop.com)
Role: Strategy, UX, Creative Lead
Core Domain: E-Commerce Architecture, Design Systems & Component Governance, Mobile-First Web Ordering, Agile UI Engineering Hand-off
User Journey Scope: Full Funnel (Market Interception → Location Discovery → Menu Customization → Frictionless Checkout / Fulfillment Choice)
Executive Summary
Faced with an increasingly crowded restaurant marketplace and shifting consumer dining habits, IHOP sought to expand revenue channels beyond traditional dine-in sales by launching a dedicated online ordering ecosystem (order.ihop.com).
As Strategy, UX, and Creative Lead, I directed a team of three designers while remaining actively hands-on in crafting key UI comps, interactive prototypes, and the foundational brand book and design system. We conducted stakeholder interviews and data analytics reviews to architect a fully integrated IHOP-n-Go e-commerce experience.
The resulting web application seamlessly integrated with fresh brand assets and new menu photography, empowering users to effortlessly discover nearby restaurant locations, customize complex IHOP-n-Go menu items, select preferred fulfillment methods (pickup vs. delivery), and pay online or in-store—establishing a scalable digital foundation backed by a robust component library and spec system.
Technical & Professional Scope
| Categorization | Details & Competencies |
|---|---|
| Role & Focus | Strategy, UX, Creative Lead (Team Direction of 3 Designers + Hands-On Prototypes, UI Comps & Brand Book) |
| Domain Scope | E-Commerce Web Application, Food & Beverage Digital Ordering, Design System & Component Library Creation |
| Cross-Functional Stakeholders | IHOP Brand Leadership, E-Commerce Operations, Frontend Developers, Media & Marketing Teams |
| UX/UI & Production Workflow | Digital Strategy, Stakeholder Interviews, Interactive Prototyping, High-Fidelity UI Design, Brand Book & Spec Documentation |
| Platform Architecture | Dedicated Sub-Domain (order.ihop.com) with Store Locator, Customizer Engine, Fulfillment & Payment Gateways |
| Lifecycle Stages | Discovery (Store Locator & Fulfillment Choice) → Customization (Menu Engine with New Photography) → Checkout (Online/In-Store Payment) → Fulfillment (IHOP-n-Go Pickup/Delivery) |
Key Initiatives & Strategic Impact
A. Dedicated E-Commerce Platform Architecture (order.ihop.com)
- Visual Integration & New Menu Photography: Integrated high-resolution, new menu photography across ordering flows and item customizer screens to elevate appetite appeal and drive higher ticket sizes.
- Intelligent Store Locator & Fulfillment Engine: Designed streamlined user flows letting customers automatically locate the nearest IHOP restaurant and select between pickup or delivery options prior to browsing the menu.
- Complex Item Customization UI: Built flexible UI wireframes and high-fidelity comps capable of handling highly customizable meal orders (e.g., pancake stacks, sides, toppings, dietary modifications) without overloading the user experience.
- Flexible Checkout Integration: Integrated frictionless payment UI flows accommodating both online transactions and pay-at-store checkout paths.
B. Scalable Design System & Developer Hand-off
- Brand Book & Component Library: Authored comprehensive brand guidelines, UI kits, and reusable component libraries to enforce visual consistency across all digital touchpoints.
- UI Engineering Delivery: Established standardized redline spec sheets and UI documentation patterns, directing three designers to deliver production-ready assets seamlessly to development teams.
Workflows & Governance
- Creative Leadership & Hands-On Execution: Balanced team management (leading 3 designers) with direct contribution to high-impact creative deliverables, including interactive prototypes and master brand books.
- Visual Asset Harmony: Art directed UI components specifically optimized to showcase the newly updated menu photography across mobile and desktop viewport sizes.
- Systemic UI Standardization: Structured design tokens, component libraries, and visual guidelines to ensure long-term design governance and ease of future platform expansion.
