Design

The first big milestone for this capstone comes up in just three weeks. At that time, we need to have a tangible .apk file, with a working product that showcases our current progress to our ‘client’ (the instructor). To that end, we’ve spent the last few days focusing on design.

In projects like these where I’m wearing all the hats (frontend, backend, QA…), I like to map out how I imagine the UI before thinking about the actual program architecture. It’s helpful to visualize what exactly we want to show to the user before making decisions for, say, what data structures we want to use to represent the end-result.

To start out with, a rough sketch is great for brainstorming and workshopping ideas for little cost. Just sketch a picture! When drawn- the problem is right there in front of you instead of having to spend the precious extra braincells visualizing a concept in your head.

My first pass at creating a wireframe for our app looked like this:

This first pass at our app design led to a few insights. First- we definitely want a navbar. These are relatively standard these days in mobile apps, but it’s good to get visual confirmation that the overall user experience works; however, our also noticed that the bar is kind of busy with five icons. The navbar should only include navigation to the most-used functionalities of the app. In the end, we decided to remove the barcode launcher because we felt that it would make intuitive sense to just add that navigation to the Pantry screen, and because we did not want to code a stretch goal immediately into the navbar.

The wireframes also got us thinking about the architecture behind the design as well. It became clear that we would probably want a kind of recyclerview for the Pantry and Recipe Search screens. We might want to re-think the Calendar screen because integrating all the functionality of a full-fledged calendar into the screen could be ambitious with everything else we need to do. For the filter screen- we might want to keep things extremely simple with radio buttons or checkboxes to represent boolean values.

Taking that feedback, I made digital wireframes that culminated into the following prototype:

This prototype is simply a series of digital wireframes built and animated using Figma’s software, but it’s a great way to get a sense of an app’s look and feel without having to invest any amount of time worrying about the code. It makes sharing and workshopping ideas easy, and when it finally comes time to write down some code- we can do so without having to make UI decisions at the same time. We’ll just build to spec. It’s also a great visual for showing design progress to the less technical. A customer can look at this and get a real sense of what they’re buying.

Design: MVP & Stretch Goals

One interview question I’ve gotten a few times is:

“Can you tell me about a time that you knew you couldn’t finish an assignment, goal, or project.

Random Interviewer

The first time I got that question, I think I was still in the middle of my first degree, and my thought process was something along the lines of, “Pssh- I’ve always finished everything I’ve ever set out to do,” which of course is pure cringe-worthy arrogance. A lot of the times, it seems like I never finish anything– because nothing ever feels finished. There’s always more to do.

Enter the concepts of a Minimum Viable Product (MVP), Stretch Goals, and Acceptance Criteria. A MVP is exactly what it sounds like– the minimum amount of features needed for the product to work for whatever predefined use case you’ve thought up. It kind of reminds me of what we used to call getting a ‘perfect score’ was for getting a passing grade on a licensing exam in my old job (72%). Barely passing meant that you studied the ‘perfect amount’ to pass without putting in unnecessary effort……..

Anyway- stretch goals are the opposite. They’re the nice-to-haves. For the over-achievers. Or, to put things another way, for those who want to go the extra mile (which might not sound so goofy once we’re talking real stakes with real money).

To that end, we’ve decided on a tentative list of MVP user stories and Stretch Goals for our Meal Planner project. Here they are in all their glory:

MVP

  • Account Creation (user auth)
  • Users can add and save ingredients (which persist)
  • The app will return potential recipes that fit the user’s saved ingredients

Stretch Goals

  • App will track likely expiration dates for saved food items
  • User can favorite recipes and save them for future use
  • User can filter recipes based on criteria (such as food genre)
  • Recipes returned are sorted to maximize ingredients on-hand, but also
  • can include recipes with missing ingredients
  • User can generate a shopping list with missing ingredients from chosen recipes
  • Barcode scanning

Because it’s so early in the design process- there is still plenty of work to be done for each of these user stories (just what does Barcode Scanning mean?). They’ll need to be broken apart into bite-sized chunks. Potentially weighted by both difficulty and importance. But it’s a start.

Hello world!

Hello and welcome to my own personal blog, placed here in an effort to document the development process for my team’s capstone project. Let’s get right into it.

Meal Planner App

Yes, the name needs work-shopping. I’ll add it as a TODO comment.

But for those of us with busy lives (so all of us)- the basic problem my team and I are trying to solve here is a common one: it’s 4:00pm– you’ve already eaten cereal and/or leftovers for lunch, and you’re completely uninspired for to what to do for dinner.

What To Cook indeed

The problem here, I believe, is more likely one of decision fatigue, rather than a problem with cooking. The actual act of cooking isn’t so bad: a little choppity-chop here, a little sizzle there– just throw on a podcast and get to it. The problem comes with all the tedium of deciding what to make and figuring out if you have all the ingredients for it (which I somehow never do). Presumably, that process becomes easier as one becomes more knowledgeable chef with a methodically-stocked kitchen– but that’s definitely not me at the end of the workday.

Pictured: Not Me

Thus- the Meal Planner App. This app will allow users to track groceries they buy and ‘serve up’ potential recipes in order to help user’s answer the question: ‘What’s for dinner?’. Browsing this app for recipes should feel like browsing Netflix for movies to watch: scroll…. scroll… hmmm- that looks good! And then the decision’s made. No need to navigate a myriad of recipe websites and long-winded recipe blogs (the irony doesn’t escape me). No need to go searching through the pantry or fridge to see if you still have turmeric or not. All that ought to be taken care of, so that you can do the fun stuff– cook.

Like this, but food

That’s the idea, anyway. Follow along to see the app come to fruition. Or why it doesn’t already exist.