MacrosFirst is a mobile and web app that makes it easy for people for track their macronutrients (macros) in order to achieve various health goals. Macros are the fat, protein, and carbohydrates that comprise a food's composition. These are the key nutrients listed on the facts panel of most foods. By understanding the ratio of fat, protein, and carbohydrates in your diet, not only can you learn a lot about your dietary habits but you can adjust these habits according to your goals to achieve a healthier outcome.
While the initial version of the app has achieved a moderate degree of success with over 20,000 accounts created, it suffers from a large number of usability challenges that discourage many users from onboarding or using MacrosFirst for the long term. Dedicated MacrosFirst users who are willing to look past the numerous usability issues and take the time to learn the app end up loving its functionality and focus on macros. But, in order to convert the casual user into a dedicated MacrosFirst user, the app needs to be more inviting and easier to use.
In order to achieve these goals, we needed to take a step back and looked at the app holistically. We spoke to users directly in order to gain a better understanding of the issues they were facing, soliciting their feedback to help improve the overall experience of the app. We observed people using the app, watching them move from screen to screen and feature to feature. While most of the core underlying functionality won't change, the user experience and visual design needed to be completely redesigned to give users a more unified experience throughout the app.
Below are screenshots from the existing version 1.0 of the MacroFirst app.
While keeping much of the existing functionality intact, the main focus of the new design is based on an enhanced visual hierarchy that uses color and typography to bring the most important information to the forefront. This allows the user to easily consume relevant information and creates a better understanding of the interactions needed to performs tasks.
User onboarding is the user's initial entry into the app experience. This first impression is extremely important - and often overlooked. A well-designed onboarding experience is an introduction into the key features and functionality of the product. In the case of MacrosFirst, when a user logs into the app for the first time it allows them to enter key metrics that help to calculate their macro targets.
Want to see the full set for MacroFirst designs?