Disclaimer

The work below is completely conceptual and used for illustrative purposes. I do not claim any ownership or association with Noom.

Overview

After listening to Outlive by Peter Attia on Audible I was ready to start putting into practice the things I learned. Attia recommends logging meals as a great step for beginners to understand calorie intake each day. I did a search and landed on Noom, an app that uses “a combination of psychology, technology, and human coaching…to help millions of users meet their personal health and wellness goals.”

I’ve really love using the app and I am starting to see results, which is very exciting! In the spirit of growth and the pursuit of progress I also wanted to challenge myself to see what improvements could be made to the core screens of the Noom app. As I train my body, I must also train my mind.

I set out to accomplish three things:

1. Explore and iterate of the user interface on the Home Screen
2. Make key actions (actions taken every day) more visible and accessible
3. Reduce steps for logging a meal

This was done as a pure experiment, I have no knowledge of goals or KPIs for these screens and it’s possible my recommendations could negatively affect those goals. The only insight I have is from using the app for the past two weeks. Let the experiment begin!

Home

Before

After

Noom Moons

Background:
When I first started using the app, I was unsure what the circles with a “Y” in the middle meant. I incorrectly assumed that the “Y” stood for yellow which is a type of food you can track. You can imagine my surprise when even after eating only green foods for a few days I still got these yellow coins, what gives! I quickly learned that these are pieces of a noomcoin, a token you get from completing three tasks in the app each day.

Design:
This exploration was purely aesthetic. What if we replaced this three-step coin with, let’s say a moon. Because what is Noom spelt backwards? Exactly. I also liked the phases of each moon how each task you completed got you closer to unlocking the full moon. I found that the current coin design looked too closely like the “yellow” foods with the “Y.”

Calories Counter

Background:
A big part of the app is keeping an eye on calorie intake. A great part about Noom is that this number fluctuates each day based on a myriad of factors. Which ultimately makes achieving the coveted “Weight Loss Zone” easier and more exciting.

Design:
This design is aimed at communicating the increase in calories using a vertical chart. Users can still view the “Weight Loss Zone” as they aim to consume calories that target this area.

Lessons Stack

Background:
Noom focuses heavily on the education of building habits and their daily lessons are how they help teach users how to stay on track. The lessons are few and quick which make accomplishing them quite easy and rewarding.

Design:
When there are many lessons a lot of the primary actions get pushed down the screen. Even after a lesson is completed they remain there which requires some scrolling to get to repeat actions like meal logging and movement. The design uses a pattern to stack lessons behind each other so that they use the same vertical height as one lesson. One improvement on the design could be to quickly toggle between active and completed lessons.

Tools

Background:
To ensure users are meeting their goals, Noom offers a set of features to set focus, log meals, weigh in, monitor water, and track movement. This is the part of the app I interact with every day. From weighing myself every morning to inputing meals and movement throughout the day.

Design:
In addition to the improvement to the Lessons Stack that moved these actions up on the screen. There are some great visualizations in the current app and this design explores more chart like visuals to the modules. For meals, the last meal and calorie is shown. Meals are broken down into Breakfast, Morning Snack, Lunch, Afternoon Snack, Dinner, Evening snack. To the right you see a breakdown of these meal types. If a certain meal had been entered the bar chart is filled with the food type that was eaten (Green, Yellow, Orange). Next up, Weight. The most recent weight is shown as well as the positive or negative trend since your last weigh in. To the right, a wavelength graph showing the trend of your last three weigh ins. Lastly (on screen) is Movement. This takes a lot of direction from what currently exists and uses the new layout system, recent input on left and overall/trend graph on the right to preview this information.

Tab

Background:
The current app has no bottom tab structure and an assumption I have is that because the Noom coin and calorie count are fixed to the top, also including a fixed tab bar to the bottom would significantly reduce the vertical height of the content in the middle.

Design:
We declutter the top area and use a consistent pattern for iOS apps helping users understand where they are and navigate to where they want to go. Icons from Feather Icons.

Log Meals

Before

After

Background:
I assume this is the part of the app people use most frequently. I know I do. Anytime you eat something, you log it in the app to track its caloric content and food type (Green, Yellow, Orange). There are a lot of great features in here like search, custom dishes, barcode scanning, alternate units, and more.

Before

After

Before

After

Design:
While inputting meals each day, I noticed there are a lot of different screen changes and modality that happens. My focus was on reducing these screens and steps so that logging meals was quick and efficient. What if you never left the “Log meal” view when logging a meal? The meal types are available as a horizontal  scrolling list—bonus points if we could adjust the position of the list based on time.The focal point becomes the search bar. From here, all things are possible. Users can search and select meals, they could also opt to create meals. An important part of calorie restriction is adjusting the size of the meal you are eating. The design brings you back to the previous screen where you can adjust the unit via a contextual menu.

Before

After

Conclusion

Again, this was a conceptual experiment based on my own usage of the app. I've really enjoyed using Noom and have learned life changing habits. At the time of this writing, I'm 1lb away from my goal weight! I owe a lot of that success to this product. This was a fun challenge. Let me know if you have any ideas or feedback for improvement by email or twitter. Thanks for reading!