Create a delivery site that offers unique ways to get localized, finding stores, customize pizza, and make seamless online payment transactions.
Problems and solutions
There were many challenges along the way. One of the biggest is how to make the pizza customization flow easy to use yet not clunky on a mobile screen. I came up with an idea where users can easily view the pre-selected pizza attributes before adding to cart, and customize pizza (change topping, size, and sauce) if they want to.
Research and user testing
I did 2 prototypes initially. The first Pizza Builder flow was a step by step process. For example, when the user wants to add the pizza to the order, he/she has to go through about 10 steps to add the pizza to the cart, whether or not he/she wants to customize the pizza. The second Pizza Builder prototype is a 3-step process.
We did a few rounds of user tests on both prototypes and the feedback was very positive on the second one below.
View Pizza Builder Prototype
The other challenge for the Pizza Hut Canada site is it not only does it have Pizza, but it also got many other categories like Wings, Drinks, desserts, and Discount Deals, etc. It took too much real estate on a limited phone screen. It is hard for the user to know how many categories Pizza Hut actually have at a glance.
I regrouped the category menu to make it only has 2 main categories on their ordering site at first glance. One is Menu and the other one is Deals. which similar to Promotions. The majority of the category items are under Menu section. For Deals tab, there are 8 individual deals and each of them has a complete ordering process.
View Deals Flow Prototype
We have launched all releases on a tight deadline and continue to improve the UX for conversions.
View Pizza Hut Canada Responsive Web