Recipes

Leo Succar-Ferré
Sep 15, 2016 · 5 min read

or: A 4-day Design Challenge

I love to approach Design challenges as an excuse to experiment, get uncomfortable, learn a new tool, fail a bit, and problem solve; this one was no different.

Process

Around one year ago, I sat down and assembled a flow that I feel best describes my process as a Designer and Developer:

Circled are the steps I focused on the most for this exercise.

Focusing single-handedly on just the Design of a Product, and freeing myself from the many other moving parts, is as rewarding as it is challenging.


Day One: Discoveries

To sketch or to dig?

I often chose to immediately dig and scour the internet for inspirations and proofs of concept. Today, I decided to sketch some User Interface considerations first:

Aside from drawing out some initial UI, I barely began exploring UX and possible brand identity ideas before leaping back online to research.

I spent the rest of the day as a sponge, searching and researching prior ideas on similar products from around the web:


Day Two: Definitions and Designs

Due to the quick nature of this exploration, I decided to work from the inside out. What is the greatest singular “unit” of this product? What will most people be here to discover?

Recipes!

Finalized recipe cards.

What properties make up a recipe component?

  • Name of the recipe
  • Ratings and views
  • Author
  • Intended serving size
  • Estimated duration
  • Food type categories and cuisine
  • Other relevant tags and metadata
  • Optional story behind the recipe
  • Ingredients
  • Procedure
  • Other possible notes
  • Public comments

What actions do we want user’s to be able to perform when reading and interacting with a recipe?

  • Sharing
  • Commenting
  • Saving
  • Editing
  • Printing

Other product-level actions include:

  • Adding a new recipe
  • Searching, browsing, and discovering new recipes

I had my work cut out and got right to it:

Predominant palette used.

I quickly chose the above colors in an effort to display a folksy warmth, or a calming neutral earth feel; with the main colors used being browns and blue greys.

The font choice was easy and to-the-point, Apple’s new system font, San Francisco.

Navigation, search, add recipe, and recipe actions are all located at the top.

The recipe card contains basic information first, followed by expandable sections. The attached image shows all sections expanded for the purpose of explaining:

iPhone and iPad examples.

While I really wanted to go image-crazy here and display giant, crisp, professional photographs, doing so would have been unrealistic and setting up the real-world product with unattainable standards. Instead, I “sprinkle” the recipe card with images in appropriate places, each expandable and scrollable.

For the ingredients section, I added these small but important features:

  • Unit conversion
  • Grouping
  • Mark as “attained/in-stock”
  • Progression
  • Print (located in recipe actions)

The recipe’s steps are stacked upon each other with an interactive progress indicator; as the reader scrolls down, the indicators grows down with them, “connecting” with the next step.

To draw the reader in and help keep them grounded, I increased the font size of the first sentence of each step, which aligns with any optional images that may be attached — both of which act as section dividers, without needing to add extra UI chrome.

The recipe I referenced as placeholder content included a note and I thought it would be a welcomed, optional, section.

Comments were a natural addition, and I wanted the section to feel familiar. Logged-in visitors’ comments are to the left and author and personal comments to the right.

Desktop example and sharing a recipe.

Day Three: Designs

After conquering the full recipe card as a finalized component, I knew I needed to work on the form that would create it:

I started out making this a single page and quickly realized it was futile, one can only scroll so much…

Breaking the recipe creation process into a few, smaller, easier to consume steps, made the most sense.


Day Four: Designs

Feeling the importance of search, discoverability, and taxonomies in a recipe app, I decided to focus on categories:

Categories and food types.

I had a good time making some visual decisions here, but before that happened, I laid out the categories and food types I’d expect to find:

  • Dairy
  • Fruits
  • Grains
  • Meat
  • Poultry
  • Seafood
  • Vegetables

It was actually at the beginning of my process that I considered these categories. The idea being that someone could easily and rapidly drill down into a specific category, ingredient, or even cuisine.


Thanks for taking the time to check out my work. This was a fun exercise. I would have most loved to take this into the animation/motion/transitions phase with a prototyping tool like Origami, Principle, Framer, Craft, or WebFlow, but that’s a 4-day challenge on its own.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store