Nutries App
Nutries App
Nutries App
Nutries App
Nutries is a Brazilian mobile app that provides nutritional information about your groceries. With this app, you can check if the products you're buying are as natural or healthy as they claim they are, check on nutritional values for produce, industrialized products, recipes, and even get a personalized analysis of what you're consuming and what you should be eating more to have a healthier lifestyle.
Nutries is a Brazilian mobile app that provides nutritional information about your groceries. With this app, you can check if the products you're buying are as natural or healthy as they claim they are, check on nutritional values for produce, industrialized products, recipes, and even get a personalized analysis of what you're consuming and what you should be eating more to have a healthier lifestyle.
Nutries is a Brazilian mobile app that provides nutritional information about your groceries. With this app, you can check if the products you're buying are as natural or healthy as they claim they are, check on nutritional values for produce, industrialized products, recipes, and even get a personalized analysis of what you're consuming and what you should be eating more to have a healthier lifestyle.
Nutries is a Brazilian mobile app that provides nutritional information about your groceries. With this app, you can check if the products you're buying are as natural or healthy as they claim they are, check on nutritional values for produce, industrialized products, recipes, and even get a personalized analysis of what you're consuming and what you should be eating more to have a healthier lifestyle.
My Role
In this project, my role encompassed end-to-end design responsibilities for the MVP product. I initiated the design process by sketching ideas and wireframing concepts, ultimately transitioning to high-fidelity prototypes. Additionally, I crafted the visual and UI design, including the creation of custom icons. Collaborating closely with team members, I conducted user testing sessions, driving an iterative design approach that ensured the MVP met user needs and expectations.
In this project, my role encompassed end-to-end design responsibilities for the MVP product. I initiated the design process by sketching ideas and wireframing concepts, ultimately transitioning to high-fidelity prototypes. Additionally, I crafted the visual and UI design, including the creation of custom icons. Collaborating closely with team members, I conducted user testing sessions, driving an iterative design approach that ensured the MVP met user needs and expectations.
In this project, my role encompassed end-to-end design responsibilities for the MVP product. I initiated the design process by sketching ideas and wireframing concepts, ultimately transitioning to high-fidelity prototypes. Additionally, I crafted the visual and UI design, including the creation of custom icons. Collaborating closely with team members, I conducted user testing sessions, driving an iterative design approach that ensured the MVP met user needs and expectations.
In this project, my role encompassed end-to-end design responsibilities for the MVP product. I initiated the design process by sketching ideas and wireframing concepts, ultimately transitioning to high-fidelity prototypes. Additionally, I crafted the visual and UI design, including the creation of custom icons. Collaborating closely with team members, I conducted user testing sessions, driving an iterative design approach that ensured the MVP met user needs and expectations.
CLIENT
Nutries App
ROLES
Product Designer, UI Designer
ROLES
Product Designer
UI Designer
DURATION
Dec 2018–May 2019
TOOLS
Adobe XD, Illustrator
TOOLS
AdobeXD
Illustrator
Low-Fidelity Prototypes
Low-Fidelity Prototypes
Low-Fidelity Prototypes
Low-Fidelity Prototypes
After researching the competition, I've tried several sketches and worked with the product team to get them tested and get a clear direction of what would work best for their customers.
These are the final sketches before moving to the wireframing phase:
After researching the competition, I've tried several sketches and worked with the product team to get them tested and get a clear direction of what would work best for their customers.
These are the final sketches before moving to the wireframing phase:
After researching the competition, I've tried several sketches and worked with the product team to get them tested and get a clear direction of what would work best for their customers.
These are the final sketches before moving to the wireframing phase:
After researching the competition, I've tried several sketches and worked with the product team to get them tested and get a clear direction of what would work best for their customers.
These are the final sketches before moving to the wireframing phase:
Wireframes
Wireframes
Wireframes
Wireframes
Based on the approved sketches, I created the app wireframes. I identified the need for more space for text when searching for an item, so made a few small changes to the search screen: moved the icons to the top left side, leaving enough space on the right in case the text occupied the whole screen.
Based on the approved sketches, I created the app wireframes. I identified the need for more space for text when searching for an item, so made a few small changes to the search screen: moved the icons to the top left side, leaving enough space on the right in case the text occupied the whole screen.
Based on the approved sketches, I created the app wireframes. I identified the need for more space for text when searching for an item, so made a few small changes to the search screen: moved the icons to the top left side, leaving enough space on the right in case the text occupied the whole screen.
Based on the approved sketches, I created the app wireframes. I identified the need for more space for text when searching for an item, so made a few small changes to the search screen: moved the icons to the top left side, leaving enough space on the right in case the text occupied the whole screen.
High-Fidelity Prototypes
High-Fidelity Prototypes
High-Fidelity Prototypes
High-Fidelity Prototypes
The high-fidelity prototype was created considering the brand guidelines.
The high-fidelity prototype was created considering the brand guidelines.
The high-fidelity prototype was created considering the brand guidelines.
The high-fidelity prototype was created considering the brand guidelines.
I created an interactive high-fidelity prototype and the product team tested it with real users. The users had no problems navigating the interactive prototype, so we've continued creating new screens and testing it again, before going into the development stage.
I created an interactive high-fidelity prototype and the product team tested it with real users. The users had no problems navigating the interactive prototype, so we've continued creating new screens and testing it again, before going into the development stage.
I created an interactive high-fidelity prototype and the product team tested it with real users. The users had no problems navigating the interactive prototype, so we've continued creating new screens and testing it again, before going into the development stage.
I created an interactive high-fidelity prototype and the product team tested it with real users. The users had no problems navigating the interactive prototype, so we've continued creating new screens and testing it again, before going into the development stage.
Personalized Icons
Personalized Icons
Personalized Icons
Personalized Icons
For the icons needed to have the same style and pattern, I had created all of them from scratch. The examples below are allergens warning icons.
For the icons needed to have the same style and pattern, I had created all of them from scratch. The examples below are allergens warning icons.
For the icons needed to have the same style and pattern, I had created all of them from scratch. The examples below are allergens warning icons.
For the icons needed to have the same style and pattern, I had created all of them from scratch. The examples below are allergens warning icons.
Roadblocks
Roadblocks
Roadblocks
Roadblocks
Not having enough data to support design decisions. In an ideal scenario, we'd have research and usability testing in place to iterate and improve the user experience.
Not having enough data to support design decisions. In an ideal scenario, we'd have research and usability testing in place to iterate and improve the user experience.
Not having enough data to support design decisions. In an ideal scenario, we'd have research and usability testing in place to iterate and improve the user experience.
Not having enough data to support design decisions. In an ideal scenario, we'd have research and usability testing in place to iterate and improve the user experience.
Freelance work process. As I was only hired to launch the MVP app, I didn't have the opportunity to iterate on it.
Freelance work process. As I was only hired to launch the MVP app, I didn't have the opportunity to iterate on it.
Freelance work process. As I was only hired to launch the MVP app, I didn't have the opportunity to iterate on it.
Freelance work process. As I was only hired to launch the MVP app, I didn't have the opportunity to iterate on it.
At the time (2018), I had little knowledge about accessibility best practices. The UI could definitely have been better by improving the color contrast and using more neutral colors for the menus, while still maintaining the design guidelines in place.
At the time (2018), I had little knowledge about accessibility best practices. The UI could definitely have been better by improving the color contrast and using more neutral colors for the menus, while still maintaining the design guidelines in place.
At the time (2018), I had little knowledge about accessibility best practices. The UI could definitely have been better by improving the color contrast and using more neutral colors for the menus, while still maintaining the design guidelines in place.
At the time (2018), I had little knowledge about accessibility best practices. The UI could definitely have been better by improving the color contrast and using more neutral colors for the menus, while still maintaining the design guidelines in place.
Live App
Live App
Live App
Live App
The app is available at Brazil's App Store and Google Play Store.
The app is available at Brazil's App Store and Google Play Store.
The app is available at Brazil's App Store and Google Play Store.
The app is available at Brazil's App Store and Google Play Store.
