Building Consumer Apps Part 3: Preheat Oven to 350 Degrees


Hello again! In Part 1 of this series, I suggested a technology stack to use in building a theoretical cooking app called CookMe. In Part 2 of this series, I went a little in-depth into my process for building apps, introducing the Steinbaughian Pillars of App Development.

Up to this point, I’ve talked a lot about tools and techniques for app development, but haven’t actually done any work. In this section, I want to provide a little more meat for the main course of our cooking app, if you will. I’m going to define an initial feature set, then provide some mockups in order to start visualizing how the app might look.

Step 1: The MVP

We need to define what we want the app to do. Obviously, with any project you can start brainstorming features that you might want to include, but you also don’t want to overwhelm the user with a bunch of stuff that turns them off, makes them delete the app, and start sending you hate mail. So it’s best to start with a feature set that is core to your app.

In the case of CookMe, we know that we want the user (chef) to be able to create, edit, and view recipes, as well as create a user account so that we can tie recipes to a particular user, in case they log out or switch to another device. This actually seems like enough for an MVP (which stands for minimum viable product). In future releases, we can add stuff like sharing recipes with another chef, following another chef, saving another chef’s recipe to your own account, uploading images to recipes, and so on. I’m also going to start with the web app, because creating recipes involves a lot of typing which can be cumbersome on mobile.

The reason to do an MVP is for market validation. By first creating the minimum viable product that’s core to your idea, you can explore whether or not the idea is actually getting traction before going further. It doesn’t make sense to put months of development work into creating some grand recipe app with hundreds of features if nobody even wants a recipe app to begin with. It may well be that nobody wants to cook with an electronic device nearby because it might burn or get food on it or something. You just never know how the consumer market works — it’s full of surprises.

While we’re at it, we might as well define a target market. For the cooking app, we’re going to want to target tech-savvy people who also cook for themselves, so they’re probably between the ages of 18 and say 40. And due to centuries of constructs arbitrarily dictating what is and isn’t a female responsibility, the majority are probably women. The female thing doesn’t really have too much of an impact on how we’re gonna build the app. I guess we could try to make the design bright and inviting — just look at Pinterest’s design, which targets women, versus something like Razer which targets primarily male gamers. But the main impact is how it might influence marketing channels.

Step 2: Back to the Trello Board

OK, so we’ve got our initial feature set, now you’ll need to decide for yourself how to organize it into concrete sections, lists, and individual tasks with owners.

You might make one board for server-side work and one board for client-side work. The client-side board might include mockups, since it’s also really easy to attach images to a card.

As an alternative, you could consolidate everything onto one board, which makes the project a little more collaborative.

Step 3: Mock Me

Just by sketching out an idea, you can usually immediately see what does and doesn’t work, which saves a lot of development time. And what’s in your head might not look as good once it’s put onto a 375x667 pixel rectangle, so it’s worth having some conversations and going through a few design iterations beforehand to figure out what’s possible and essential to the app.

For CookMe, there’s a user flow that’s common to every consumer platform, so we can skip that (e.g. screens for creating an account). So let’s focus on the other screens needed for the MVP:

  1. A home screen that every person will see when they visit the site, which includes a button to sign up (I’m going to skip this for the sake of time)
  2. A component to create or edit a recipe
  3. A component that displays all of my recipes
  4. A component that displays the ingredients and directions for a specific recipe

This is pretty much the heart and soul of the app. The app can’t exist without all of these views. Component is a term used a lot in React, which I’m using here to mean some sort of object that gets displayed on the screen.

I’m ready to hit Sketch up at this point, but first there are a few considerations:

  1. The user is going to be using the app in a cooking environment (unless they’re creating a recipe, which they might do in their off-time on a desktop or laptop). Space is usually limited. Therefore, any text should be large and readable so they can easily see things at a glance.
  2. Chefs tend to get their hands messy while cooking. We’re gonna need to minimize the clicks and user interaction necessary, at least while viewing a recipe.
  3. We could go with either a 1) flat design, 2) a (queue the big word that nobody uses anymore) skeuomorphic design, which might pay tribute to the classic recipe book or recipe card, or 3) something like Google’s material design, which is somewhere in between.

Here’s what I came up with…(drumroll please)

Recipes View
Create Recipe View
Recipe Card View (Ingredients)
Recipe Card View (Directions)

It’s not going to be a final product, but it’s not bad for a start. I’m guessing most people probably won’t have more than about 20 recipes, so the collection of cards works well without too much scrolling. When the user clicks a recipe, they immediately see all ingredients so they can get them ready. Then it’s just one click to toggle the directions and get to cooking all the things. By displaying the directions one at a time, we can make the text clear and readable as the chef hustles about the kitchen.

It might be a little plain, but remember the goal is for ultra clarity. The font sacrifices some readability but adds some originality, a little reminiscent of an old print card. But overall the design is flat and modern.

That wraps it up for this section. We defined the feature set for our MVP, listed individual tasks, and mocked up important screens.

In Part 4 of this series, I’m going to dive into Golang and React, including some code! Oh snap.

Oh, one last thing, if you like to cook:

  1. Preheat oven to 350 degrees
  2. In a skillet, melt butter. Quickly remove from heat and whisk in sugar and eggs.
  3. In a separate bowl, combine buttermilk and baking soda. Stir into egg mixture.
  4. Stir in flour, cornmeal, salt, and corn.
  5. Pour batter into a greased 8x8 pan.
  6. Cook for 30–35 minutes or until cornbread reaches desired consistency.
  7. Serve with honey butter.
  8. Read Part 4 of this series.

Seriously though, try it — it’s delicious.