Suggested UX improvements

[starryeyez024]

Hi Hernan,

This is a really neat idea and I love that you are trying to make it easier for people to avoid food waste! 🙌

Here are a few ideas on how to improve the User Experience of the app. I think right now its too many clicks per food item, and thus too time consuming to be very useful.

• Add ability to Import CSV list of items
• Add ability to Sync with Trello ( I have a meal planning board I use while shopping. If instead of archiving items, i drag them to the "purchased" column in Trello and it synced with this app, that would be fantastic! https://trello.com/b/hheLKeR5/meal-planning-template
• Instead of a dropdown select list, show the full list of items that you can drag and drop into the items list; or tap to select them then batch move them to the items list https://blog.prototypr.io/building-a-responsive-drag-and-drop-ui-5761fd5281d5
• Add a default expiration date of 5 days to all items, and then allow people to customize if needed.
• I don't understand why there's a repurchase button or why that is useful?

[htothenan1]

Thank you so much for checking out my project! It means a lot that you would take the time to write your thoughts and suggestions.

Your comment about too many clicks made me think a bunch, and you're absolutely right! I believe the main problem may be that you have to go back into your Items List after adding it, select your item, and do all the clicks to confirm the date. That IS a lot of clicks (and time), for sure.

I'm wondering if a simple modal right after clicking 'add' button might be cleaner. This way, you could quickly review details, and set a use-by date before confirming its entry. That seems more "set-and-forget" for each item, and would at least get rid of some clicks. I could also clean up how many clicks it takes within the calendar as well. Thanks for that observation!

I have some hesitation about being able to import external lists into the app, because I think it might lead to some cluttering and stale items. I want to avoid users logging ALL items that they have in their kitchen, and only items that can spoil within 2 weeks. Perhaps I need to do a better job explaining this point to the user.

A little context on the food items in the select dropdown: These 71 items are a cross section of the most common (spoilable) grocery items bought, and the most commonly found food items in landfills. If an item can stay good for months, I wouldn't consider it useful to have that logged in the app in the first place.

I LOVE your Trello integration idea, and will definitely see if I can't get that done. Such a cool idea! I also think your suggestion to replace the select dropdown is an interesting one. I'm having a hard time visualizing the UI, space wise. I'll think about it some more and get back to you.

Repurchase button explanation: when you add an item from the list, that option gets removed from the select dropdown list. This choice was made to (1) avoid you from entering the same item twice and (2) speed up finding items by shortening the list.

However, as a result of this choice, you cannot add an item until you have 'completed' that same item in your list. For example, lets say you are about to finish a bag of spinach, so you buy another bag of spinach on a grocery run. This is when you would use the 'repurchase' button to log that new bag of spinach. I also hate the button, but haven't been able to figure out a workaround.

Thanks again for the review, I really really appreciate it!

[htothenan1]

@starryeyez024 Hey there, I've made some changes to the UX of adding items. I think it alleviates a lot of the extra clicks that it was taking.

I decided to add a confirmation modal when you click 'add'. Within this modal, you can set a Use By date before confirming its addition into the db.

I also took your advice to add a default of 5 days if no date was chosen. This essentially makes it so that there are no gray backgrounds possible, since an item will always be saved with a date. I think this really simplifies a lot, so thank you!

I also got rid of the 'repurchase' button. Aside from the fact that it is confusing to explain, the button had also introduced a couple of other of bugs, so I'm glad that its gone. I also realized that the original purpose of the button was for an edge case that won't come up often.

I would really appreciate if you could take another look, and see if you think it makes the app more useful overall.

Again, thanks for the efforts!

[htothenan1]

Scratch that! I ran into a few bugs that were mobile only (the items were double entering from the modal for some reason), so I took the modal out. I did keep the 5 days as default, and kept the repurchase button off, which i think are still great improvements.

[starryeyez024]

Hey Hernan,

No problem, I am glad to help the avoid-food-waste cause! I started a food waste blog myself if you want to check it out. :) http://ecofoodietips.com/

The app is definitely simpler now, well done! I do wonder about the value of showing a toast at the top of the screen for each item though. I can see that my item is now in the list, so I feel like the toast is redundant (and perhaps distracting) maybe?

I want to avoid users logging ALL items that they have in their kitchen, and only items that can spoil within 2 weeks. Perhaps I need to do a better job explaining this point to the user. Fair enough, but then again users could decide for themselves if they want to log lots of items or only some important produce items? Thanks for the context about the most-spoiled items being the ones in the list. :)

I would do backflips if there was a Trello integration! I need to revisit my template as some things in Trello have changed. And I am campaigning for them to include automation when a board is copied but so far no luck, so i have a long video explaining to people how to set up the automation.

RE: replacing the dropdown list, I was just thinking that using a model like trello does (drag/drop cards) for the UI is a small bit of time savings in terms of actions:

• Currently: click, scroll, click, click. (4 actions)
• Trello: (maybe scroll if needed), select, drag/drop motion. (2-3 actions)

but also the added advantage of being able to see more items at a glance, vs having everything tucked into a small select box. Again, just an idea for you to consider.

One other question / idea, does your app do push notifications? (is it actually an app in the app store or just the mobile version of the site)? I was wondering how people get alerts to eat their avocados on time, lol.

Thanks for hearing my ideas and for building such a neat tool, cheers! 🤝

[htothenan1]

@starryeyez024,

It all makes sense now! I would tell you to follow me on twitter, but we already follow each other! Super amazing that you've already put so much critical thought into reducing food waste at home. I'm quite grateful that you found this project and have decided to lend a helpful hand. I'm sure you agree, but there are just so many great benefits to living in a way that emphasizes minimal food (and non-food) waste.

When I made that lifestyle change, I was amazed at how many facets of my daily life improved: 1) Immediate money saving 2) Increased appreciation for raw ingredients 3) I became a much better cook 4) Improved relationship! (my wife really loved all the new kitchen efforts) 5) Further hidden savings because of lifestyle change (less take-out, cheaper per-meal cost)

A little important background about this project: The last company I worked for (Better Therapeutics, I was laid off at the end of March) was building a mobile app (react native) based on CBT (cognitive behavioral therapy) principles to help patients who have type 2 diabetes. Basically, the patient uses the app to track all of their important health numbers. The app also teaches the lessons and skills necessary to actually bring those health numbers to a better place. The skills are delivered through interactive educational modules. The FDA just approved the mobile app, so soon doctors will be prescribing a certain number of months of app use, instead of traditional medication. Crazy stuff, if you ask me!

I'm convinced, through my research, that digital CBT can be used effectively to improve one's food waste behavior. I see food waste as a bad habit (comparable to smoking) that is part cognitive, part emotional, but totally improvable. Ultimately, I want to build the best possible app to help users reduce their food waste through (1) Keeping track of grocery items (2) Intentionally setting goals for consuming those items (3) Helping you find new ways to consume those items (4) Teaching you the skills and lessons that are needed to live a lifestyle that promotes minimal food waste. These 4 goals are basically carbon copies of the goals from my last company (tracking, setting goals, teaching new ways to think, teaching skills related to health and diet), just set to food waste.

So I've added a new little feature that I think is super cool (maybe its just me lol):

• When you add a custom item, now AI (open ai) will generate best practices storage tips for that item upon saving to db.

I think, in a way, this paves the way to have your type of drag and drop feature for the 71 dropdown items. Its admittedly awkward to have two 'add' buttons, so we're on the same page there. I was thinking perhaps we can have a scrollable (since its 71 items) section, where you can drag and drop single items from left to right. That way, we can just keep the 'add your own' section below. boom. I think it can work!

I know we are on the same page with this: The item logging needs to be as intuitive, and fast as it can be. Otherwise, NO user will do it for every grocery item, every grocery run. I love your emphasis on number of clicks. Getting rid of one click really means cutting 25% or total time that it takes to sync your kitchen and your app. That's huge, UX wise!

I decided to start this project as a mobile-friendly web app, with the thought that it will one day become a mobile app. Right now, I have it pinned to my homepage just like an app, which is actually working surprisingly perfect for me:

I think that I would only justify making it a mobile app is if I ever want a camera feature. I think accessing your camera to do anything logging wise is dangerous because it adds so many seconds to the overall process. Maybe you can convince me otherwise.

In the spirit of A/B testing, I have commented out the toast notifications for adding items. I'm not sure I agree with this decision, but maybe I'll change my mind after living with it for a while 😄

I've thought a lot about push notifications for expiring items. It would be relatively easy to implement, but would it be the right choice? I know that with the other 'pantry tracker' apps that I've used (and i've tried them all), I found those notifications to eventually be annoying, especially when I inevitably stop using the product as intended.

An alternative idea: How about receiving a single email every day, that has a few recommendations (recipes, tips) based on what you currently have to eat the soonest. We can make it a 'daily newsletter' of sorts. This way, it is much less annoying to ignore as a user. Also, it opens up a whole new avenue for content creation.

Sorry to go on and on. Thanks again!

[starryeyez024]

That is really cool that doctors can prescribe healthy habit-building instead of just pharmaceuticals!! Hooray! 🎉 🎉 🎉

I was thinking perhaps we can have a scrollable (since its 71 items) section, where you can drag and drop single items from left to right. That way, we can just keep the 'add your own' section below. boom. I think it can work! That sounds spot on. :)

In the spirit of A/B testing, I have commented out the toast notifications for adding items. I'm not sure I agree with this decision, but maybe I'll change my mind after living with it for a while Thank you, I already love it, its so much faster! Maybe you can consider removing the toast after items are marked as finished too?

I think you are right about the mobile app, it's not necessary... your app works perfectly as a web app on mobile! And the camera feature probably isn't all that useful since most produce likely won't have barcodes to scan anyway.

Re: the notifications... for sure it could be annoying... but really the max notifications any user would see is 1 per day right? If I have 5 items all expiring today, I would expect those to all roll up to one notification which would say: "Reminder: today may be the last day to enjoy your apples, avocados, kale, oranges and lettuce." That being said, I really like your idea about the recipes and tips on how to use (including freezing, roasting, pickling, etc). It would be cool to allow the user to choose though? I'm at the point in my food journey where I know how to use up the veggies, I just don't want to forget about them. And I get too many emails, lol. I am much more likely to forget to check on my min-waste app, I think the notifications feature would really be the icing on the cake, making it worth it for me to input the data in the first place.

A couple of asides: an easy win for improving the UX of the Login / Signup functionality can be simplified by just having Login | Signup at the top of the screen instead of instructions to click a button, then choosing login vs. signup. Arguably you really only need the one link, "Login". Most people will understand that if they click a login link and don't have an account yet, there will be an option for them to create one, which indeed you already have. (Also fwiw I see the successful login toast twice when I login).

And on mobile when I scroll all the way down, there are some issues with the transparency of the cards & buttons over the footer.

Plus a small random thing.... kiwis are not in the list of produce! ;) I just bought a nice little bundle today and couldn't add them, lol.

Thanks again for all the collaboration -- and for making an app to make the world a better place! 👍🏻

[htothenan1]

Ok Kendall, here's the updates:

1) I simplified the Login button atop the landing page navbar, as you suggested. I also removed the successful login toast, since it felt redundant.

2) Footer is now just at the bottom of every page now, no more fixed floaty transparency.

3) Kiwis has been added to the list 😄 (funny, I also picked up 3 kiwis yesterday!)

4) Removed the toasts for item completion

5) I'm going to do a bit of a deep dive on mobile notifications from a website. It's not as straightforward as I thought it would be, but I am coming around to the idea of its value.

6) Starting a new branch for some drag n drop testing! I think it would work especially well, considering those two divs (Item Logger and Items List) will always be side by side (mobile). Thanks for this suggestion, going with it!

Also, if you ever get the itch to start your own branch in this repo and try any new features out, feel free to! I'm totally not defensive about my code, and always welcome my ideas and opinions being challenged often.

Thanks again for all the efforts, Kendall!

[htothenan1]

@starryeyez024 Here's my first attempt, no libraries. But I might need one, because I'm guessing this doesn't work on mobile as is.

https://github.com/htothenan1/min-waste/assets/50812996/fc0ec564-1eed-44e4-8d8b-ad2153aca3c6

[starryeyez024]

Hey Hernan, this is looking awesome! 👏🏻 👏🏻 👏🏻

Also, if you ever get the itch to start your own branch in this repo and try any new features out, feel free to! I'm totally not defensive about my code, and always welcome my ideas and opinions being challenged often.

Do you have setup / run instructions anywhere in the project?

[htothenan1]

Ahh i don't. However, I think if you clone the repo and I give you the environment variables, you should be able to run npm i after adding a .env file

Or do I add you as a contributor? Let me do some quick research, no one has ever wanted to work on any of my projects lol

[htothenan1]

We've moved on!