🍲 Dinner Picker — The problem & design
👋Intro
Hi, I’m Kieran Witt and this a post in my Ideas to Products series where I share my journey designing and building one of my many ideas and what I learnt along the way.
Over the years, like many others, I’ve accumulated a long list of ideas. Some stored in memory, and others resigned to a notebook where they’ll probably live forever. The list of ideas has been growing, but my ability to bring them to life hasn’t. I’m learning to code to change that.
📦 Contents
- 💔 The Experience
- 📝 Summary Of The Problems
- 🎯 The Problem I’m Fixing
- ✨ The Solution & Its Design
- 🚧 Limitations
💔 The Experience
For as long as I can remember, Chloe and I have never been any good at planning our meals for the day ahead or even the next week. I put this down to our collective laziness, busy schedules and indecisiveness. It always seems to be the case that we have nothing in the cupboards (because we didn’t plan), so we’re forced to make an on-the-spot decision that neither of us can agree on. Because of this, we end up eating the same things on rotation: spaghetti bolognese, chicken and leek (a speciality of mine), pizza, fajitas or worse, a takeaway. Our indecisiveness and poor planning has limited our culinary experience and become a bugbear of mine. Seeing I’m on a journey to learn how to code, I thought I’d try to optimise this part of our lives with a tool that does the hard work for us.
📝 Summary Of The Problems
- I’m too lazy to plan my meals manually.
- Chloe and I find it difficult to decide on the spot what to eat for the day.
- Meal planning is a bit of a chore that I’d rather not do.
🎯 The Problem I’m Fixing
Every week Chloe and I struggle to decide what to eat. Overwhelmed with choice, we frequently make poor decisions like getting a takeaway or choosing the same thing. We need a solution that provides us with different options but removes the decision-making process from meal planning.
✨ The Solution & Design
I decided to call this project Dinner Picker, nice and simple and does what it says on the tin. Whilst jotting down the problem, I already had a pretty firm idea of what the solution needed to be. Somehow I needed to create a product that enabled a user to add and remove meal options from a list and then randomly select seven of them from said list, one for each day. I looked across google for similar randomising type products and gathered a bit of inspiration. The most popular one I came across was the wheel of names, a simple and effective solution. But, there was a problem; it only caters for one random decision at a time. I needed seven, one for each day.
There were a few other solutions I found like http://www.dammitwhatdoyouwant.co.uk/ and https://spinthewheel.app/what-to-eat, but none looked like what I’d visualised my attempt at solving the problem to look like.
So I put pen to paper and started to draw out my concept. First, a basic user interface and second, the logic that would drive it. I ignored all the steps I set out in my first article about designing a solution mostly because this is a self-serving project making the need to conduct user interviews pointless and the thought of monetising it redundant and silly. Also, being brutally honest, I couldn’t be bothered to spend a great deal of time mocking up something that will only be used once or twice a week. Keen to solve the problem, I ended up with a straightforward drawing.
And an outline concept that would:
- Take a list of user input meals, takeaways and restaurants;
- At the click of a single button, randomly select a meal for each day of the week;
- Making sure that each chosen meal would be different; and
- If an option on any of the days were ‘Takeaway’ or ‘Restaurant’, then I’d be able to click the day, and it would re-spin that day’s meal and choose a type of takeaway or restaurant
With all of this in mind, I then got to visualising what this solution would look like. Going into this, I knew, unlike the Deuce project, I would have to build some form of a user interface, at least to press a button and see what meals were randomly chosen. This meant I’d need to get my hands dirty with some HTML and CSS.
❓ HTML: HTML stands for Hyper Text Markup Language, and it’s the standard markup language used to create websites and webpages.
❓ CSS: CSS stands for Cascading Style Sheets. It’s a language that describes how different bits of HTML, called elements, are to be displayed on screen, e.g. font, size, colour and position.
To complete my design, I used a web app called Figma, a UX/UI web tool for mocking up web and mobile designs. I chose to use Figma instead of Miro because I needed to focus on the design more than the workflow. The Dinner Picker is quite a simple solution, and the traditional pen and paper did the trick for the workflow. Here’s what I managed to mockup. It’s not super pretty, but it’s clear what you’re looking at and how to use it—a nice simple UI.
🚧 Limitations
As with every project, I try to reign myself in. My imagination gets away from me a bit, and I think of creating a wonderfully designed and interactive solution. My coding skills are not quite there yet, so I set some ground rules to make sure I actually output something I can later come back to and iterate.
The limitations this time round were:
🚫 No animations: When visualising the concept, I thought it would be cool to have the cards showing the meals chosen spin like a slot machine. I have a few thoughts on how to build this thing based on building Deuce, but I don’t have the faintest as to how I would animate something, nor how to make an animation conditional on the click of a button, so I decided to put this to one side for now.
🚫 The takeaway and restaurant feature: I decided this wouldn’t be in the MVP; if there was something Chloe and I were good at when it comes to dinners, it’s picking a takeaway or restaurant, plus we want a bit of friction here to make eating unhealthy dinners harder.
🚫 No user input: I’ll be entering the data into the solution from the backend; our favourite meals will be hardcoded, this is for two reasons. I want to do a specific section learning about user inputs and saving them as it applies to a number of my projects. Secondly, I’ll need to build a way to store user inputs so returning users don’t need to re-enter meals. Something I have no experience with yet.
