My Dream App - Michael Yuan

Another Cookbook Update

2007-01-18T04:52:55Z

So, it’s time for a long-overdue update on Cookbook. If you haven’t already, read Austin’s blog entry, where he offers his perspective: http://mydreamapp.com/news/post/377/.

Collaborating with Austin and John over the last two months has been very productive. As you can see, Cookbook has evolved dramatically. And while it may look quite different from the original screenshots, the concept is very much still there. I think we’re still some time away from an actual release, but much progress has been made.

The recipe management and editing portions of Cookbook are close to being completed, so Austin will be tackling other features soon, such as meal planning and all that other jazz. Because the current UI is quite different from the original mock-ups, the interfaces for meal planning and grocery lists will be redone as well, to work more intuitively inside the new wider window layout.

Speaking of which, I think the three-paned layout of the new window works much better. John and Austin pushed the idea, and I’m glad we went with it. Organizing and browsing recipes this way, as opposed to using one source list with disclosure triangles, allows for a more intuitive experience and also is much better suited for the widescreen displays shipping with all Macs these days.

As for the visual themes for different cultures that Austin talked about, I initially had reservations about it. The possible issues I saw with it was that not every recipe could be definitively classified, and the number of themes that needed to be designed to cover the range of world cuisines could be prohibitive. Lastly, I wasn’t sure if the concept could be pulled off well. (I had flashbacks of MS Word clipart from the ’90s.) But reconsidering the idea, instead of the typical tacky cultural elements such as flags and national colors, certain minimal touches could be incorporated, such as stone and unfinished wooden textures for Japanese recipes, and an earthen and sun-roasted appearance for Italian recipes. (Think of the walls of your neighborhood Olive Garden.)

As for the appearance of the application itself, we were toyed around with the idea that instead of a simple Aqua theme, the application could have certain kitchen appliance elements, such as an LED readout, which you can see in the mock-ups below. In this case, some non-Aqua touches could work well for this application without looking out of place on a Mac desktop.

Here are another two conceptual screenshots of Cookbook, of how certain UI elements such as clocks could look like and how the user could interact with them:

Mock-Up 1 / Mock-Up 2

The window borders in these two mock-ups are also somewhat darker than in the ones Austin posted. I think a darker appearance breaks up the different parts of the window better. Borders were something John really pushed, and I agreed with him that they help separate content much better than a simple borderless design.

The State of Things

2006-11-20T03:15:31Z

It’s been a few weeks since the end of the final round of voting. Now that everyone’s had time to decompress, development on Cookbook has begun. We’re trying to get it out the door as quickly as possible.

So far, everything has been chugging along at a reasonable pace. We’re focused on just the basic stuff at this point, such as the interfaces for recipe management and editing. The more exciting features will be added later. Whether or not there will be any public betas, that’s up to the developers, though I do think that they will start appearing towards the end of the development cycle.

Right now, we’re also in the process of retooling the basic Cookbook interface. While the original UI in the mock-ups theoretically worked okay, we thought that it could be even better. What the final application will look like, no one knows at this point, but it may be quite different from what I had originally conceptualized.

One of the problems I’ve found in my mock-ups was the sidebar; it did too much and once you had more than a handful of recipes, the pane would become difficult to manage and navigate. The solution that we’re working on will change the layout of the main Cookbook window somewhat, but I think the original concept will still be retained. Furthermore, we’re also playing around with different window themes, as the current Unified Aqua window may seem a little generic for a culinary application.

So that’s it for now. I should note, development will probably be on hiatus this week, seeing how it is Wii launch day, and that both me and most of the My Dream App staff have our units. Woooooooo! (My Wii console code is 7765 4366 1246 4130.)

So someone Dugg Coobook�

2006-10-24T17:18:30Z

http://digg.com/apple/Cookbook_The_Sleekest_Entry_at_My_Dream_App

So there you go. Digg it or not, it’s up to you.

Last-Minute Update

2006-10-23T05:46:13Z

A few more mock-ups before voting starts…

The following screenshot is of the integrated community in action. Just like in the iTunes Store, the user can preview a recipe before downloading it. Clicking “Add” will immediately download the recipe and add it to the user’s library. As seen in the screenshot, the user can also rate and review recipes.

The next mock-up is of the timers in action. Clicking the timers button will open a sheet:

…where the user can keep track of multiple timers relating to different recipes:

Wrapping Things Up

2006-10-18T22:32:28Z

We’re near the end!

Today’s blog entry is about the online recipe catalog built into Cookbook. Manually typing (or cutting/pasting) recipes into the application can be tedious, so finding a way of streamlining the process is crucial.

Browsing and downloading from the integrated online community should be dead simple, but at the same time, it shouldn’t feel like a web browser. Much like the iTunes Store (or what was the iTunes Store), navigation and adding files to your library will be seamless. The user finds a recipe, previews it in the current window, and downloads the file with one click.

The next image wraps everything up and shows Cookbook’s four main selling points: meal scheduling, intelligent shopping features, assisted cooking, and recipe sharing. It presents kitchen-related activities as a workflow, rather than unrelated steps involving food, as other apps have done.

Finally, I want to congratulate the other finalists for making it to the final round of voting and wish them luck. It’s been a crazy ride!

Recipe Management, Take 2

2006-10-18T02:52:09Z

So drawers weren’t too popular…

Fortunately, I think this implementation works/looks much better:

Further refinements:
-New/old Share button, in place of the Check Out button (less emphasis on Amazon.com integration)
-New item in the sidebar for online community integration (a la iTunes Store)
-Removed collections pop-up menu (unintuitive)

Recipe Management

2006-10-17T22:06:51Z

Today’s screenshots focus on recipe organization. This has been a problem since there weren’t any obvious ways to easily organize your collection until now. The following mock-ups are still very preliminary at this point, but they point to one way of handling thousands of recipes. (Unfortunately, the sidebar will still show scrollbars in some cases, unless the entire layout of the window is changed drastically.)

The pop-up menu next to the (+) button will let you easily switch between different recipe collections in Cookbook:

You can view all of the recipes in your personal collection, the ones in a certain set, recipes on another computer on the network, or your RSS subscriptions:

Of course, there needs to be an easy way to manage your recipes. So selecting “Manage Sets…” in the pop-up menu will open a drawer:

With the drawer, you can easily create new sets and shuffle recipes back and forth between different collections like in iTunes. I was initially hesitant about adding a drawer (seemed outdated in Tiger), but in this case, it works exceptionally well. Aesthetics-wise, the drawer did need to be cleaned up a bit to be brought up to speed with the rest of Tiger, so I did just that.

The user can keep the drawer open if he/she wants, or have it closed to work within just one set.

If the drawer is closed, dragging a recipe icon to the left edge of the window will open it for the user to drop it onto a set. Once the mouse button is released, the drawer will close by itself.

Recipe Scheduling and Grocery Lists

2006-10-12T22:21:01Z

Today’s entry is about recipe scheduling and grocery lists. One way to plan meals is to drag recipes onto the Meal Planner calendar. But you could also accomplish it from within a recipe. Clicking the scheduling button would bring up a sheet…

…where you can select multiple dates on the calendar:

The ingredients required for the scheduled recipe will then be automatically added to the Smart Grocery List that occurs in the week leading up to that recipe.

Right before you leave for the supermarket, you can print out the list using various templates built into Cookbook, or have it synced to your iPod. Deselect the checkboxes for ingredients you already have in your home, and they won’t appear in the list you’ll carry to the store.

——-

Addendum:

In its current view, the grocery list is sorted by recipe. Items can also be sorted alphabetically, in which case redundant items in the list will be combined. (so “salt” won’t appear multiple times.) Quantities will automatically be totaled, and if they are in different units (for example, 2 tablespoons and 3 grams of salt), they will be converted beforehand.

Cookbook Shopping Cart

2006-10-11T07:29:02Z

Today’s entry deals with one of Cookbook’s more controversial features: Amazon.com integration. While this feature clearly won’t be for everyone, I’ve always thought that if Amazon.com’s grocery section had a better interface and presentation, it would be exponentially more usable and useful. Amazon would be a great initial retailer because it offers a comprehensive suite of web services, which is ideal for applications like Cookbook.

Ordering food over the Internet is still in its infancy and won’t replace trips to the supermarket. The infrastructure just isn’t there. However, it can still supplement your shopping habits. You can order online dry goods you regularly stock up on, and that may shorten your trips to the supermarket and let you focus on fresh foods while you’re there.

The first in a series, the following screenshot is of the Cookbook shopping cart. The user can switch between two modes, list view or item view. List view would give you a general overview of your order, whereas item view (as shown) would present the contents of your cart in a more realistic fashion (like your media collection in Delicious Library). Just like the Dock, dragging an item out of the window would remove it.

Searching, Etc.

2006-10-09T04:50:13Z

This week’s update is about searching. Intuitive searching is a big deal, so in Cookbook I imagine that it should look something like a combination of the iTunes 5/6 search bar and the new page search feature found in the next major release of Safari.

The moment the user starts typing in the search field, results start populating the sidebar. The recipe card pane dims to show exactly where the search query can be found in the selected item.

———

Also, refinements to the full-screen mock-up. Changes:

-Active timers can been seen in full-screen mode
-The ability to set timers easily from within a step. Cookbook automatically finds time intervals within the text of a recipe (for example, anything that is “x minutes”) and shades them in subtly. The user can then use his/her remote or voice to set a timer for exactly the amount of time that is specified in a step.

Using the Apple Remote in full-screen mode should also be intuitive:

Cookbook Full-Screen Mode

2006-10-04T07:49:22Z

The following mock-ups are of Cookbook in full-screen mode. These are still rough drafts at the moment, so they will be refined over time.

The goal was to produce a full-screen interface that could be read from across the kitchen, was dead-simple, and yet still provided enough useful information and feedback. The interface can be controlled three ways: mouse/keyboard, Apple Remote, or speech recognition.

To see Cookbook full-screen mode for yourself, download this file. Save it to your desktop and right click the image file. Select “Slideshow”. Make sure it stretches to full screen.

———

The following screenshots are of speech recognition in action. The user calls up (literally) the recipe finder to jump to another recipe. The recipe that was being viewed previously will still keep its place once the user returns to it.

The screen will dim anytime a dialog appears that requires the user’s attention or input. The buttons in the dialog boxes can also be activated by voice.

If Cookbook is in full-screen mode and a timer goes off, it will dim the screen to put up a dialog to let you know:

The Cookbook Website

2006-10-03T08:56:10Z

Taking a short break from refining the ideas behind my app, I thought about the marketing behind the product if Cookbook was to be developed.

So I did a quick website.

I tried to keep the main ideas and selling points as succinct as possible, so potential future customers can understand the benefits of the product with just a quick glance.

How Do I Add a Recipe? Here's How.

2006-09-25T06:16:31Z

In this series of mock-ups, you can see how one goes about manually entering a recipe, which a few forum members were curious about.

First though, I refined the original screenshot. I thought the old layout of the recipe viewer was too busy, so I moved around a couple of things. The look of the notes area was ripped-off from the new Leopard Mail notes feature, in case anyone’s wondering. (I tried a couple of alternative styles, but they all looked “off.”)

The following is what I imagine the recipe card editor would look like.

First, there is no need to open a new window just to enter in data, something which I’ve always found annoying in existing cooking apps. Second, the bar at the top goes into “construction mode,” so you’ll know at a glance if you’re editing mode or not. Last, I’ve always liked how easy it is to enter information in Address Book, so I styled the editor in Cookbook after it. You can easily move between fields by tabbing or shift-tabbing.

Concerning unit conversion, if the amount and unit fields are already filled out, switching the unit (e.g. going from ounces to grams) will automatically convert the value in the amounts field.

Finally, Cookbook supports multiple images per recipe card and always has in my mind. It’s just that existing mock-ups don’t show it.

If you bring your mouse cursor near the image field in the Cookbook window, an overlay will appear to let you navigate a set of images, as well as set default magnification values for pictures.

Thanks for the Feedback!

2006-09-24T04:33:20Z

It’s been a while since the last update, so I thought I’d talk about where the concept stands as of right now.

First, though, I’d like to thank everyone who’s left feedback in the forums or sent me PMs. I really appreciate the comments, suggestions, and criticism. Some posts were astonishingly detailed. With volume of posts, however, it’s a little overwhelming since I read each one carefully, so going through all of them has taken a while. I wrote down everyone’s suggestions in a list and prioritized them to see if I could implement any of the features in upcoming mock-ups. (There are some coming in the next few days, by the way.)

A forum member recently suggested that I talk about the product roadmap for Cookbook, assuming it gets developed. I thought was a great idea. While this is in no way a guarantee that the following features will make it into the final release, here is where I expect the product to go in terms of features:

Pretty-Definite Version 1.0 Features:
Meal scheduling
Smart Grocery Lists
Amazon.com integration
Multiple version-keeping
Multiple timers
Full screen support/voice navigation
Multiple images per recipe card
Advanced search and recipe suggester
iPod notes and .Mac syncing

These features may make it into 1.0, later versions, or be dropped:

Possible Version 1.0 Features:
“Recipe-casting”: RSS publishing
Recipe sharing via Bonjour
Workflow-based format for cooking directions
Video support in recipe cards
Price-tracking of items in physical stores
Export recipes as MP3 files for iPods
Unit conversion
Diet/nutrition support
Recipe scaling (not too likely; too unpredictable)
Cookbook-specific online database of recipes

Possible Version 2.0 Features:
Multiple retailer support
Intuitive comparison shopping
Keyword browser
Built-in storefront aggregating multiple retailers
Booze support: drink recipes

As you can see, this is a pretty long list, but these features don’t even begin to cover most of the suggestions I’ve received. So needless to say, it’s taken some time just to sort through everything.

In the forums, there have been a few people who’ve been opposed to Amazon.com integration. I realize that feature isn’t for everyone, though I still think it’s a huge deal. (It won’t replace physical grocery shopping altogether for years, but it’s a good start.) So for those who don’t want to use it, all online shopping features can be disabled with a single checkbox in Cookbook preferences.

Screenshots Galore

2006-09-15T05:55:32Z

Here are a few more mock-ups of Cookbook in action:

I updated the main tour graphic of the application (added refinements to the interface), so if you haven’t seen it already, here it is:

I got some feedback about the left recipe listings pane, and the potential clutter that can accumulate if you have too many recipe cards, so I thought it would be nice if you could manage different sets of recipes (like culinary “playlists”) in addition to filtering through your collection:

Finally, below is a mock-up of the Meal Planner. I thought that a standard calendar layout would be boring because it’s been done everywhere else (from Outlook to iCal). I mean, wouldn’t it be nicer to have a continuously-scrolling calendar “reel” instead, so you don’t have to view your schedule one month at a time? But without a scroll bar, how would someone scroll through the calendar? Well, in the mock-up, I added a Calendar Tape (inspired by the Dashboard icon). Dragging the tape will scroll your calendar in real-time; wherever the tape ends up under the red needle will be the time period within view in the window.