PizzaHut.com
Localization
Redefined Pizza Hut’s web localization experience to make selecting the right store and occasion faster, clearer, and more intuitive.
This project marked the first customer-facing release of Pizza Hut’s redesigned and rebuilt web platform — part of a modernization effort that transitioned from Angular to React and decoupled the frontend from the backend.
I led design for the top-of-funnel experience — including localization, the homepage, and pizza builder — establishing the foundation and design patterns that shaped future work across the platform.
Role
Senior UX Designer
Responsibilities
UX, UI design
Prototype & testing
Collaborators
UX Research
Product
Engineering
Tools
Figma, Miro, Jira, Confluence
Problem
The localization step — where users selected their store and occasion (delivery vs carryout) — was a jarring step to users and a significant drop-off point in the ordering flow.
Customers would unexpectedly land on the localization page after clicking a deal or a menu item. They didn’t understand why they were there, being asked to choose a location before even seeing the menu. It was disorienting and broken — like something hijacked their experience.
Behind the scenes, localization was critical to system logic:
- Each store had unique menus, pricing, and availability
- Some menus even varied by occasion
- None of this was clear to users, who just wanted to browse, find something delicious, and check prices before committing to an order.
- Additionally, the business needed to encourage carryout during nationwide delivery-driver shortages,
The redesign coincided with a major platform rebuild — migrating from Angular to React and decoupling backend from frontend. To accelerate development and ensure consistency, the team also aimed to align the new web experience with the existing mobile app’s information architecture and interaction patterns.
Goals
Our goal was to make localization feel like a natural, helpful part of the ordering journey — not a disruption.
We wanted users to understand why they were being asked to choose a store and occasion, guide them quickly through those decisions and back into the shopping funnel – where they wanted to be.
Localization should feel like a natural part of shopping, not a gate in front of it.
To achieve this, we focused on five key objectives:
Clarity
Use simple, friendly language to explain why localization is needed and what comes next — without overwhelming users with system logic.
Conversion
Reduce drop-off by making it easy to start an order from any entry point — homepage, national deal and product pages — and keep users moving forward with confidence.
Cohesion
Ensure the experience felt seamless and intentional no matter how users entered the flow — from inline homepage prompts to deeper entry points.
Carryout encouragement
During a period of nationwide delivery driver shortages, the team also wanted to subtly encourage carryout orders.
Continuity & speed
Align the web flow and information architecture with the mobile app for a consistent experience across channels — and to accelerate development through shared patterns.
Exploration & testing
Initial invitation
I began by reviewing how other QSR brands and international Pizza Hut sites handled localization. In markets like the UK, users had to enter a postcode on a landing page before accessing the rest of the site. We considered this, but found that U.S. users expected to see at least national deals and products first.
Exploring placement and visibility
I thought how we could invite users to localize from the homepage — exploring variations in wording, CTA labels, UI treatments, module placement, and visual hierarchy.
We tested locations across the homepage — in the header, just below it, above or below the hero, and after the deals — to find the right balance between visibility and distraction.
Placement was a key consideration. We tested positions above and below the fold to ensure the module was discoverable without pushing deals too far down the page. Some stakeholders worried this could affect conversions, which we later validated through data.
The winning direction: the localization ribbon
After several iterations, the ”localization ribbon” emerged as the strongest direction — a lightweight, visible prompt for non-remembered users to start their order without interrupting their browsing.
Remembered users saw their previous store and occasion in the redesigned header. When these users began a new order, a confirmation modal appeared to verify their details — preventing errors like accidentally sending a pizza to Grandma’s house.
Inside the Rail: Designing the Localization Flow
Because the existing flow redirected users to a new, unexpected page, it felt jarring and disorienting. To reduce that friction, I introduced a right-hand slide-out rail for localization. This approach kept users anchored in context and created a single responsive pattern that worked seamlessly across desktop and mobile.
The new rail also made it easier to reuse mobile app patterns across devices — aligning data structures, layouts, and hierarchy for consistency and faster development.
Lightweight data entry
Within the rail, I explored ways to make data entry as lightweight as possible — testing different patterns for occasion selection (carryout or delivery) and identifying the minimum information needed to return relevant results. This reduced cognitive load and perceived effort while keeping focus on the user’s main goal: getting back to browsing or ordering quickly.
The data entry experience adapted to the user’s status:
- Signed-in users could instantly choose from saved addresses in a dropdown or enter a new one.
- Mobile guests could tap the location (compass) icon to detect their current location via geolocation.
Map and store selection
While delivery users were matched to a single store, carryout users often had multiple options — especially in dense markets like Dallas. To help them choose, the experience paired a map view with the list of store cards. Because search results were based on the geographic center of the ZIP or city entered, the first store listed wasn’t always the closest. Tapping a pin on the map automatically selected the corresponding store card and moved it to the top of the list, creating a clear, responsive connection between map and list.
Refining store cards
While I needed to match the app’s structure, I was still able to refine the store cards to balance detail and clarity — experimenting with how much information to reveal at each state. Selected cards displayed all relevant details, while unselected cards were simplified for quick comparison. When stakeholders requested more visibility into hours and store info, I added a collapse/expand interaction that surfaced key details by default and kept extra data accessible on demand.
Dynamic store states
I also designed for dynamic store states such as closing soon, delivery temporarily unavailable, or weather-related closures. In each case, users were given clear alternatives — like switching to carryout or pre-ordering for later — keeping them in control and avoiding dead ends.
Iteration & testing
We developed interactive prototypes to test both the homepage ribbon and the flows within the rail — including occasion selection, field entry, and store cards — across mobile and desktop layouts.
Early feedback confirmed that keeping users on the same page felt far less jarring than redirecting to a separate localization page. The slide-out rail reduced disorientation and perceived effort, creating a smoother transition back into the shopping flow.
To build confidence, I also explored headings and support copy that explained why users were seeing this step and how it benefited them — giving context that this was to show accurate menus, prices, and local deals.
Through internal reviews, user testing, and A/B experiments, I refined wording, hierarchy, and placement to improve comprehension and conversion. Each iteration made localization faster, clearer, and more connected to what users wanted to do next.
Design system foundations
As part of the redesign, I also began laying the groundwork for a unified design system. I conducted a comprehensive audit of the existing visual patterns and inconsistencies, defined a new typography scale for desktop and mobile, and refined color palettes to meet WCAG 2.1 contrast requirements.
In addition, I designed early component patterns such as cards, badges, buttons — creating a visual language that balanced Pizza Hut’s bold brand personality with enterprise-grade usability. These early foundations later evolved into the scalable design system that supported future features across the entire platform.
Outcome & impact
The redesigned localization experience launched in August 2020 as the first customer-facing release of Pizza Hut’s new platform. Although the new experience was initially accessible only from the homepage, early metrics showed clear improvement in engagement and conversion:
Bounce rate decreased across all screen sizes, indicating that the new experience successfully encouraged interaction and exploration rather than abandonment.
+0.28pp
Overall site conversion
+11.3pp
Localization completion rate
+0.28pp
Top-of-funnel conversion
Confirming homepage localization flow is bringing more users into the order funnel
+0.8pp
Carryout selection
Aligning with business goals during the nationwide delivery-driver shortage
While localization conversion for users already in the funnel decreased slightly (–0.6 pp), this was expected — surfacing localization earlier captured lower-intent browsers. The overall gains in engagement and conversion validated the new approach.
Once the rest of the site migrated to the new platform, adoption was expected to rise further — extending the improved experience beyond the homepage and compounding its impact on conversion.
The new design demonstrated that a small, contextual interaction could meaningfully reduce friction, increase engagement, and shift customer behavior toward faster, more profitable order types.
Localization ribbon and rail, with some updates, can also be seen on PizzaHut.com.