MuscleMeals
MuscleMeals
An app that simplifies the way fitness enthusiasts discover, create, and share nutritious recipes tailored to their goals.
An app that simplifies the way fitness enthusiasts discover, create, and share nutritious recipes tailored to their goals.
Location
Chicago, IL
Roles
UI/UX Design, Interactive Mobile Design, User Research
Year
2023 - Current
During the summer of 2023, I pursued a personal project where I created and designed the app MuscleMeals. I was the lead designer for the entire lifecycle of the app, from ideation and user research to prototyping and user testing.
This project is a solution to the gap I noticed in the market for a comprehensive fitness and nutrition app. As the app’s goal is to serve as a social media type platform specifically for fitness and health enthusiasts to discover, create, and share nutritious recipes tailored to their goals.
As a fitness enthusiast myself, my fitness journey always consisted of me looking up healthy high protein recipes online. And I always faced issues such as the amount of time it took to find a good recipe, then looking for any reviews on it, and determining the price of all the ingredients I would need. Throughout this, I always wished that there was an app on the market that just had everything together, recipes, reviews, ingredients list, etc. This is where the idea for MuscleMeals came in.
Market Research:
I first researched all fitness and health apps that were currently on the app market to see if there was anything that had the same concept and idea as mine. I found that there were none, and that there were only recipe apps or workout apps that tracked your calorie count.
User Research:
To ensure MuscleMeals met real genuine user needs, I conducted comprehensive user research where I interviewed and surveyed over 30 fellow fitness enthusiast to gain a better understanding on what they would need and desire in the app. A common answer amongst the interviewees was to have a bulking/cutting feature on recipes to help users with their fitness journeys. Another common response was to have the ability to post and share recipes similar to how you can upload and share posts on Instagram, which aligned well with my idea to already pursue this concept into the app. Lastly, they all agreed that a search tab would be nice to have, and to have possible filters on it such as calorie ranges.
04
User Persona:
After conducting these interviews to also research the target audience's characteristics, objectives, and requirements, I have developed a user persona based on these insights. This persona served as valuable tool and reference for how I would create the user flow of the app.
Allow me to introduce you Paul, a Teaching Assistant residing in Chicago. Paul maintains a consistent presence at the gym and actively advocates for healthy dieting.
05
Low-Fidelity Wireframes:
In the beginning stages of my design process, I sketched out the first draft of my UI through pen and paper. I created screens that helped give me a better idea of how the user flow of my app would work. For example I planned out how a user would navigate featured recipes on the home screen.
06
Mid-Fidelity Wireframes:
Once I had a clearer picture of the layout following the creation of my initial low-fidelity wireframes, I progressed towards improving the sketches by transitioning them into mid-fidelity wireframes. This helped me better understand the visual coherence of the UI and the hierarchy I wanted to have with my elements.
While designing the UI, I wanted to keep it simple, minimalistic, and modern. As fitness and health enthusiasts can range from any age, gender, and background so a user friendly UI would help keep users more likely to continue using the app, and be able to easily find what they need.
07
Information Architecture and UI Design:
A lot of the app's information architecture, such as mapping out the intuitive pathways for users to navigate within the app came from inspiration from Instagram's engaging interface. For example, each recipe page was carefully designed to feature short, instructive videos with an ingredient lists and preparation instructions. Attached below is a demonstration of the user selecting a recipe off the Home Screen, viewing the recipe, recipe video, ingredients, and instructions.
08
Iterative Prototyping:
Through Figma I created interactive prototypes of MuscleMeals, simulating user journeys and interactions. These prototypes underwent numerous testing with potential users, through using Figma's mirror phone feature.
Test users were requested to provide me with any crucial feedback, improvements, and recommendations. And through this, I found that a simpler user flow for uploading a recipe was needed due to there being too many steps. My solution to this was to reference the simple upload process that TikTok has for posts.
Users also gave feedback to revise the UI to be even cleaner and more user-centric. In response, I revised the design, to ensure it had a more harmonious balance between aesthetics and functionality. Below are images of the most significant redesigns I made to the home screen.
09
Further Validation and User Testing:
Outlined below are summaries of the user feedback I received from earlier versions of the search menu and recipe upload feature. Accompanying these summaries are the solutions I devised to address the highlighted issues.
10
Enhanced Features:
In order to further enhance the user journey, engagement, and cultivate a strong sense of community, I implemented several new features. One new feature was the messaging system that serves as a direct channel for interaction between users and recipe creators. Moreover, I also integrated and added a notifications tab, which helps serve as a way to keep users well-informed regarding the latest recipe releases from the creators they follow. These improvements were introduced with the goal of creating a more engaging and connected user experience and while also fostering a better sense of community. User demonstrations of the notifications and messages features of the app are presented below.
11
Logo Design:
The flexed arm muscle in the logo serves as a powerful visual representation of the app's title, MuscleMeals. It goes beyond just being an arm; it embodies the aspirations of every user looking to achieve their fitness goals. This versatility allows users to connect personally with the logo, as they envision their own progress and accomplishments. It becomes a symbol of their journey towards staying fit, healthy, and building muscle through the recipes of our app.
12
Color Theme:
When crafting the identity for MuscleMeals, I wanted to ensure that every aspect of the design resonated with the app's core values of health, fitness, and muscle growth. That's why I opted for a color palette centered around green and white.
Green, often associated with vitality and wellness, perfectly aligns with the app's focus on promoting a healthy lifestyle. This color choice immediately communicates to users that MuscleMeals is a hub for all things fitness and nutrition.
Complemented by the pristine white, this color combination not only evokes a sense of freshness but also conveys the app's commitment to clarity and simplicity in guiding users towards their fitness goals.
13
Final Product
This is the final interactive prototype and product of the MuscleMeals application. Upon launching the app, users are greeted with a seamless login and sign-up process, setting the stage for a user-centric journey. Navigating through the app, you'll find a range of purposeful pages including the home screen, search functionality, upload capabilities, messaging interface, and the user profile section.
The MuscleMeals app stands as a testament to my inaugural foray into UI/UX design, a project that I initiated myself. It embodies the culmination of my unwavering commitment to crafting exceptional user experiences and my profound enthusiasm for all things fitness. By tackling a genuine requirement within the fitness community, I've showcased my adeptness in conceiving, designing, and refining a digital solution that truly makes an impact.
14
Reflecting on the Journey:
Through MuscleMeals' development, I deepened my understanding of the intricate interplay between design and user needs. This project taught me that designing with empathy and user-centeredness at the forefront is the key to crafting impactful solutions. Merging my passion with design expertise, I bridged the gap between a personal struggle and a transformative digital product.
15
Next Steps:
MuscleMeals is poised for continuous enhancement. Future iterations could involve incorporating a meal planning tool that seamlessly generates shopping lists from selected recipes, integrating a barcode scanning feature for easy input of nutritional information, and potentially exploring partnerships with fitness influencers to expand the app's content and reach.
MuscleMeals
MuscleMeals
An app that simplifies the way fitness enthusiasts discover, create, and share nutritious recipes tailored to their goals.
An app that simplifies the way fitness enthusiasts discover, create, and share nutritious recipes tailored to their goals.
Location
Chicago, IL
Roles
UI/UX Design, Interactive Mobile Design, User Research
Year
2023 - Current
During the summer of 2023, I pursued a personal project where I created and designed the app MuscleMeals. I was the lead designer for the entire lifecycle of the app, from ideation and user research to prototyping and user testing.
This project is a solution to the gap I noticed in the market for a comprehensive fitness and nutrition app. As the app’s goal is to serve as a social media type platform specifically for fitness and health enthusiasts to discover, create, and share nutritious recipes tailored to their goals.
As a fitness enthusiast myself, my fitness journey always consisted of me looking up healthy high protein recipes online. And I always faced issues such as the amount of time it took to find a good recipe, then looking for any reviews on it, and determining the price of all the ingredients I would need. Throughout this, I always wished that there was an app on the market that just had everything together, recipes, reviews, ingredients list, etc. This is where the idea for MuscleMeals came in.
Market Research:
I first researched all fitness and health apps that were currently on the app market to see if there was anything that had the same concept and idea as mine. I found that there were none, and that there were only recipe apps or workout apps that tracked your calorie count.
User Research:
To ensure MuscleMeals met real genuine user needs, I conducted comprehensive user research where I interviewed and surveyed over 30 fellow fitness enthusiast to gain a better understanding on what they would need and desire in the app. A common answer amongst the interviewees was to have a bulking/cutting feature on recipes to help users with their fitness journeys. Another common response was to have the ability to post and share recipes similar to how you can upload and share posts on Instagram, which aligned well with my idea to already pursue this concept into the app. Lastly, they all agreed that a search tab would be nice to have, and to have possible filters on it such as calorie ranges.
04
User Persona:
After conducting these interviews to also research the target audience's characteristics, objectives, and requirements, I have developed a user persona based on these insights. This persona served as valuable tool and reference for how I would create the user flow of the app.
Allow me to introduce you Paul, a Teaching Assistant residing in Chicago. Paul maintains a consistent presence at the gym and actively advocates for healthy dieting.
05
Low-Fidelity Wireframes:
In the beginning stages of my design process, I sketched out the first draft of my UI through pen and paper. I created screens that helped give me a better idea of how the user flow of my app would work. For example I planned out how a user would navigate featured recipes on the home screen.
06
Mid-Fidelity Wireframes:
Once I had a clearer picture of the layout following the creation of my initial low-fidelity wireframes, I progressed towards improving the sketches by transitioning them into mid-fidelity wireframes. This helped me better understand the visual coherence of the UI and the hierarchy I wanted to have with my elements.
While designing the UI, I wanted to keep it simple, minimalistic, and modern. As fitness and health enthusiasts can range from any age, gender, and background so a user friendly UI would help keep users more likely to continue using the app, and be able to easily find what they need.
07
Information Architecture and UI Design:
A lot of the app's information architecture, such as mapping out the intuitive pathways for users to navigate within the app came from inspiration from Instagram's engaging interface. For example, each recipe page was carefully designed to feature short, instructive videos with an ingredient lists and preparation instructions. Attached below is a demonstration of the user selecting a recipe off the Home Screen, viewing the recipe, recipe video, ingredients, and instructions.
08
Iterative Prototyping:
Through Figma I created interactive prototypes of MuscleMeals, simulating user journeys and interactions. These prototypes underwent numerous testing with potential users, through using Figma's mirror phone feature.
Test users were requested to provide me with any crucial feedback, improvements, and recommendations. And through this, I found that a simpler user flow for uploading a recipe was needed due to there being too many steps. My solution to this was to reference the simple upload process that TikTok has for posts.
Users also gave feedback to revise the UI to be even cleaner and more user-centric. In response, I revised the design, to ensure it had a more harmonious balance between aesthetics and functionality. Below are images of the most significant redesigns I made to the home screen.
09
Further Validation and User Testing:
Outlined below are summaries of the user feedback I received from earlier versions of the search menu and recipe upload feature. Accompanying these summaries are the solutions I devised to address the highlighted issues.
10
Enhanced Features:
In order to further enhance the user journey, engagement, and cultivate a strong sense of community, I implemented several new features. One new feature was the messaging system that serves as a direct channel for interaction between users and recipe creators. Moreover, I also integrated and added a notifications tab, which helps serve as a way to keep users well-informed regarding the latest recipe releases from the creators they follow. These improvements were introduced with the goal of creating a more engaging and connected user experience and while also fostering a better sense of community. User demonstrations of the notifications and messages features of the app are presented below.
11
Logo Design:
The flexed arm muscle in the logo serves as a powerful visual representation of the app's title, MuscleMeals. It goes beyond just being an arm; it embodies the aspirations of every user looking to achieve their fitness goals. This versatility allows users to connect personally with the logo, as they envision their own progress and accomplishments. It becomes a symbol of their journey towards staying fit, healthy, and building muscle through the recipes of our app.
12
Color Theme:
When crafting the identity for MuscleMeals, I wanted to ensure that every aspect of the design resonated with the app's core values of health, fitness, and muscle growth. That's why I opted for a color palette centered around green and white.
Green, often associated with vitality and wellness, perfectly aligns with the app's focus on promoting a healthy lifestyle. This color choice immediately communicates to users that MuscleMeals is a hub for all things fitness and nutrition.
Complemented by the pristine white, this color combination not only evokes a sense of freshness but also conveys the app's commitment to clarity and simplicity in guiding users towards their fitness goals.
13
Final Product
This is the final interactive prototype and product of the MuscleMeals application. Upon launching the app, users are greeted with a seamless login and sign-up process, setting the stage for a user-centric journey. Navigating through the app, you'll find a range of purposeful pages including the home screen, search functionality, upload capabilities, messaging interface, and the user profile section.
The MuscleMeals app stands as a testament to my inaugural foray into UI/UX design, a project that I initiated myself. It embodies the culmination of my unwavering commitment to crafting exceptional user experiences and my profound enthusiasm for all things fitness. By tackling a genuine requirement within the fitness community, I've showcased my adeptness in conceiving, designing, and refining a digital solution that truly makes an impact.
14
Reflecting on the Journey:
Through MuscleMeals' development, I deepened my understanding of the intricate interplay between design and user needs. This project taught me that designing with empathy and user-centeredness at the forefront is the key to crafting impactful solutions. Merging my passion with design expertise, I bridged the gap between a personal struggle and a transformative digital product.
15
Next Steps:
MuscleMeals is poised for continuous enhancement. Future iterations could involve incorporating a meal planning tool that seamlessly generates shopping lists from selected recipes, integrating a barcode scanning feature for easy input of nutritional information, and potentially exploring partnerships with fitness influencers to expand the app's content and reach.
MuscleMeals
MuscleMeals
An app that simplifies the way fitness enthusiasts discover, create, and share nutritious recipes tailored to their goals.
An app that simplifies the way fitness enthusiasts discover, create, and share nutritious recipes tailored to their goals.
Location
Chicago, IL
Roles
UI/UX Design, Interactive Mobile Design, User Research
Year
2023 - Current
During the summer of 2023, I pursued a personal project where I created and designed the app MuscleMeals. I was the lead designer for the entire lifecycle of the app, from ideation and user research to prototyping and user testing.
This project is a solution to the gap I noticed in the market for a comprehensive fitness and nutrition app. As the app’s goal is to serve as a social media type platform specifically for fitness and health enthusiasts to discover, create, and share nutritious recipes tailored to their goals.
As a fitness enthusiast myself, my fitness journey always consisted of me looking up healthy high protein recipes online. And I always faced issues such as the amount of time it took to find a good recipe, then looking for any reviews on it, and determining the price of all the ingredients I would need. Throughout this, I always wished that there was an app on the market that just had everything together, recipes, reviews, ingredients list, etc. This is where the idea for MuscleMeals came in.
Market Research:
I first researched all fitness and health apps that were currently on the app market to see if there was anything that had the same concept and idea as mine. I found that there were none, and that there were only recipe apps or workout apps that tracked your calorie count.
User Research:
To ensure MuscleMeals met real genuine user needs, I conducted comprehensive user research where I interviewed and surveyed over 30 fellow fitness enthusiast to gain a better understanding on what they would need and desire in the app. A common answer amongst the interviewees was to have a bulking/cutting feature on recipes to help users with their fitness journeys. Another common response was to have the ability to post and share recipes similar to how you can upload and share posts on Instagram, which aligned well with my idea to already pursue this concept into the app. Lastly, they all agreed that a search tab would be nice to have, and to have possible filters on it such as calorie ranges.
04
User Persona:
After conducting these interviews to also research the target audience's characteristics, objectives, and requirements, I have developed a user persona based on these insights. This persona served as valuable tool and reference for how I would create the user flow of the app.
Allow me to introduce you Paul, a Teaching Assistant residing in Chicago. Paul maintains a consistent presence at the gym and actively advocates for healthy dieting.
05
Low-Fidelity Wireframes:
In the beginning stages of my design process, I sketched out the first draft of my UI through pen and paper. I created screens that helped give me a better idea of how the user flow of my app would work. For example I planned out how a user would navigate featured recipes on the home screen.
06
Mid-Fidelity Wireframes:
Once I had a clearer picture of the layout following the creation of my initial low-fidelity wireframes, I progressed towards improving the sketches by transitioning them into mid-fidelity wireframes. This helped me better understand the visual coherence of the UI and the hierarchy I wanted to have with my elements.
While designing the UI, I wanted to keep it simple, minimalistic, and modern. As fitness and health enthusiasts can range from any age, gender, and background so a user friendly UI would help keep users more likely to continue using the app, and be able to easily find what they need.
07
Information Architecture and UI Design:
A lot of the app's information architecture, such as mapping out the intuitive pathways for users to navigate within the app came from inspiration from Instagram's engaging interface. For example, each recipe page was carefully designed to feature short, instructive videos with an ingredient lists and preparation instructions. Attached below is a demonstration of the user selecting a recipe off the Home Screen, viewing the recipe, recipe video, ingredients, and instructions.
08
Iterative Prototyping:
Through Figma I created interactive prototypes of MuscleMeals, simulating user journeys and interactions. These prototypes underwent numerous testing with potential users, through using Figma's mirror phone feature.
Test users were requested to provide me with any crucial feedback, improvements, and recommendations. And through this, I found that a simpler user flow for uploading a recipe was needed due to there being too many steps. My solution to this was to reference the simple upload process that TikTok has for posts.
Users also gave feedback to revise the UI to be even cleaner and more user-centric. In response, I revised the design, to ensure it had a more harmonious balance between aesthetics and functionality. Below are images of the most significant redesigns I made to the home screen.
09
Further Validation and User Testing:
Outlined below are summaries of the user feedback I received from earlier versions of the search menu and recipe upload feature. Accompanying these summaries are the solutions I devised to address the highlighted issues.
10
Enhanced Features:
In order to further enhance the user journey, engagement, and cultivate a strong sense of community, I implemented several new features. One new feature was the messaging system that serves as a direct channel for interaction between users and recipe creators. Moreover, I also integrated and added a notifications tab, which helps serve as a way to keep users well-informed regarding the latest recipe releases from the creators they follow. These improvements were introduced with the goal of creating a more engaging and connected user experience and while also fostering a better sense of community. User demonstrations of the notifications and messages features of the app are presented below.
11
Logo Design:
The flexed arm muscle in the logo serves as a powerful visual representation of the app's title, MuscleMeals. It goes beyond just being an arm; it embodies the aspirations of every user looking to achieve their fitness goals. This versatility allows users to connect personally with the logo, as they envision their own progress and accomplishments. It becomes a symbol of their journey towards staying fit, healthy, and building muscle through the recipes of our app.
12
Color Theme:
When crafting the identity for MuscleMeals, I wanted to ensure that every aspect of the design resonated with the app's core values of health, fitness, and muscle growth. That's why I opted for a color palette centered around green and white.
Green, often associated with vitality and wellness, perfectly aligns with the app's focus on promoting a healthy lifestyle. This color choice immediately communicates to users that MuscleMeals is a hub for all things fitness and nutrition.
Complemented by the pristine white, this color combination not only evokes a sense of freshness but also conveys the app's commitment to clarity and simplicity in guiding users towards their fitness goals.
13
Final Product
This is the final interactive prototype and product of the MuscleMeals application. Upon launching the app, users are greeted with a seamless login and sign-up process, setting the stage for a user-centric journey. Navigating through the app, you'll find a range of purposeful pages including the home screen, search functionality, upload capabilities, messaging interface, and the user profile section.
The MuscleMeals app stands as a testament to my inaugural foray into UI/UX design, a project that I initiated myself. It embodies the culmination of my unwavering commitment to crafting exceptional user experiences and my profound enthusiasm for all things fitness. By tackling a genuine requirement within the fitness community, I've showcased my adeptness in conceiving, designing, and refining a digital solution that truly makes an impact.
14
Reflecting on the Journey:
Through MuscleMeals' development, I deepened my understanding of the intricate interplay between design and user needs. This project taught me that designing with empathy and user-centeredness at the forefront is the key to crafting impactful solutions. Merging my passion with design expertise, I bridged the gap between a personal struggle and a transformative digital product.
15
Next Steps:
MuscleMeals is poised for continuous enhancement. Future iterations could involve incorporating a meal planning tool that seamlessly generates shopping lists from selected recipes, integrating a barcode scanning feature for easy input of nutritional information, and potentially exploring partnerships with fitness influencers to expand the app's content and reach.