Efficient Chow: UX research + design

Overview

The goal of Efficient Chow is to help crossfitters eat healthily by providing them with recipes that fit their lifestyle and goals.

Efficient Chow is a company that my friend John Wei started, aiming to help people eat healthily, affordably, and conveniently. He felt that there was an opportunity to easily incorporate nutrition data into recipes that hadn’t been done before that would meet the needs of fitness-minded people, such as cross fitters. He was starting to do crossfit at the time and wanted a product that he could use to find recipes that aligned with his goals. Since he was a developer, he asked if I could help by designing a first version of 2 essential parts of the site - the homepage, and the recipe page.

User interviews and personas

The first step I took was to conduct interviews with our target audience - cross fitters - in order to understand their lifestyle, goals, nutrition habits, and what needs they had that weren’t being met that Efficient Chow could potentially solve. I prepared a list of our initial assumptions, general lifestyle questions, and questions that would validate/invalidate our assumptions. After interviewing 6 people, I found that specific nutrition content, easy preparation, and affordability were the main motivators of cross fitters trying to decide what to cook. I then created 3 personas to guide the design process.

The homepage

In designing the first version of the homepage of Efficient Chow,  I clarified and noted the following constraints and goals given to me:

• Because of copyright issues and limited content production at the time, there would be no food photos available in the initial version
• The main call to action desired is for a user to sign up for their weekly newsletter
• The secondary call to action is to view a recipe
• The most important information about a recipe are the recipe name, calories/dollar, 2 nutrient summary metrics, and individual macro nutrient metrics.

Soon after, the photo constraint was lifted, much to my joy. (I mean, what's food website without mouth-watering photos?)

The homepage design evolved over time as John and I experimented with how to emphasize our desired actions and the amount of data to show initially per recipe. The current homepage maintains and reflects the primary and secondary call to actions well. John did an excellent job optimizing on my initial design after observing user behavior.

(Click on images to view larger versions)

The recipe page - desktop and mobile

The goals of the recipe page were to provide intense, detailed nutritional data that the crossfitter or other performance-driven person would need, and to also promote the adding of the recipe ingredients to the user's Amazon Cart, as that was convenient for the user, and a viable source of revenue for EfficientChow.

One unique challenge I encountered was implementing the ingredient change feature in mobile. The feature enables the nutrition table data to change in real-time, as the user changes the quantity of any ingredient in the recipe on the page. However, a mobile screen has such limited real estate - it would be impossible to show both the interface for changing the ingredient quantities and all the resulting nutritional changes in the same small screen. I considered how I could create a navigation of sorts to link the two parts of the page, and ultimately decided on a bottom navigation bar that would show a notification dot if there were changes in nutritional data. Having this navigation would make finding relevant information much easier on mobile, especially since Efficient Chow showcases so much data.

(Click on images to view larger versions)