Add a sprinkle of recipe magic to your dish!
Previous, next, and repeat
Basic navigation screen includes ingredients, tools, and directions for each step.
The main menu has at a glance information for diets, popularity, and more.
Recipe search functionality. Visual Users have significantly more recipes to choose from.
I've wanted to create a recipe skill for a long time, and I envisioned it integrating visuals and voice. My goal was to build something that would take advantage of the visual medium while still focusing on voice first interactions and methodology. I decided to craft something where visuals would add to the experience, not detract from it, and Recipe Magic became the perfect avenue for helping users in their cooking and baking needs.
What Does it Do?
Recipe Magic does quite a few different things, but the core of the functionality revolves around a few simple and easy-to-remember commands:
Search for 'x' - This is as basic as it gets and encompasses the root functionality of the included search. It can be modified and enhanced for more precise results, but at it's core it requires nothing else to return results.
Main Menu - Users will find themselves here quite a bit and will find a plethora of useful information provided for at-a-glance perusal as well as deep analysis.
Next - Move forward in a recipe to your next step in the process.
Previous - Move back to your previous step in case you missed something.
Repeat - Hear your current step spoken aloud once more.
How much of 'x' is in my recipe - Find out how much/many of an ingredient you need, or find out how much of a nutrient is in the recipe.
The flow of the application is quite simple:
1) The user will search for and select a recipe. This can be achieved by asking for a specific recipe (for example, searching for 'mashed potatoes') or by selecting a recipe from the popular Recipes of the Day category. At any given time Recipe Magic will store the ten most recent recipes for each user, so asking "What are my recent recipes?" will allow users to easily navigate and switch between them.
For voice users, there are four results in every search that will be listed off for selection, but for visual users with an Echo show, Fire TV, or tablet that list expands up to ten different options that can be selected on the screen.
There are three different search options: "My recent recipes" lets the user view their saved searches, "Recipes of the day" let's user see some of the most popular recipes that have been recently discovered, and the custom "Search for x" allows the user to search for and select a specific recipe.
2) Navigate a recipe. Once a recipe has been chosen, the user has a number of different options to navigate through it. Next, Previous, and Repeat all show the detailed steps of the recipe, including the directions for that step, the equipment required, and the ingredients required.
There are also a few auxiliary things the user can do once they've chosen a recipe: "email me the recipe" is available once an hour to deliver a link for a mobile-friendly web page with the full recipe to the user. Likewise, "text me the recipe" sends the link through another avenue to the user, and "add the ingredients to my list" will create a new shopping list in the Alexa app and add all of the ingredients with their quantities to it.
Smart Filters Saved by User Context
For users who want to narrow down their searches, the custom filter functionality also allows the following exclusions:
1) Diet Type - Vegetarian, Vegan, Ovo Vegetarian, Pescetarian, Lacto Vegetarian.
2) Allergies/Intolerance - Egg, Dairy, Tree Nut, Gluten, Peanut, Sesame, Seafood, Shellfish, Soy, Sulfite, Wheat.
3) Dish Type - Main Course, Side Dish, Appetizer, Beverage, Desert, Soup, Bread, Sauce, Breakfast.
4) Cuisine - African, American, Chinese, Japanese, Korean, Vietnamese, Thai, Indian, British, Irish, French, Italian, Mexican, Spanish, Middle Eastern, Jewish, Southern, Greek, German, Nordic, Eastern European, Caribbean, Latin American.
5) Excluded Ingredients - Pick ingredients to exclude from future searches.
Once you add a filter, it will save to your account until you remove it or clear your filters. This saves time in all future searches for users with common allergies or dietary restrictions.
Main Menu Display
The at-a-glance main menu of Recipe Magic will always display:
All of the ingredients in your current recipe (including the amount and aisle it can be found in).
All of the nutrients in your current recipe (actual amount per serving and daily value).
The time it takes to prepare and cook your recipe.
General Features, including if it is:
1) Gluten free
2) Dairy free
9) Whole 30
10) Low FODMap
The goal of Recipe Magic is to deliver a lot of deep information for users with a screen without making it a necessary part of recipe fulfillment for voice-only users. The Echo Show and Echo Spot are both optimized to deliver information in disparate ways to enhance the individual experiences.
You can also change Alexa's voice at any time with a premium add on, so if you would like to hear the directions given to you in any of the available voices then you can. Simply change the voice at any time by saying "Alexa, change your voice to x' with one of the included names.
The final feature of this skill worth mentioning is that it supports Echo Buttons for simple navigational commands. You can say "Turn my Echo Buttons on" or "Turn my Echo Buttons off" at any time to toggle this functionality. While they are on pressing an Echo Button at any time will activate it in this order:
1) Blue - Next Step.
2) Green - Previous Step.
3) Red - Repeat this Step.
4) Yellow - Main Menu.
This allows easy recipe navigation when a user doesn't want to constantly speak to Alexa to navigate and doesn't want to tap the screen in the case of messy recipes. You can use as few or as many buttons as you want. Note: there is no need for a roll call process because activation and subsequent navigation will both happen on a button's first tap.
How I built it
I focused first on the voice aspect by documenting and acting out possible dialog flows and scripts. My goal was simple commands would navigate the skill for critical information and an easy fallback process would make sure that users could stay on the correct path.
Once the critical voice-first interaction was implemented, I then searched for ways in which the visual aspect of the interaction could unobtrusively enhance the flow. For example, reading off thirty different nutrients, their amount in each serving, and the daily percent it equates too is cumbersome and overwhelming in a voice experience, but that same information is actually useful and simple when included as a sequence within a scrollview main menu for at-a-glance dietary information.
I also had to determine how to handle the different devices, because the information I can easily display on an Echo Show becomes cumbersome on an Echo Spot. I had to again make a critical-path decision about what to leave and what to remove to enhance the flow. Through all of the design process wanted for the visual aspect to include all of the things a normal user would think 'I wish this would tell me...' without it feeling like the visuals were necessary.
Challenges I ran into
For the back-bone of Recipe Magic I worked with several different recipe APIs before settling on Spoonacular. It included broken out directions and a powerful filtering system that would be easy to implement. It also gave me a lot of useful information that users could find while navigating.
Designing the user interface was a challenge because I wanted to display a lot of information without the screen. I opted for a minimalistic approach with a focus on sequences, scrollviews, and frames to differentiate the different information. It was important that it remain intuitive so that when a user taps the screen, whatever piece is going to scroll should be clear and easy to understand. This allowed me to add a tremendous amount of information into a compact view.
I also integrated with the account services API that Amazon offers so that I could send the recipe upon user request in three different forms depending on which the user requires: Text, Email, and Lists of Ingredients. Some users like to have a visual format of their recipe that they can touch and interact with outside of Alexa, and I respect that completely and wanted to satisfy this need as well.
Accomplishments that I'm proud of
I learned a lot with this skill and added a ton of new features to my tool belt. It was a series of firsts for me, including diving deep into the spoonacular api, designing and implementing the APL structure, working with emails, lists, phone numbers, and so much more.
If I had to nail down the one thing I'm most proud of, it would have to be the work that went into working with and understanding the APL sequences, ScrollViews, TouchWrappers, and Frames. I spent countless frustrating hours trying to work with and understand how all of these pieces work with each other and how to use them to implement my user interface. When something is so difficult to master, the reward for finally getting it to work is all the sweeter.
What I learned
I learned how to use APL to create something new and entirely different from anything I've done before. It was a lot of fun, and the tools I learned will help me develop many more skills to come.
What's next for Recipe Magic
I'll keep enhancing it and adding features over time depending on what users find interesting and important. I would like to add more functionality and hone the features to be even more worthwhile. I've also integrated an item search functionality that allows users to look up ingredients, tools, and other items directly through the skill using the Amazon item search api, and this is something I would like to expand upon in the future as well.
I would also love to integrate other recipe apis into the skill in addition to the Spoonacular API to offer more recipes to users!