My friend David and I love to cook. And for a long time, we nerded out about what makes cooking fun: the endless journey of making something, knowing it can be improved, then trying again until we’re satisfied.
In a way, this process is very similar to version control (git) for software development. Code is never finished; there is always something to improve. That’s how we feel with recipes — next time, we need more spices or maybe less salt.
There’s also the social element. GitHub, in a peculiar way, is an amazing social network. You follow smart curious people, you can see the stuff they make, the things they bookmark, and the people they follow. It’s an incredible way to see all the cool things being created, and it drives you to want to create as well.
So finally, we decided, let’s make “GitHub for recipes” in our spare time together. Everything is a remix — and so are recipes. Every recipe is built on something else, it can be “forked” and modified by others, and we’re sure there’s a fun social element as well.
David is an engineer, he can do most of the coding. I’m a designer, I can design the interface and help out in the frontend. And we can shape and create the features together.
This is strictly a non-for-profit fun hobby. But it’s also something we’ve been unwaveringly passionate about for months. And I want to build it in public — documenting my process as I go.
We only have some nights and weekends to work on this, which turns out to be a great thing. I’m using it as an opportunity to take design less seriously (it doesn’t have to serve business goals!) and I can play around with new ideas and interfaces.
The story so far
So far, we’ve designed and implemented the recipe page, which I guess is the main page of the product.
It is where people view, edit, and fork recipes.
There is a rough design system I’ve been creating: colors, fonts, etc. Because I have the freedom to play around, I’m trying to avoid regular boring interface paradigms: the usual boxes, cards, and buttons and so on.
I want it to look more like a print layout, which obviously is less usable, but here I can take that liberty.
The recipe page is inspired by traditional recipe pages you’d see in the New York Times, or others: intro, ingredients, and steps.
The main divergence, though, is that I really want the editing experience (which is pretty core to the entire experience) to feel like I’m writing on the page. No abstraction.
For us, this was harder to implement, but we got mostly there. Editing is completely WYSIWYG — just click edit and write on the recipe itself. Erase the stuff you don’t want, add the ingredients and steps you need.
We’re also thinking about units: grams, cups, tablespoons. But also imprecise units: a lot of us cook by “eyeballing,” so we’d also need units like pinches, bunches, or maybe no units at all.
For the unit selector modal, I’m trying to experiment. In regular interfaces, we would use shadows to communicate hierarchy and elevation, ie. tooltips and modals are floating on top of other elements, therefore, they should have shadows.
Here, I’m experimenting with forgoing all of that. Let’s give it a shot.
So that’s what we have so far. Next, I’ve been starting to design the version history experience. How do we “diff” or compare different versions? How do we visualize the differences? How does “forking” a recipe work?
This has been very fun and I can’t wait to play around further.