Design! Let's sketch some options for what showing a recipe while cooking may look like!

[zspencer]

Absolutely core to the application will be presenting recipes to the user in a useful way. There are a number of websites, apps and good old fashioned cook books that do this incredibly well. I don't think we really need to reinvent the wheel here, but maybe we can take the time to review some existing means of communicating a recipe, as well as noting what features seem most useful while cooking. (Scaling the recipe up or down? Adjusting individual ingredients?)

[maximegalon5]

Is this something along the lines of what you were thinking? https://balsamiq.cloud/suc7adn/pfz9ib4/r2278

[zspencer]

Uploading a PNG of the interface from balsamiq, so we can iterate in balsamiq and this thread still makes sense:

Stuff I Dig

1. I like that the recipe and ingredients appear to be independently scrollable. SO MANY recipe sites scroll the ingredients out of the way as you scroll the recipe, which is super annoying
2. I like the ability to set the number of people being cooked for.

Stuff I'm not sure about

1. What are the top coverflow-image things supposed to be for? Navigating between recipes?
2. The quantity of actions make it seem like this is tryin to be two different use cases merged into one. My expectation is that the user will have already decided what they want to cook, so elements for switching between recipes may be extraneous on this particular screen. We could try and figure out how to focus them on two jobs-to-be-done for this screen: A) Know exactly what they are supposed to do now and B) Know what they need to do next
3. I think we're relying on words to sign post more than is quite necessary, in particular the for the headings with the word "Step" seems we could rely on an ordered list (perhaps with a check-mark icon for complete steps):
   I.e.
   1. Mix the capidor into the flambid and let it set.
   2. While the capidor/flambid mixture sets, chop the snarklebox into samblinar shaped biddleflaps
4. I like the side-by-side layout of ingredients and steps for a landscape orientation; but it feels a bit scrunched in portrait. Perhaps if we position the inredients above the steps in portrait mode?

[maximegalon5]

Thanks for the png upload. I'll do this next time onward.

Initially, the idea of a picture on the top of the screen was based on the notion of let's make it look pretty, however, as I continued thinking about it, the cover flow images became more about pictures of intermediate steps <- yes not all recipes have them.

I think we've identified some behavior differences that need consideration ie

• Do Users like to prepare Ingredients first and then cook in a sequential manner?
• Do Users like to prepare and cook going back and forth between preparation and cooking.
• Switch the above based on the number of steps and familiarity with the recipe?

To address the above, I like the idea of having a check-box checklist for Ingredients <- I suspect having the Ingredients next to the Instructions, here, may be more usable (Ho)?

Similarly, I like the suggestion of check-box checklists for Instructions too.

Agree, the focus of this screen should be A) Know exactly what they are supposed to do now and B) Know what they need to do next.

I'm thinking we should the above assumptions with a mini Discovery exercise before moving forward?

[zspencer]

I think it's possible for us to move forward without answers to some of these questions, so long as we work from the assumption that we want to build the smallest product possible first. For instance, if the initial version of the recipe screen was the ingredients and instructions side-by-side; with tappable check-boxes that would be "enough" to support a wide set of people.

It's possible people who are beginner level home cooks interact with recipes differently than advanced home cooks. I'd be curious if @Wimsy113 or @colombene have any advice about how we can do observational user research to inform the design.

P.s. We probably should start to assemble a "watering hole" document for recipe box; perhaps a Team Discussion where contributors can drop links to social media posts or forum threads where people discuss the pain-points they're experiencing when cooking from home.

[user512]

After watching @cjerozal's demo, I would love to see if there is a way to filter recipe with a focus on in taking a particular nutrition value.

With the current shelter in place order, it'd be nice to be able to filter recipes by a few key ingredients available.

[user512]

Oh wait this is different from Food with Lots, never mind.

[iGoog]

I appreciate the general concept of scaling recipes, and I know that would also logically change more than just the scale of ingredients for it to work. Some cooks easily scale things on their own, and others like to do things by weight. I don't know how to convert cooking gear with simple logic.

Having the instructions next to the ingredients is great form, and I wonder if alternative presentations of this information are fulfilling the needs of alternate use cases ie: recipe planning and shopping. It would be good to have different views for alternate use cases, and a clear picture of what those are. I think it's actually a very complex question of how differently recipes have been presented in a wide variety of formats, many of which are not that useful when actively cooking as this use case presents.

How much time will it take to prepare? Is it going to include techniques you're still working on learning? Do you have the time and energy to do something extravagent, or only simple? What produce is in season? How much does the meal cost? Will the meal support your health and nutrition goals?

I don't see any kind of timeline within the steps in terms of how much time things will take or when things should be done. I find a largely overlooked part of this in most recipes is paying attention to active vs inactive time, and possibly even a clear way of representing things that should have happened before or after other steps. Were you supposed to cut some onions, marinate something when you left the house, preheat the oven, or stand in high alert so that you don't burn your house down with hot oil? I don't see a representation of categorization of techniques (which potentially could be simple or extravagent). Is it easy to swap ingredients, or see possible alternatives that meet your social, financial, and health goals - and then stash that information?

I am kind of confused about the direction based on the original framing of the project. Would this actually be the primary workflow from which the others are derived? Is accommodating a wide range of cooks actually too broad of a use case? Should we be optimizing for making it easy for people to enter recipes, and deriving planning from the attainable content instead?

[zspencer]

@user512:

After watching @cjerozal's demo, I would love to see if there is a way to filter recipe with a focus on in taking a particular nutrition value.
With the current shelter in place order, it'd be nice to be able to filter recipes by a few key ingredients available.

This is a great point! I think that kind of feedback would fit really well on the issue for sketching options for what the "choose a recipe UI" could look like (#8)

@iGoog:

I wonder if alternative presentations of this information are fulfilling the needs of alternate use cases ie: recipe planning and shopping. It would be good to have different views for alternate use cases, and a clear picture of what those are.

This is an excellent point, I've created a ticket for us to take the time to put together a few personas (#10) and then take those personas and turn them into a Mental Model or Journey Map (#11)

I don't see any kind of timeline within the steps in terms of how much time things will take or when things should be done. I find a largely overlooked part of this in most recipes is paying attention to active vs inactive time, and possibly even a clear way of representing things that should have happened before or after other steps.

This is also a really great piece of feedback, I wonder if @Wimsy113 / @colombene or @maximegalon5 have some thoughts on how this information could be presented?

I am kind of confused about the direction based on the original framing of the project. Would this actually be the primary workflow from which the others are derived? Is accommodating a wide range of cooks actually too broad of a use case? Should we be optimizing for making it easy for people to enter recipes, and deriving planning from the attainable content instead?

Oops! I just realized that this particular use case was not part of the draft MVP I tossed together a few months ago. See the "How" section of the README: https://github.com/zinc-collective/recipe-box#how.

Re: Who are we targeting - Great question; I've sprouted an issue for defining and prioritizing our Personas

P.s. I think this is your first comment on a Zinc project! Thank you! We keep patronage records to reward folks who contribute thoughtful insights and improvements. I've given you your first few points as a token of my appreciation; which (assuming we eventually make some $$$) entitles you to a proportional share.