Flex Pizza Builder

Posted At : March 24, 2007 11:53 PM | Posted By : Ryan Favro
Related Categories: Flex

At the office we order allot of pizza and while we found ordering online preferable the actual ordering experience was lacking to say the least. So back in 2005 I used the scenario as an R&D project with Flex 1.5 and later ported it Flex 2 back in May of 2006. My plan was to build a pizza ordering system where you could drag and drop pizza toppings on to a pizza and actually see whatever combination of toppings you selected appear photo realistic in real time. Although the system is really an unfinished symphony I think might help stimulate others to think creatively about what they can do with flex. One small thing I'd like to mention about the app is that we did all the photography (even the icons) in the office ourselves with real ingredients.

To experience the Flex Pizza Builder click on the images below:

The Front End Customer View

The Back End Order Taker View

Comments (63) | Print | Send | del.icio.us | Linking Blogs
Comments
[Add Comment]
I have to say. It is really cool application. I wish they had a smell sensor and that they could send me the pizza as well.
By the way the URL to the front end is wrong. It should be
http://labs.newmediateam.com/pizzastore/customervi...
# Posted By Jens | 3/25/07 1:48 AM
heh, very cool! I wish you could port that to Australia'n Pizza retailers. Lord knows how many Pizza's i order a month for user groups etc...

-
Scott Barnes
Developer Evangelist
Microsoft - Pizza Delivery boy
# Posted By Scott Barnes | 3/25/07 4:58 AM
So at the end of the shooting did you make a pizza or not?
Cool app..
;)
# Posted By Savvas Malamas | 3/25/07 5:16 AM
Jens,

Yeah a bit of typo on the URL to the front end there, its fixed.

Savvas,

No we didn't make an actual pizza its all done by compositing layers in flex. And the cheese pizza base was prepped special for us by a local pizza joint so it would look good for the photography. Unfortunately The prep that went into the cheese pizza meant it couldn't be eaten as it was only half cooked and the cheese was melted on only in the last moments of cooking to keep it from browning too much.
# Posted By Ryan Favro | 3/25/07 11:54 AM
Great Job -

We are in the process of building several versions of a Build you own Pizza system. We have many other functions designed -- but the demo I used this morning comes close to our phase-I release.

Please let us know if your pizza building software is available for purchase.

Thanks

Ray Kasbarian
Global Menu Guide
US Menu Guide
# Posted By Ray | 3/26/07 5:24 AM
Nice looking application, although I have problems with it... where are the button for chillies, extra chillies, and jalapeños?

P.S. I'm still waiting for my Beta Testing Pizza to arrive; your Beta pizza delivery slaves suck! :D
# Posted By Nostok | 3/26/07 11:02 AM
Oooooohhhh... it´s cool, delivery in Spain?? XD
Very nice, good work!!
# Posted By equintano | 3/26/07 11:42 AM
Cool from a technology/flex perspective.
Not so cool from a customer/usability experience perspective. Having to drag the ingredients to the pizza is completely undiscoverable.
Well meant, but on a computer screen nobody expects to have to work to assemble pizza toppings. One of those "because we can, not because it's actually useful" demos.
# Posted By German Bauer | 3/26/07 12:09 PM
Very nice demo. I too think the Drag-and-Drop method of getting the toppings is probably not the best way to do it. Took me a second to figure it out :).

The Papa-Johns site handles it in a pretty cool manor (although they need the cool real time pizza) and check out www.campusfood.com it is one of my favorite sites for ordering food and they have a really simple interface.

Guess i should play with Flex a little more.
# Posted By jeff | 3/26/07 12:21 PM
i disagree to some extent with german and jeff.

i think this is the way people will "think" in the future - much more natural extension of the way the human mind thinks naturally.

we just need to "unlearn" the way computers force us to think. go adobe!
# Posted By stef | 3/26/07 12:59 PM
Thanks for the positive feedback. In response to German Bauer and keeping in mind this example is far from complete; addressing his concerns would be as easy as adding an "Add Topping" button. But really what is nice about creating RIA's of this sort is you are open to create all sort of discoverable ways of doing things all with the "norm". For example along with the Drag and Drop you could add right click menus as well. Or use first run tool tip style prompts to hint at what do for those people in the lower end of the bell curve.

Dismissing the "Drag and Drop" as "Work" is a bit short sighted. The "Drag and Drop” acts as an engagement mechanic keeping the customer stimulated and on task. Imagine a scenario where you say to your kids "Lets order a pizza tonight". Instead of phoning in the order, you sit with them at the computer and let your kids almost like magic explore toppings and create a pizza right before there eyes. This kind of shared user experience will not only satisfy the customer but imagine what it can do to the pizza company's bottom line. I don't believe it would be so far fetched to assume that average ticket sales will increase just do to people being able to experiment with new topping configurations that look too appetizing to pass up. Or increased brand loyalty because next time its pizza night the kids are going to want to build another pizza. That’s just naming a couple; but it demonstrates how everyone is a winner both the customer and pizza restaurant.
# Posted By Ryan Favro | 3/26/07 2:43 PM
Nice!!! I actually have a friend who has a small pizza shop here and i was wanting to create an interactive ordering system. I didn't think about creating the photo of the pizza as it's being built!

Any way you would part with the code for this? It looks like it would be a good starting point for an online ordering system. I have no experience with Flex but have been meaning to jump in...
# Posted By mp | 3/26/07 5:17 PM
MP,

Currently there are no plans to release the code for this. As far deploying a full blown version of this for a small pizza shop, I would hazzard to guess the cost to do so might be out of grasp for a small independant. Creating an ordering system like requires a bit more then just building it in Flex to ensure the customer experience is top notch. I won't get into them all here. But a few examples might be validating a customer is within a delivery area, or creating appropriate logic to handle illogical selections like a no cheese option and extra cheese being dually selected. Catch my drift? Regardless you should definatley jump into Flex.
# Posted By Ryan Favro | 3/26/07 5:38 PM
As I stated on Ben Forta's blog:

I like these real world examples except that it's not always for the "real world". What about half-n-half pizzas, what about light-medium-heavy on the cheese, what about light sauce, and how about thin, pan, or extra crispy? The app is cool for newbies, but just too simple to be a useful for experienced Flex coders. No combobox options for the ingredients, the size of pizza doesn't change even slightly with size choice, adding double ingredients should show xtra, xxtra, or (2x), (3x) etc.. instead of another list entry. The backend is better although there's no print functionality, 'order complete' does nothing, no customer name search, and you can't edit the order in case there's a change.

Don't get me wrong, it's a nice Flex demonstration, but I could create the entire app in one afternoon. I wish they'd put some real thought and work into it and add some really cool features you don't see everywhere, stuff that seasoned Flex coders would appriciate.
# Posted By Clint | 3/27/07 7:57 AM
Pretty cool.

I'd like half pepperoni and half ham... with light sauce please.
# Posted By Rick Root | 3/29/07 5:58 PM
You Flex application on the admin panel lacks the part whereby the admin has to update on the records if they entered the wrong data to ensure clean data
# Posted By RUI | 6/14/07 2:12 AM
The admin runs a little slow when selecting each order. I think its because of the requestion of the map. Perhaps a better method would be to send the data to the drivers gps system some how because the guy doing the admin should not need to know where the pizza is going. That mite be possible via blue tooth but don't quote me on that one. Still its a nice little system you got there just needs some optimising Well Done :)
# Posted By b3n | 6/15/07 9:18 AM
Geesh...It's just a proof of concept here folks! All the complaints about this doesn't work, or that part's slow. Give the guy a break...he was just messing around with Flex. I like it, and I think it stimulates creative ideas...way to go Ryan!

-Chris
# Posted By Christopher Keeler | 6/15/07 4:42 PM
What a wonderfull image! I wanna pizza ;)

_____
http://carpets4u.cn
# Posted By Andy | 7/16/07 1:56 PM
Pretty swift. I disagree with the comments that this isn't an obvious UI, I just think it needs fine tuning. If the pizza itself appeared in the middle and on a floured cutting board and the toppings appeared on the left, it would be a bit more obvious. The right-to-left drag direction is less obvious than a left-to-right drag direction.

I didn't try it but applying the same topping twice should be "extra pepperoni", for example. Removing should only remove 1 application of the topping until 0 applications of the topping is hit.
# Posted By Stephyn Butcher | 7/19/07 1:30 PM
What is this? You trying to get people's Credit Card Information and posting it on the internet?!
# Posted By MJ | 7/27/07 4:33 PM
People it's simply AN EXAMPLE of what you can do with Flex - and simply a case study - no need for the nasty comments saying "it should've had this and should've had that" - I think it's really cool and I'd love to create one of my own!
# Posted By Anthony K | 8/24/07 11:40 AM
Hey Ryan great stuff, considering it was done in 2005 very few people have your imagination. Love Mr. Bigshot Clints comments, people like that are just full of crap, no point in listening. If he was any good he would be constructive in his commenting. The reality is that he's more than likely a noname, friendless loser who feels empowered by the anonymity the internet provides. We know people like you, don't bother commenting on any other pages.
# Posted By Milan V. | 11/2/07 3:42 PM
Looks but for me most important is good pizza

http://gametimearcade.com/
# Posted By mika | 11/26/07 11:02 PM
Geesh...It's just a proof of concept here folks! All the complaints about this doesn't work, or that part's slow. Give the guy a break...he was just messing around with Flex. I like it, and I think it stimulates creative ideas...way to go Ryan!

http://www.dir-9.com
# Posted By fee | 12/4/07 11:00 PM
Oh fun! I could see this being really popular for pizza ordering online! Reading above, I noticed someone comment on campusfood.com, a site that I use. I could see these two systems being integrated very well. My props to you all.
# Posted By glyconutrients | 12/21/07 7:07 PM
I'd like half pepperoni and half ham... with light sauce please.
Andrzej Filipowicz
http://www.andrzejfilipowicz.com/
# Posted By Still life Artist | 1/20/08 4:07 PM
is it possible to put a movie instead of a picture in the white board area and pause it then make notes....
then resume play and continue.... http://gangbang.superexploration.net http://bigboob.superexploration.net http://naughty.superexploration.net
# Posted By Web | 2/7/08 5:27 PM
.
# Posted By ildar iskhakov | 2/18/08 12:58 PM
i love pizza
http://plazmatv.pinkpaper.info/
Plazma TV
http://plazmatv.pinkpaper.info/map.html
# Posted By Plazma TV | 2/27/08 8:01 AM
http://joeytr.babahost.net/
Joey
http://joeytr.babahost.net/map.html" target="_blank">http://joeytr.babahost.net/map.html
# Posted By Joey | 2/28/08 10:56 AM
http://www.shopofbrides.com website exchange link, if anyone need ,
Please contact us.
# Posted By bridal dresses | 3/1/08 10:15 PM
Thanks.. http://www.unicef.org/voy/discussions/member.php?u...
# Posted By Sabrina | 3/3/08 1:48 AM
nice.. http://www.unicef.org/voy/discussions/member.php?u...
# Posted By frank | 3/3/08 1:49 AM
Cool.. http://www.unicef.org/voy/discussions/member.php?u...
# Posted By Larry | 3/3/08 1:49 AM
[URL=http://www.beauty511.com/shop2/index.php]wedding dress[/URL]

[URL=http://www.beauty511.com/shop2/catalog_31.html]bride[/URL]

[URL=http://www.beauty511.com/]abito[/URL]

[URL=http://www.beauty511.com/]vestido[/URL]

[URL=http://www.beauty511.com/]abito[/URL]

[URL=http://www.beauty511.com/Girls.php" target="_blank">http://www.beauty511.com/Girls.php]flower gril[/URL]

[URL=http://www.beauty511.com/Voyage.php]party dress[/URL]

[URL=http://www.beauty511.com/]evening dress[/URL]

http://www.beauty511.com

[URL=http://www.beauty511.com/]traje de novia[/URL]

[URL=http://www.beauty511.com/]Brautkleider[/URL]




<a href="http://www.beauty511.com/shop2/index.php" >wedding dress</a>

<a href="http://www.beauty511.com/shop2/catalog_31.html" >bride</a>

<a href="http://www.beauty511.com/" >abito</a>

<a href="http://www.beauty511.com/Girls.php" target="_blank">http://www.beauty511.com/Girls.php" >flower gril</a>

<a href="http://www.beauty511.com/Voyage.php" >party dress</a>

<a href="http://www.beauty511.com/" >evening dress</a>

<a href="http://www.beauty511.com/" >vestido</a>

<a href="http://www.beauty511.com/" >traje de novia</a>

<a href="http://www.beauty511.com/" >Brautkleider</a>

http://www.beauty511.com/
# Posted By beauty511 | 3/14/08 12:11 PM
http://www.blinklist.com/FP-T5084/
# Posted By FP-T5084 | 3/14/08 12:30 PM
http://groups.google.com/group/zoloft-buy
# Posted By zoloft | 3/16/08 2:09 PM
This is worlds of the [url=http://www.sheshopping.com]White Wedding Dress[/url],[url=http://www.sheshopping.com]White Wedding Dress Retail[/url],[url=http://www.sheshopping.com]White Wedding Dress Wholesale[/url],[url=http://www.sheshopping.com]White Wedding Dress Manufacturer[/url],[url=http://www.sheshopping.com]White Wedding Gowns[/url],[url=http://www.sheshopping.com]White Bridal Dress[/url],[url=http://www.sheshopping.com]White Bridal Gowns[/url],[url=http://www.sheshopping.com]White Wedding Gowns Wholesale[/url],[url=http://www.sheshopping.com]White Wedding Gowns Manufacturer[/url],[url=http://www.sheshopping.com]White Bridal Dress manufacturer[/url],[url=http://www.sheshopping.com]White Bridal Dress wholesale[/url],[url=http://www.sheshopping.com]White Bridal Gowns manufacturer[/url] and [url=http://www.sheshopping.com]White Bridal Gowns wholesale[/url].
# Posted By sheshopping | 3/20/08 11:08 AM
Oh:D...
Very nice, good work!!
# Posted By su deposu | 3/22/08 9:36 PM
http://aturune.countysearchusa.net
# Posted By Allie | 4/4/08 11:07 AM
http://www.shopofbrides.com
# Posted By wedding dresses | 4/4/08 11:52 PM
http://usedcars.3xw.us/
# Posted By used cars | 4/12/08 11:44 PM
http://fpt5084.3xw.us/
# Posted By fp-t5084 | 4/13/08 10:35 PM
http://www.1tadalafil.com/
# Posted By Tadalafil | 4/14/08 10:47 PM
<a href="http://groups.google.com/group/softnewsoft" target="_blank">softnewsoft</a>
# Posted By softnewsoft | 4/17/08 6:18 AM
http://mlbsport.c0n.us/
# Posted By mlb | 4/18/08 2:42 AM
http://www.shopofbrides.net
# Posted By wedding dresses | 4/21/08 8:54 AM
Thanks for the excellent comment.
Sinon voila l'adresse du site amateur sur Marseille en France.
http://www.casting-internet.com
# Posted By amateur | 4/25/08 4:15 AM
Thanks for your article.
Can I purchase one link from your blog?
Please visite my website http://www.shopofbrides.com , and response me about link price , Thanks
# Posted By wedding dresses | 4/25/08 11:23 AM
This is worlds of the [url=http://www.sheshopping.com]Wedding Dress[/url],
[url=http://www.sheshopping.com]Wedding Dress Retail[/url],
[url=http://www.sheshopping.com]Wedding Dress Wholesale[/url],
[url=http://www.sheshopping.com]Wedding Dress Manufacturer[/url],
[url=http://www.sheshopping.com]Wedding Gowns[/url],
[url=http://www.sheshopping.com]Bridal Dress[/url],
[url=http://www.sheshopping.com]Bridal Gowns[/url],
[url=http://www.sheshopping.com]Wedding Gowns Wholesale[/url],
[url=http://www.sheshopping.com]Wedding Gowns Manufacturer[/url],
[url=http://www.sheshopping.com]Bridal Dress manufacturer[/url],
[url=http://www.sheshopping.com]Bridal Dress wholesale[/url],
[url=http://www.sheshopping.com]Bridal Gowns manufacturer[/url]
[url=http://www.sheshopping.com]Bridal Gowns wholesale[/url].



This is worlds of the <a href=http://www.sheshopping.com>Wedding Dress</a>,
<a href=http://www.sheshopping.com>Wedding Dress Retail</a>,
<a href=http://www.sheshopping.com>Wedding Dress Wholesale</a>,
<a href=http://www.sheshopping.com>Wedding Dress Manufacturer</a>,
<a href=http://www.sheshopping.com>Wedding Gowns</a>,
<a href=http://www.sheshopping.com>Bridal Dress</a>,
<a href=http://www.sheshopping.com>Bridal Gowns</a>,
<a href=http://www.sheshopping.com>Wedding Gowns Wholesale</a>,
<a href=http://www.sheshopping.com>Wedding Gowns Manufacturer</a>,
<a href=http://www.sheshopping.com>Bridal Dress manufacturer</a>,
<a href=http://www.sheshopping.com>Bridal Dress wholesale</a>,
<a href=http://www.sheshopping.com>Bridal Gowns manufacturer</a>
<a href=http://www.sheshopping.com>Bridal Gowns wholesale</a>.
# Posted By sheshopping | 5/7/08 10:41 AM
Thanks for the pizzas.
# Posted By Bahamut | 5/7/08 6:25 PM
[Add Comment]
BlogCFC was created by Raymond Camden. This blog is running version 5.1.004.