Design Sprint II: Food Tracking

Note: I originally posted this on Medium on August 3, 2014. It still looks better there.

1-isgwxBtfXiDkq9XnpEAv2w

About my first sprint

In my first personal design sprint, I explored an interface for creating photo layouts. It was based on a series of posts by Jake Knapp (@jakek), which you can find in the Google Ventures library.

Each sprint breaks down into five days:

  • Understand
  • Diverge
  • Decide
  • Prototype
  • Validate

The design sprint was great for establishing an end point and reaching it. Initial excitement for new side project ideas is always really high. Starting is easy. It’s even easier to abandon a side project for the next exciting idea that comes along.

Jake shared my post on Twitter (thanks a million), then Smashing Magazine shared a link on Twitter (and Facebook) as well.

I wrote something that people read—which is terrifying and awesome and humbling. People gave feedback like, “I would just buy a WordPress theme on day 1 and go hiking and fishing on days 2, 3, 4, and 5.” But it resonated with others so I’m running it back.

In this sprint, I’ll be exploring a much different idea—food tracking vs. photo layout. However, the process will be similar except for a few changes.

I’ll be prototyping a native mobile app

The first sprint focused on a desktop web interface. Food tracking takes place throughout the day, and I likely have my phone but I might not be by a computer. I also just think designing and prototyping a mobile app would be good learning experience.

I’ll be using Keynote

In the first sprint, I built a JavaScript prototype using Angular and Packery. I think it was the right choice because drag and drop was so important. And I was focused on designing a single screen.

Google Ventures leans heavily on Keynote for prototyping. For this sprint, I wanted to try Keynote out so I picked a project with a broader user flow.


1. Understand

Let’s take a look at how I currently track food and how existing solutions tackle the same problem.

01-food

Why do I need this?

There are, of course, plenty of existing solutions to food tracking (we’ll take a look at a couple later). So why another one? I’ve tried web and mobile apps in the past and will use them diligently while early motivation is high. But the hassle becomes a bit too much and I stop after a few days.

I want to look at how I can make the experience of food tracking as unobtrusive as possible. Mostly by designing it to my specific needs—though I think others share the same mindset when it comes to food tracking.

How do I currently track things?

Most people are familiar with the concept of counting calories. Counting macronutrients (macros)—protein, carbohydrates, and fat—is similar but less common. You just set your daily targets and try to hit those numbers by the end of the day.

I like thinking of macros instead of calories because it’s more helpful when it comes to picking what to eat next. If I’m low on protein and fat for the day, I know to reach for the sardines instead of a sweet potato. Fewer options leads to easier choices. Which hopefully leads to actually following a nutrition plan.

Earlier this week, I put a monocle on and calculated my macronutrient (macro) targets—protein, carbohydrates, and fat. Then I tracked my food and counted macros in my workout notebook for a few days.

Counting wasn’t too bad. I bought my usuals at Trader Joe’s: ground beef, chicken breast, deli meat, smoked salmon, frozen vegetables, and frozen berries. Everything was easy to portion so I rarely guessed on servings.

With a notebook, hand calculated algorithms stayed pretty basic:

OUT WITH FRIENDS: add 9798 calories

What problems am I trying to solve?

I want to add items throughout the day with as little resistance as possible. Speed over accuracy at this point—I want to add items and refine the details later.

I open and close Messages more than any other app. In most cases (replying to someone), Messages opens with the keyboard active ready for input. I want that experience for tracking food.

I want to glance and see how many macros I have remaining for the day. With my notebook and other apps I can see how many I’ve consumed. But then I have to mentally subtract from my target to figure out what I really want to know: how much I have remaining.

I want to set different nutrition targets for different days. The nutrition plan I’m on has different calorie and macronutrient targets for rest days and workout days. Most solutions let you specify one set of targets.

Success metrics

Google Ventures uses the HEART framework to break metrics into happiness, engagement, adoption, retention, and task success:

To figure out what those are, you need to start at a higher level: identify your goals so you can choose metrics that help you measure progress towards those D7000 goals.

Again, I’m shooting for happiness. Engagement and adoption are better metrics when focusing on designing new features for existing products.

Retention and task success are relevant here, though. I’ll be able to get a feel for if I’d use this multiple times per day. And I’ll be able to count how many taps a task takes compared to other apps.

I’m not thinking about business opportunity right now. My priority is designing something that would be useful for me and it all comes back to happiness.

Lightning demos of existing solutions

One exercise Google Ventures recommends is the lightning demo—a quick look at existing solutions. You can learn so much from this step because someone else has likely designed solutions to the same problems. After extensive research, I’ve found I’m not the first person who’s thought about using technology to improve nutrition.

Here are some existing solutions:

Along with my notebook, I’ve been using MyFitnessPal app for the past few days. Fitocracy Macros seems to be doing a lot of the things I want to be doing. Let’s take a closer look at MyFitnessPal and Fitocracy Macros.


Lightning demo: MyFitnessPal

I’ve seen MyFitnessPal recommended pretty often. It works well. Adding a single item can take a few taps because you refine details on the spot.

mfp1mfp2

MyFitnessPal shines when adding multiple recent items. When tracking food, I end up eating a lot of the same things. I imagine others can relate. MyFitnessPal lets you do this by multi-selecting and adding all at once.

Takeaways: I’ll be thinking about how users will add multiple items. MyFitnessPal also has a quick-add option for calories. You can use this option when you don’t want to do a database search or are just entering estimates. A quick-add option for macros could be interesting.

Lightning demo: Macros (by Fitocracy)

I’ve seen Fitocracy recommended pretty often for tracking workouts. I saw that they have an app for tracking macros, called Macros. Dick Talens, one of the Fitocracy founders, writes about nutrition, intermittent fasting, and strength training. I’m guessing that at least partially led to the Macros app.

2014-08-02 08.28.26

The main screen is a venn diagram showing remaining amounts of calories and macros. It’s simple and delightful.

This screen focuses on remaining values instead of current totals. I really like this. That’s usually all I want to know when deciding what to eat next.

Onboarding is straightforward. It asks a few questions about your goals and lets you select a similar body type from pictures. That’s it—you’ve set your macro and calorie targets, with different values for rest and training days.


IMG_3969IMG_3977

02-food

You enter macro values directly instead of entering food items. Because of this, I think the app is good for people who have experience tracking their food and have good ideas of what’s in their meals.

(Note: The Macros App Store description says an upcoming version will take inputs from a food database. Can’t wait.)

Takeaways: Again, I really like the focus on remaining values. The onboarding process has me thinking about how users will set targets in my app. For this sprint, I’ll assume users have set their targets already.

User stories

From looking at other products, there are already a ton of ideas brewing. Especially because this sprint is for a new product and not adding cheap nfl jerseys a new feature to an existing product. We can design anything, but the design sprint uses constraints to stay focused.

It’s important to pick one or two user stories to work on. Here are some stories that came to mind:

  • I ate and I want to add meal items—quickly. (And dirty. Speed trumps accuracy here.)
  • I want to refine details on what I’ve eaten.
  • I want to see how many macronutrients I have remaining.
  • I want to set goals—not necessary to get more complicated than setting macro totals. This won’t calculate things for you the way Fitocracy Macros does.
macros-does

Sketching out the user stories. Boxes and arrows.

Story 1 is ready for the next step. Stories 2 and 3 go together so I’ll combine them for the next step. Prototyping two stories is enough so I’ll drop story 4.


2. Diverge

Put that laptop away, it’s time to sketch.

1-kvWIg_NXpt7SV7HvxHqqeQ

I went to a coffee shop to sketch. I left my MacBook at home and brought my notebook and printer paper. The printer paper could’ve been enough alone—the notebook was more for notes for this blog post.

After dropping and combine user stories in the Understand step, we’re left with two:

  1. I want to add meal items.
  2. I want to refine details on items and review macro totals.

For each story, I did one diverge cycle: mind map, crazy 8s, storyboard. Here are the results with a few notes.

Adding items: mind map

Speed was one of the main things I thought about while doing the mind map. Other quick apps I use are Simplenote and Messages. I drew a small initial thumbnail of what the opening screen would look like.

mind-map

Adding items: crazy 8s

For adding items, I started with the thumbnail from the mind map and looked at alternate layouts. Maybe you can pick from a grid of recently added items. Maybe recent items are shown with search results.

I also started thinking about arranging calorie and macro values next to item names.

crazy8s

Adding items: storyboard

In the Google Ventures article on the diverge step, Jake Knapp recommends a three-panel storyboard:

I ask everybody to draw UI in the three frames of their storyboard showing a progression: first this, then that, then that.

storyboard

First you open the app and see the view with macronutrient information and your list of items. The keyboard is active.

Then you start typing. The macro counts go away and the item list expands.

Then the new item appears on the list and you can begin typing again to add another item.

Refine item: mind map

In the mind map for refining items, I thought about how the item list would differentiate between complete wholesale jerseys and incomplete items, how I could avoid bringing the keyboard back up, and how I might implement recent items.

1-Uit9t0tlpAOzReZSDjB_TA

Refine item: crazy 8s

I started looking at adjusting individual macro values then realized that doesn’t make sense. The app calculates those values based on portion size. I also started exploring how you could change between different specific search results.

1-jqxrsXz27h7ET--IIA2x3Q-1

Refine item: storyboard

1-uYu6EjSQSGxgACmgKY38Uw

In the single item view, the user first sees the item with the default serving amount. Below that are search results for the item.

Then selectors appear to adjust serving values.

Then you’re finished refining the value and you can return to the overview screen.


3. Decide

Assumptions, conflicts, and a detailed storyboard that acts as a spec for building the prototype.

1-RVmiK8lO1MD7fu02NqJzQA

Assumptions

There will be a food database. Looking up items is a major part of the app. I’ll assume we’ll have one available for actual development. In the prototype, we can still get useful information with a linear demonstration showing how a search might go.

The user knows their macronutrient targets and they are set already. The app will not automatically calculate target values. I also won’t be exploring onboarding and target setting in this sprint.

Users are okay inputting items without refining them on the spot. In other apps, I can be hesitant about adding items because I’ll also have to refine the details on the spot. I think it’d be great to be able to just add them and refine later.

Conflicts

Showing search results while typing vs. Staying focused on just adding and refining later. I think it’s really important to just jump into the app, enter items, then exit. I’ll add items and refine them in a batch later. I want to get rid of any resistance to adding items. So I’ll keep search results out while typing.

1-ckCoaDXD5i6Vy9G6ExkGOw

Using the default picker vs. Using a different increment gesture. I used Bit Timer to count down when doing the Crazy 8s exercise. It has a neat way to set activity and rest periods.

I thought it’d be cool to do something similar instead of the default iOS picker.

In this case I’ll stick with the default iOS picker. There’s already plenty else to think about.


Detailed user story: adding items

Jake Knapp explains storyboarding the user story in Day 3:

Now we’re going to make a storyboard that shows exactly how the user will step through your prototype, click by click. This storyboard will become the spec for building the prototype.

We want as few questions as possible when building the prototype. It’s important for groups to allow a divide and conquer approach knowing the pieces will fit together at the end. Working alone, it helps minimize context switching. No need to go from Keynote to sketching and back and forth.

Here’s my storyboard for adding items:

1-oH4mSSBurrPuUl8MqlFEIw

Muji has a great notebook de for storyboarding things that’s somehow only two bucks.

You start with an overview of macro values and previously entered items. The keyboard is open and active (like replying in Messages). When you add the item, the macro values go away, the items move to the top, and your new item appears. You can add more items or tap outside of the keyboard to return to the overview.

Detailed user story: refining items

Here’s my storyboard for refining items:

1-xO1FKPzyJMQHNoNrreL3ag-1

You start at the same opening screen and tap an incomplete item. Everything else disappears and the item name moves to the top of the screen, this is now the single item view.

Search results for the item appear along with a picker to set serving amounts. You select a specific item from the results and set macro values then you repeat on the remaining items.


4. Prototype

My first dive into Keynote for prototyping.

1-pulH_PqWuZfckTcvY58NMg

Fake it Till You Make it

I recently watched a WWDC 2014 Session video called “Prototyping: Fake it Till You Make it”—it’s excellent, go watch it. They (Jeffrey Traer Bernstein, Linda Dong, Julian Missig, and Mark Hauenstein) demonstrate their prototyping process, which boils down to make, show, learn.prototype

(There’s the origin story for my Twitter handle: @makeshowlearn.)

I was really interested in how they jumpstart a prototype using an existing app with similar functionality. In the video they start with Music and mask away elements and kind of trace over it to create an app about toast.

1-uygv8uCsYfs_1qlvuMjaSg

Stripping away nutrition info, the gist of my app involves adding items to a list. Reminders does this well so I used it as the base for my prototype.

Luckily, the Keynotopia iOS7 kit includes elements from Reminders. I combined those with the iOS Album boxes to create a base for the prototype. I set up some keyboard shortcuts (I followed Sketch default bindings for guidance) and then got my hands dirty in Keynote.

Keynote prototype: adding items

1-4UKFY1dC_Gh5uWaM-jOg7w

Here’s the first user story: adding items to the list. It starts with the opening screen where you can see macro totals and a list of today’s food. A couple of items are added.

I added the green dots next to item names during the prototyping stage. They mark items with complete details. When refining, you’ll work your way through the incomplete items.

A prototype for the first user story is complete: we can see how items are added. The end shows tapping “asparagus” to go to an individual item refinement view. It’s помещения blank other than the item name. We’ll take care of that in the next prototype step.

Keynote prototype: refining items

1-UwIofyyrmeJOO8c1JjOvCg

Here’s the second user story: refining items. It starts with the overview screen with the list of today’s food.

You tap back an item to view details. In the details, you can select the from search results and change serving sizes.

You can then swipe to the next incomplete item wholesale jerseys to do the same modification until you’re done refining all incomplete items.


I enjoyed prototyping with Keynote. I was able to translate most things from my head to the screen—sometimes it just took a bit of thinking. With a few more reps and getting better at re-using styles and animations, I think I’ll really be able to fly from spec to prototype.


5. Validate

What works? What doesn’t?

It’s important to try prototypes out on the actual device they’ll be used on. I exported the stills from Keynote and checked them out on my phone.

1-id7W1V1a3PIl071aaD14lQ

With still images, you lose the transitions from screen to screen but you can still learn a lot. You can see if tap areas are big enough, if the text sizing is right, if the color scheme looks okay, how clear it is what you’re supposed to do next, and plenty more.

1-KLk5ORRNVgHGtI943_FEww

I partially lost my mind trying to get the exposure and focus correct on this.

Tools like Flinto and InVision let you create interactive prototypes from stills. I didn’t get a chance to try them here, but I’ll take a look at these for future projects.

Key questions and answers

Would I open this multiple times each day? I think so. Adding an item is as quick as replying to a text in Messages.

Does refining items in batches work? I think so, though I probably need a more interactive prototype to really answer the question.

In the original item refinement flow, you refine an item, go back to the item list, tap another item, refine, go back to the item list, etc. Creating this in Keynote was repetitive so I figured that would translate to a repetitive experience for users.

I added the swipe to the next incomplete item which I think would work well.

Can I glance and see what macros I have left? Yes, this is clear. The opening screen is ready for item input, but it also displays remaining macros.

However, this prototype doesn’t address how incomplete items should affect the remaining macro count. My gut is to just have items default to one serving and whatever the first search result is. I would address this issue in a future sprint.

Happiness

I would use this. And I understand I’m very very very biased. But really, I think the user flow works really well for how I track food.

A Sprint lot of it would depend on how good the food database is and how well search works. Assuming those were good (which I know is a major leap and would be design exercises on their own), I’d use this app and I think others would too. I’m wholesale MLB jerseys happy with how it turned out.

Closing notes

I think design sprints are great for personal projects. Again, it was great to have the constraints to keep moving forward. I came up with ideas, brought the better ideas to life, and saw what worked and what didn’t. I learned a lot.

I think the process will only become more effective as I apply it to more ideas. I hope this was interesting, helpful, and hopefully both. Thanks for reading and if you have any feedback or just want to reach out, I’m on Twitter at @makeshowlearn.

Resources

Google Ventures Library

My first personal design sprint

Others