Outside-the-Box Pizza, Part 1: A Social, Mobile, and Cloudy Modern Web Application

In this series we’ll be showing how we developed Outside-the-Box Pizza, a modern web application that combines HTML5, mobility, social networking, and cloud computing—by combining open standards on the front end with the Microsoft web and cloud platforms on the back end. This is a public online demo developed by Neudesic.

Here in Part 1 we’ll provide an overview of the application, and in subsequent parts we’ll delve into the individual technologies individually.

Scenario: A National Pizza Chain

The scenario for Outside-the-Box Pizza is a [fictional] national pizza chain with 1,000 stores across the US. All IT is in the cloud: the web presence is integral not only to customers placing orders but also to store operation, deliveries, and enterprise management.

Outside-the-Box Pizza’s name is a reference to the company’s strategy of stressing individuality and pursuing the younger mobile-social crowd. In addition to “normal” pizza, they offer unusual shapes (such as heart-shaped) and toppings (such as elk and mashed potato). The web site works on tablets and phones as well as desktop browsers. The site integrates with Twitter, and encourages customers to share their unusual pizzas over the social network. The most unusual pizzas are given special recognition.

Technologies Used

Outside-the-Box Pizza uses the following technologies and techniques:

• Web Client: HTML5, CSS, JavaScript, jQuery, Modernizr
• Mobility: Responsive Web Design, CSS Media Queries
• Web Server: MVC4, ASP.NET, IIS, Windows Server
• Cloud: Windows Azure Compute, Storage, SQL Azure DB, CDN, Service Bus
• Social: Twitter

Again, we’ll go into detail about these technologies in subsequent posts.

Home Page

On the home page, customers can view suggested special offers as well as videos showing how Outside-the-Box Pizza prepares its pizzas. The first video shows fresh ingredients, and the second video shows artisan pizza chefs practicing their craft.

The web site adapts layout for mobile devices, using the techniques of responsive web design. Here’s how it appears on an iPad:

And here’s how it appears on a smartphone:

Ordering

On the Order page, customers can design their masterpiece. Pizzas come in round, square, heart, and triangle shapes. Sauce choices are tomato, alfredo, bbq, and chocolate. Toppings are many and varied, a mix of traditional and non-traditional. Customers click or touch the options they want, enter their address, and click Order to place their order.

Order Fulfillment

Once an order has been placed, customers see a simulation of order fulfillment on the screen. Since this is a demo and we don’t actually have stores out there making pizzas, the ordering process is simulated. It’s also speeded up to take about a minute so we don’t have to wait 30-45 minutes as we would in real life.

The order is first transmitted to the web site back end in the cloud and placed in a queue for the target store.

As the order is received by the store, the pizza dough is made and sauce and toppings are added. After that, the pizza goes into the oven for baking.

After baking, the pizza is sent out for delivery. Once delivered to your door, order fulfillment is complete.

Social Media

On the Tweetza Pizza page, customers can view the Twitter feed for the #outsideboxpizza hashtag or post their own tweets.

To post a tweet, the user clicks the Connect with Twitter button and signs in to Twitter. They can then send tweets through the application.

The most impressive pizzas are promoted on the Cool Pizzas page.

The Store View

In the individual pizza stores, each store can view online orders. Orders are distributed to each store through cloud queues: each of the 1,000 stores has its own orders queue. The appropriate store is determined from the zip code of the order.

Once a pizza has been prepared, a delivery order is queued for the driver.

Driver View

Drivers get a view of delivery orders, integrated to Bing Maps so they can easily determine routes.

Enterprise Sales Activity View

Lastly, the enterprise can view the overall sales activity from the Sales page. Unit sales and revenue can be examined for day, month, or year; and grouped by national region, state, or store.

Summary

Outside-the-Box Pizza a modern web application: it's social, mobile, and cloud-based. Together the use of HTML5, adaptive layout for mobile devices, and cloud computing mean it can be run anywhere and everywhere: it has broad reach.

Outside-the-box-Pizza can be demoed online at http://outsidetheboxpizza.com. We aren’t quite ready to share the source code to Outside-the-Box Pizza yet—it’s still a work-in-progress, and we need to replace some licensed stock photos and a commercial chart package before we can do that. However, it is our eventual goal to make source available.

Next: Part 2: HTML5, CSS, and Browser Compatibility