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.
Around one year ago, I sat down and assembled a flow that I feel best describes my process as a Designer and Developer:
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:
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?
What properties make up a recipe component?
- Name of the recipe
- Ratings and views
- Intended serving size
- Estimated duration
- Food type categories and cuisine
- Other relevant tags and metadata
- Optional story behind the recipe
- Other possible notes
- Public comments
What actions do we want user’s to be able to perform when reading and interacting with a recipe?
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:
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:
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
- Mark as “attained/in-stock”
- 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.
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:
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:
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.