Helping Millennials Make Healthier Food Choices

BACKGROUND

For adults aged 20 and older, more than two-thirds (68.8 percent) are considered to be overweight or obese while more than 1 in 20 (6.3 percent) are considered to have extreme obesity. In 2008, the medical care costs of obesity in the United States were estimated to be $147 billion. The annual nationwide productive costs of obesity-related absenteeism range between $3.38 billion and $6.38 billion. Obesity is just one of the negative consequences of a poor or unhealthy diet. An unhealthy diet is a serious concern because it is directly associated with poorer mental health outcomes, reduced quality of life, and the leading causes of death in the U.S.

Working with 2 other colleagues, we set out to create a website that was designed to increase awareness of food related personal health issues and help people quickly and easily find healthier food options. The rest of this article will outline our approach to the design process and the role that I played in helping the website come to life.

EMPATHIZE

1. Assumptions: We started out by each creating a list of assumptions that we had about people that are struggling to make healthy eating decisions. Here are a few that I came up with:

• It is difficult to maintain healthy eating habits
• People are not thinking about the long-term costs/effects
• Eating healthy is expensive
• People don’t want to have to cook
• People are generally uneducated about what is in their food
• It is difficult to change eating habits
• People are uneducated about nutrition
• Marketing plays a big role in what people choose to eat
• Cooking takes time

After I compiled a list of assumptions, I focused my attention on the things that I didn’t know and needed to learn more about:

• How particular food and ingredients affect the body
• How eating healthy makes people feel
• Do people want to cook, or cook more often
• Do people know about the ingredients that are going into their body, Do they want to know
• How often do people cook
• How often do people eat out
• Do people care about nutrition
• What steers them away from cooking regularly
• How many do people generally cook for

Then we came up with a plan to start conducting research. Here is what we did to plan out our research and who we were going to talk to:

2. Interviews: Ask, listen, and put yourself in their shoes! This is a critical part to being able to empathize with your users, and the beginning of creating a user-centric design. We created an interview schedule and then each set out to start interviewing people. I, personally, interviewed 8 individuals in the 22–26 age range. I conducted my interviews over the phone and then recorded the answers. Below is an example of our interview schedule and answers:

We gained a lot of information and insight by talking to a variety of people. It allowed us to feel what pains they have when trying to live a healthier lifestyle. It also allowed us to identify what is important to them in their lives and what they are striving to accomplish. Some of the main trends and takeaways that we found were:

• They would like to cook more but don’t have the time or know where to start
• They want to feel good regularly
• They want to know what is going into their body
• They want to save money by cooking

DEFINE

1. Persona: After gathering and assessing the data from the interviews we conducted, we created a persona that would help drive our design decisions through the process. We constantly referred back to her behavior, what her goals are, what her frustrations are, and what motivates her.

2. Creative Brief: We created a Creative Brief to help drive the direction of the website and keep our focus on the problems we were trying to solve. We continually referred back to the creative brief as we were building out our product. It was a great guiding light for us.

Note: My colleague Seth was the main contributor to the creative brief. While I am responsible for the layout and the visual, he was responsible for most of the content.

IDEATE

1. User Story Board: This part if the process was extremely fun but challenging for us. We started by thinking of all the features our website could do and how it could help our satisfy our persona’s needs… but we forgot to… THINK BIG!!!

Below was our first take on our user story board:

Upon first glance, you might notice that we were able to articulate the features that might be included in a website designed to drive someone towards a healthier lifestyle, but we completely left out an important part…

WHAT ARE THERESA’S GOALS!?

So with some guidance, we were able to get back on track: clearly defining the goals, narrative, and tasks associated with a good user story board. This allowed us to focus in on the needs and goals of our persona and the social problem we were trying to solve. Below is the digital format of our new and improved user story board.

And TA-DA! The minimal viable product (MVP), came to light!

Note: Further on in the process we ultimately moved tracking out of MVP and into V2. We did this do to time constraints and after gathering some feedback, learned that cooking healthier food and learning about food was more important to our potential users. This was a great learning experience for me because it continued to prove that design is a fluid process and and as you move through it, you continue to iterate on every step and stage.

So ultimately our MVP consisted of the following 3 things:

• A personalized account for the user
• Features that would help guide the user in finding healthy food recipes quickly and easily
• The ability to learn about ingredients in fun and interactive way

2. Sketching and Wireframing: Once we had defined what our initial MVP would include, we got to work using the 10x10 sketch method and sketching out some of our key pages (homepage, meal creator, and learn about your ingredients page).

With some of our ideas out on the table, I started wireframing using Balsamiq. I really enjoyed using Balsamiq as it is very simple and the pre-created sketches that you just drag and drop into the screen, allowed me to focus on the design without worrying about color and topography… yet!

After , we got some feedback from potential users, we iterated on our design by building Lo-Fidelity wireframes in Sketch.

This was helpful because we were able to load the Lo-Fidelity wireframes into InVision and do some usability testing and gain feedback before moving into our Hi-Fidelity wireframes and prototyping.

I asked a few people to complete the following tasks:

1. Search for a recipe using the “meal creator”
2. Find where you can learn about different ingredients
3. Add additional ingredients (that are not included in the recipe) to your shopping list

It was apparent after gaining their feedback that we had some usability issues to address:

1. With the current setup, they were having a hard time finding the meal creator.
2. The same thing when searching for where to learn about their ingredients, they were having a hard time finding where to go from the home screen.
3. The “add additional ingredients” section, once they found it, was confusing to them. HOW do they add the ingredients was the most common question.

Taking this information back, we set out to iterate on the design as we built out the Hi-Fidelity mockups.

DESIGN

1. Logo, Colors, and Topography: For all of these aspects we wanted a simple, fresh, and crisp feel. We wanted the user to feel that the colors represented a healthy lifestyle. Since green is often associated with healthy foods, we chose to use a color palette consisting of different shades of green, placed on a white background to create a clean, healthy, and inviting feel.

2. Hi-Fidelity Mockups

With the style guide in place and the user feedback I obtained, we set out to create our hi-fidelity mockups using the Material Design guidelines. We created a mobile first website and we split this portion of the project up, with each of us focusing on 4–5 screens. Taking into consideration the feedback we gained from our users, we made the following updates:

1. Instead of a dropdown menu on the home screen, we placed two buttons on the home screen, one for building your meals out and one for learning about your ingredients
2. We changed the way that you can add ingredients to your shopping list, adding an “add” button and a search bar.

2. Prototype

We used Invision again to prototype the website and put it through usability testing. We wanted to see if there was anything important that we left out and/or if the flow of our app was easy and intuitive.

To test it out for yourself, click here.

It was really fun and satisfying seeing this project come to life. I absolutely loved building it out and being able to see the how people would move through the website and could use it to help start and maintain a healthier lifestyle.

TEST TEST TEST!

“Test early, test often”- I will never forget it. There is so much power in testing your designs with the people that are going to use it. Gaining insight into what they are thinking and how they are feeling molds really good designs. We tested and iterated on our project a few times. We altered the colors some, changed where buttons were located on the screen, and added items to the menu so they were easy to find. All things that might seem minimal but ultimately helped in delighting the user.

CONCLUSION

As my first ever UX project, I learned a great deal! It was extremely fun learning new tools and processes, but I think the biggest “Ah-ha!” moment for me was when I was connecting with people. Empathizing with the people I interviewed lead me to see things I wouldn’t have normally seen and build a website that helped solve their problem. In addition, gaining feedback from our users helped create a website that was inviting and easy to use.

This project helped lay the foundations for planning and conducting research, creating personas and creative briefs, defining and thinking about information architecture, creating and executing on user story maps, wireframing, designing using Sketch and Adobe, prototyping, continual testing, and iterating on your designs. I can’t wait continue using and honing these skills as I continue my career in UX.

TOOLS USED

Sketch, Invision, Trello, Balsamiq, RealTimeBoard, Paper and Pen, Sticky Notes, Adobe Color Wheel, Adobe Illustrator, Keynote, Material Design, Microsoft Word

THANK YOU

A HUGE Thank you to my colleagues who pushed me to be better, challenged my ideas, and most of all were great contributors to this project. Reilly Johnson and Seth Fisher, you guys are awesome!