UX Design / UI Design / Branding

Tomato Joe's Pizza Ordering Process

Mobile Responsive Restaurant Web Design

Tomato Joe’s is a pizza restaurant in Valencia, California. Their pizza is great, but their pizza ordering process could be better. In my redesign concept, I focused on simplifying the process of customizing a concept pizza with the goal of improving mobile user experience.


  • Heuristic evaluation
  • User research
  • Task flow
  • Mockups


Their pizza ordering process occurs on a website separate from theirs. While the website is responsive, valuable real estate is wasted on unnecessary white space and repetitive copy.

Pizza Website



During my sketches, I stumbled into several questions.

  • Should “Customize” and “Add to Order” be options for every pizza from the main menu?
  • When should users be asked to select a size and quantity before adding it to their cart?
  • How can I best present options for which side of the pizza a topping should be on?
  • How can I best present options for how much of a topping should be added?

To answer those questions, I analyzed their website for insights into what they prioritize most as well as their competitors.

Pizza Ordering Flow Chart


Pizza Menu

Upon landing on the pizza menu screen, I placed a “Customize” button next to the “Concept Pizzas” heading. This allows users to skip scrolling through concept pizzas and customize their own from the get-go.

Below each pizza is the option to either customize it or add it to one’s cart. When a user selects “Add to Order,” a modal pops up where she can select the size and quantity and add it to her cart.

Pizza Add to Order Design

Pizza Add to Order

Custom Pizza

Customizing a pizza comes with many more options and, therefore, I designed the “Customize” button to direct users to a new screen rather than a modal pop-up.

Toppings are broken into categories. Selecting the down arrow reveals options for each category where users can check the checkbox or uncheck to remove a topping.

Pizza Custom Menu Design

Custom Crust Menu Design

A challenge I ran into was listing the quantity of a topping from least to most. Tomato Joe’s offers five options for quantity. It was unclear whether “light” or “single” was the least—and where “extra” fell in the spectrum. To answer the question, I asked several users:

Imagine you’re ordering pizza and choosing how much of a topping you want to add. You see this list: Triple, Extra, Light, Double, Single. From least to most, how would you order those options?

60% of the users I asked had stated “light” was the least and “extra” to be the most, which informed my design.

Custom Cheese Menu Design

Custom Cheese Menu


Redesigning a pizza ordering process was a learning experience, as it was more challenging than I thought. Customization offers a number of options—and making those options available to users without overwhelming them with information overload requires research and careful design.

Shopping Basket