Just got v0 of my side project out the door: GoodPlates, a minimal recipe website.
Hi all, I just purchased the domain for my side project last week. Good Plates is designed to be a minimal website for finding recipes. I wouldn't say that it's complete but, in the spirit of building in public, I wanted to share this milestone. I am open to feedback or any way that I can improve the site.
Nice to see some more projects in this area. I tried myself with some ideas that never really took off. I like the "removing choice choice paralysis" approach you have taken. Good luck!
Thank you!
Feels good to get started!
Trying to figure out what to have for dinner is a weekly struggle for my wife and I. She checks Pinterest, and I do a web search.
I assume you'll tweak your code for viewing on mobile pretty soon. Looks like a desktop version right now.
Yes that is correct, I wanted to get the desktop look / feel set before I started optimizing for mobile.
Hey congrats, and thanks for sharing your milestone!
My biggest feedback is to think about what "minimal" means to whoever visits your app.
Is it that it helps them do one thing really well and nothing else or is it that there are very few elements on the page?
Right now it seems the latter.
Thank you so much for the feedback! I am going to respond to your comments inline:
I think this could be solved with some text with the spinner/ For example, if it said "Loading recipes...", that should help the user understand what is going on. What are your thoughts?
The website is just static HTML, CSS, JS. The spinner shows up when the browser makes a request to the backend to retrieve the next batch of recipes. I agree with adding text underneath the spinner to help communicate what's going on.
I like the idea of minimizing the amount of work that is done. I think that one potential option is to store recipes in a cookie so that future page loads do not need to make a network call. I'll add this to my backlog.
Most recipe websites have a lot more information they are showing and, as such, spread out their layout. For my use case, I wanted to minimize how much page real-estate the recipe took up.
Edit: I will try spreading out the content and see how it looks
The pictures come from the recipe websites themselves. Some of them are smaller so my site tries to scale them up, which should not happen. I will decrease the image size to make sure the resolution does not get impacted.
I think rather than telling me what the spinner is specifically doing (ie loading recipes), make the page the spinner is on provide that context. If it's clear that your website is going to suggest interesting recipes to me, and you're doing some sort of algorithmic search of some kind, it would make sense that the spinner is representing that search is taking place.
Wen I first load the page, I see "Good Plates" and "Home" and "Preferences" and a spinner for 3-5 seconds before anything else pops up. There's no indication of what this website is. For all I know it's going to show me reviews of kitchen ware or printing plates.
You've developed this website so you know exactly what it's doing. This is a weird experiment, but pretend you're a stranger you've never met, who is moderately interested in cooking and not tech savvy whatsoever. And somehow you clicked on a link to this website. You have no context for what it is, and you have a short attention span. If websites/apps don't explain to you the value that they offer within 1, maybe 2, seconds of clicking on a link, you're going to move on.
So try stepping into that person's shoes and write down your observations. Then compare those to what you, as the developer, are trying to accomplish. That might help highlight what needs to be addressed.
I can tell you when I open the page, wait 5 seconds for a spinner, and then see "Plum Delicious Upside-Down Cake" with a picture and still no context, I am confused. I am not sure why I am being shown this. Is this a curated recipe? Is it random? I have no idea. Think about how you can show your visitor that your website is offering something helpful to them. Why should they stay, why should they bookmark the page?
Back to the spinning loader, I understand you're doing some backend stuff, but it seems to be taking a really long time. When I see something take that long to load, I usually expect it's cacheing a lot of things in preparation for me viewing a lot of content. But it seems after only a few recipes, it needs to reload again.
Is your backend requesting the images from the third party recipe sites, or is your frontend? If you're waiting for API requests from multiple third parties for each time you're loading a page on your site, it would make sense why it's taking so long.
I would also recommend lazy loading the images on the frontend. If that's not possible, maybe hardcode some recipes in so that there is something to see while the user is waiting, and then get rid of the spinner.
Hope this helps!
I like this idea. I built a custom index so I guess technically, it is doing a search.
I was wondering about this and I was asking myself if I needed a landing page. My goal was to minimize the clicks the user had to take to use my product. Right now, it's 0 clicks because as soon as you get to the home page, you're immediately shown recipes. The downside of this is that if the purpose of the site is not clear, users will leave (as you pointed out).
I totally agree. This exercise can be difficult to do sometimes :)
I send 5 recipes from the backend to store on the frontend. I've increased this number to 10. I kept it configurable because I wasn't sure how fast users would go through recipes.
No, all the recipes are stored in my DB. I think the long wait time might be from the Lambda function cold start.
Edit: I just reread your comment. You are correct in that the images are coming from 3rd party recipe site. The recipe metadata is coming from my DB.
so the idea behind this is something like the "I'm feeling lucky button" on Google, but for food recipes and some preference adjustment?
Sort of, yes. The main objective was to reduce choice paralysis. Most of the time, recipe websites will show a page full of recipes and it can be overwhelming for the user. This way, users can look at a particular recipe on its own without other "distractions".
Thank you for elaborating, looks good 🍻
Looks cool. I'd try to do some usability testing with friends and family to find areas of the interface to improve.
Thanks! This UX is actually the result after usability testing. Initially there was a lot more information on the screen for each recipe. The feedback that I got was that the image should be the main focus and users can click / navigate somewhere to learn more.