ZeRe Nutri
ZeRe Nutri
From frustration to feast: How ZeRe makes grocery shopping easier for dietary needs
Market research
Competitive analysis
User survey
Personas
Flow diagrams
Wireframes
Hi-fidelity UI
Prototype
Mini usability study
Accessibility evaluation
What
Native Mobile App
What
Native Mobile App
What
Native Mobile App
Why
Portfolio project
Why
Portfolio project
Why
Portfolio project
Where
São Paulo, Brazil
Where
São Paulo, Brazil
Where
São Paulo, Brazil
Role
Product Designer
Role
Product Designer
Role
Product Designer
Category
E-commerce, Food & Drink
Category
E-commerce, Food & Drink
Category
E-commerce, Food & Drink
When
April 2024—May 2024
When
April 2024—May 2024
When
April 2024—May 2024
Project inspiration: Empowering dietary needs
Recognizing the challenges faced by friends with dietary restrictions, I embarked on this project to create a solution that simplifies safe food discovery. My goal is to empower individuals with dietary needs to navigate their food choices with confidence and freedom, regardless of location or circumstance.
Recognizing the challenges faced by friends with dietary restrictions, I embarked on this project to create a solution that simplifies safe food discovery. My goal is to empower individuals with dietary needs to navigate their food choices with confidence and freedom, regardless of location or circumstance.
Recognizing the challenges faced by friends with dietary restrictions, I embarked on this project to create a solution that simplifies safe food discovery. My goal is to empower individuals with dietary needs to navigate their food choices with confidence and freedom, regardless of location or circumstance.
Market Research
Market Research
The claim
The market for food catering to dietary restrictions has seen explosive growth in the last decade. A report by Verified Market Research estimates the global free-from food market to reach $USD 30.9 Billion by 2028.
The market for food catering to dietary restrictions has seen explosive growth in the last decade. A report by Verified Market Research estimates the global free-from food market to reach $USD 30.9 Billion by 2028.
The market for food catering to dietary restrictions has seen explosive growth in the last decade. A report by Verified Market Research estimates the global free-from food market to reach $USD 30.9 Billion by 2028.
The problem
Dietary restrictions can be a burden. Finding suitable food, especially outside the home, takes extra effort. Social situations and the fear of missing out add to the challenge. The cost of specialty products can strain wallets too.
Dietary restrictions can be a burden. Finding suitable food, especially outside the home, takes extra effort. Social situations and the fear of missing out add to the challenge. The cost of specialty products can strain wallets too.
Dietary restrictions can be a burden. Finding suitable food, especially outside the home, takes extra effort. Social situations and the fear of missing out add to the challenge. The cost of specialty products can strain wallets too.
Competitive analysis
Competitive analysis
I conducted a competitive analysis of the top 3 apps in the industry, evaluating both user ordering workflows and negative app store reviews to identify recurring user pain points and potential areas for improvement.
I conducted a competitive analysis of the top 3 apps in the industry, evaluating both user ordering workflows and negative app store reviews to identify recurring user pain points and potential areas for improvement.
I conducted a competitive analysis of the top 3 apps in the industry, evaluating both user ordering workflows and negative app store reviews to identify recurring user pain points and potential areas for improvement.
iFood
iFood
iFood
Rappi
Rappi
Rappi
Liv Up
Liv Up
Liv Up
The good 👍
The good 👍
The good 👍
All apps allow users to search for stores nearby and buy locally.
All apps allow users to search for stores nearby and buy locally.
All apps allow users to search for stores nearby and buy locally.
The bad 👎
The bad 👎
The bad 👎
No way to schedule next-day delivery (iFood, Rappi).
No same-day or Turbo delivery option (Liv Up).
Not great variety of free-from products (Rappi, Liv Up).
No guarantee that product is safe (all).
No way to schedule next-day delivery (iFood, Rappi).
No same-day or Turbo delivery option (Liv Up).
Not great variety of free-from products (Rappi, Liv Up).
No guarantee that product is safe (all).
No way to schedule next-day delivery (iFood, Rappi).
No same-day or Turbo delivery option (Liv Up).
Not great variety of free-from products (Rappi, Liv Up).
No guarantee that product is safe (all).
Voice of customers
Voice of customers
I really wanted the product ASAP, but the app doesn’t have this option. Sad.
I really wanted the product ASAP, but the app doesn’t have this option. Sad.
I really wanted the product ASAP, but the app doesn’t have this option. Sad.
John
John
John
I miss products variety and there’s no guarantee that what I’ll take is safe for me.
I miss products variety and there’s no guarantee that what I’ll take is safe for me.
I miss products variety and there’s no guarantee that what I’ll take is safe for me.
Rebecca
Rebecca
Rebecca
I needed something for early Tomorrow not Today, because later I won’t be at home...
I needed something for early Tomorrow not Today, because later I won’t be at home...
I needed something for early Tomorrow not Today, because later I won’t be at home...
Thania
Thania
Thania
User survey
User survey
I conducted a quick survey among people who has dietary restrictions and people who has free-from food needs on WhatsApp and Facebook groups.
I conducted a quick survey among people who has dietary restrictions and people who has free-from food needs on WhatsApp and Facebook groups.
I conducted a quick survey among people who has dietary restrictions and people who has free-from food needs on WhatsApp and Facebook groups.
What is your dietary restriction?
What is your dietary restriction?
What is your dietary restriction?
38 participants
38 participants
38 participants
Do you know brands that specialize in free-from food?
Do you know brands that specialize in free-from food?
Do you know brands that specialize in free-from food?
38 participants
38 participants
38 participants
Notable comments
Notable comments
Notable comments
Woah, fish almost did me in the other day! Had a reaction to a dish that snuck some fish in, and without my meds it got scary real fast.
Woah, fish almost did me in the other day! Had a reaction to a dish that snuck some fish in, and without my meds it got scary real fast.
Woah, fish almost did me in the other day! Had a reaction to a dish that snuck some fish in, and without my meds it got scary real fast.
Patrick
Patrick
Patrick
Normally, when I go out to eat, I eat meat skewers and it's safer and I eat in the same place where I know there hasn't been any reaction.
Normally, when I go out to eat, I eat meat skewers and it's safer and I eat in the same place where I know there hasn't been any reaction.
Normally, when I go out to eat, I eat meat skewers and it's safer and I eat in the same place where I know there hasn't been any reaction.
Marie
Marie
Marie
Total fail at school lunch today. Face went full balloon mode cuz of some surprise food. Friends dying laughing, girls not so impressed.
Total fail at school lunch today. Face went full balloon mode cuz of some surprise food. Friends dying laughing, girls not so impressed.
Total fail at school lunch today. Face went full balloon mode cuz of some surprise food. Friends dying laughing, girls not so impressed.
Larry
Larry
Larry
Identified needs
🕵️♂️
Identified needs
Initial research highlights critical unmet needs: minimizing accidental exposure risks, enhancing product availability and user convenience, and fostering greater social integration.
Initial research highlights critical unmet needs: minimizing accidental exposure risks, enhancing product availability and user convenience, and fostering greater social integration.
Initial research highlights critical unmet needs: minimizing accidental exposure risks, enhancing product availability and user convenience, and fostering greater social integration.
Personas
Personas
Through the development of detailed user personas, I gained a deep understanding of the needs and motivations of both customers and store owners within the app.
Through the development of detailed user personas, I gained a deep understanding of the needs and motivations of both customers and store owners within the app.
Through the development of detailed user personas, I gained a deep understanding of the needs and motivations of both customers and store owners within the app.
Sara Vicente
Social Media Manager
I love trying new foods and restaurants, but my lactose intolerance can put a damper on things. It would be amazing to find a store with delicious, lactose-free options that are convenient and won't break the bank!
Goals
Healthy & Active: Lactose intolerance makes navigating options tricky. She seeks delicious, nutritious alternatives.
Healthy & Active: Lactose intolerance makes navigating options tricky. She seeks delicious, nutritious alternatives.
Culinary Explorer: Wants a wider variety of lactose-free options to explore flavors without sacrificing taste.
Culinary Explorer: Wants a wider variety of lactose-free options to explore flavors without sacrificing taste.
Convenience is Key: Values easy meal planning and shopping. She seeks a reliable source for lactose-free staples.
Convenience is Key: Values easy meal planning and shopping. She seeks a reliable source for lactose-free staples.
Frustrations
Limited Dining Out: Feels restricted and envious of her friends' meals. Hidden dairy and few lactose-free options.
Limited Dining Out: Feels restricted and envious of her friends' meals. Hidden dairy and few lactose-free options.
Inconsistent Products: Dislikes visiting multiple stores or relying on limited online retailers, feels like a scavenger hunt.
Inconsistent Products: Dislikes visiting multiple stores or relying on limited online retailers, feels like a scavenger hunt.
Social Exclusion: Surprise dairy or limited options at events make her feel left out and self-conscious about her dietary needs.
Social Exclusion: Surprise dairy or limited options at events make her feel left out and self-conscious about her dietary needs.
About Sara
Age: 35
Age: 35
Age: 35
Education: Bachelor's Degree in Marketing
Education: Bachelor's Degree in Marketing
Education: Bachelor's Degree in Marketing
Hometown: São Paulo
Hometown: São Paulo
Hometown: São Paulo
Sarah is a young professional with a passion for health, food, and social connection. Lactose intolerance adds a layer of complexity to her life, but she doesn't let it hold her back. Sarah is constantly on the lookout for ways to maintain a healthy lifestyle, explore new culinary experiences, and participate fully in social gatherings – all while managing her dietary restriction.
Goals
Expand Accessibility: Make healthy, delicious free-from options readily available in local communities.
Expand Accessibility: Make healthy, delicious free-from options readily available in local communities.
Build a Supportive Community: Foster a welcoming space where people with dietary restrictions feel understood and empowered.
Build a Supportive Community: Foster a welcoming space where people with dietary restrictions feel understood and empowered.
Champion Culinary Innovation: Drive the development of exciting new free-from products that redefine what "restricted" means.
Champion Culinary Innovation: Drive the development of exciting new free-from products that redefine what "restricted" means.
Frustrations
Limited Choices: Witnessing the struggles people face due to limited free-from options in the market.
Limited Choices: Witnessing the struggles people face due to limited free-from options in the market.
Misconceptions: Combating the perception that free-from food lacks taste or variety.
Misconceptions: Combating the perception that free-from food lacks taste or variety.
Unreliable Sourcing: Ensuring consistent availability of high-quality free-from products for his customers.
Unreliable Sourcing: Ensuring consistent availability of high-quality free-from products for his customers.
About Davi
Age: 42
Age: 42
Education: Culinary Arts Degree, MBA
Education: Culinary Arts Degree, MBA
Hometown: São Paulo
Hometown: São Paulo
David's passion for food ignited in culinary school, but a close friend's experience with celiac disease opened his eyes to the challenges of navigating a restricted diet. Witnessing the limited options and frustrations firsthand, David embarked on a mission to create a better experience. "Free & Flavorful" is more than just a store; it's a community hub where people with dietary restrictions can discover delicious food, connect with others, and feel empowered to explore the world of flavor freely.
Davi Pontes
Owner & CEO of Free & Flavorful
Food is a universal language of joy and connection. Everyone deserves to experience it safely and deliciously, regardless of dietary restrictions.
Translating research into design solutions
Leveraging my comprehensive research analysis, I embarked on the design phase by creating initial user flows and low-fidelity wireframes.
Leveraging my comprehensive research analysis, I embarked on the design phase by creating initial user flows and low-fidelity wireframes.
Leveraging my comprehensive research analysis, I embarked on the design phase by creating initial user flows and low-fidelity wireframes.
👨💻
Flow diagrams
Flow diagrams
To ensure a smooth user journey, I mapped out the key tasks users can perform with a clear flowchart. Here's an example to illustrate the simplicity and efficiency of the process. While not shown here due to space limitations, I also designed flows for potential error scenarios to ensure a seamless user experience in all situations.
To ensure a smooth user journey, I mapped out the key tasks users can perform with a clear flowchart. Here's an example to illustrate the simplicity and efficiency of the process. While not shown here due to space limitations, I also designed flows for potential error scenarios to ensure a seamless user experience in all situations.
To ensure a smooth user journey, I mapped out the key tasks users can perform with a clear flowchart. Here's an example to illustrate the simplicity and efficiency of the process. While not shown here due to space limitations, I also designed flows for potential error scenarios to ensure a seamless user experience in all situations.
Low-fidelity wireframes
Low-fidelity wireframes
After mapping out the user journey with a flowchart, I designed low-fidelity wireframes for the core functionalities.
After mapping out the user journey with a flowchart, I designed low-fidelity wireframes for the core functionalities.
After mapping out the user journey with a flowchart, I designed low-fidelity wireframes for the core functionalities.
High-fidelity UI Design
High-fidelity UI Design
Following the completion of the initial user flow, I led the creation of high-fidelity mockups for key application screens. This facilitated early user testing and stakeholder feedback, ensuring the design aligned with user needs and project goals.
Following the completion of the initial user flow, I led the creation of high-fidelity mockups for key application screens. This facilitated early user testing and stakeholder feedback, ensuring the design aligned with user needs and project goals.
Following the completion of the initial user flow, I led the creation of high-fidelity mockups for key application screens. This facilitated early user testing and stakeholder feedback, ensuring the design aligned with user needs and project goals.
Color palette
Color palette
Primary, secondary, text, background
Font
Font
Plus Jakarta Sans: Medium, Bold, ExtraBold
AaBbCcDdEeFfGgHh
Safe, fresh, organic look & feel
Safe, fresh, organic look & feel
The style was achieved by using natural decorative PNG’s of leaves, fruits and safe food.
39 High-fidelity UI variations for A/B testing
39 High-fidelity UI variations for A/B testing
I led the design of A/B testable variations: tab bar and hamburger menu navigation patterns. This facilitates data-driven design decisions in future stages.
I led the design of A/B testable variations: tab bar and hamburger menu navigation patterns. This facilitates data-driven design decisions in future stages.
I led the design of A/B testable variations: tab bar and hamburger menu navigation patterns. This facilitates data-driven design decisions in future stages.
Neutral gray gradient background
Example of chosen tab navigation
I evaluated the effectiveness of clean white backgrounds, subtle grey gradients, and nature-inspired green tones for product screens. This iterative design process ensured the final UI prioritized user clarity and fostered a sense of trust through visual cues associated with safety and natural elements.
I evaluated the effectiveness of clean white backgrounds, subtle grey gradients, and nature-inspired green tones for product screens. This iterative design process ensured the final UI prioritized user clarity and fostered a sense of trust through visual cues associated with safety and natural elements.
I evaluated the effectiveness of clean white backgrounds, subtle grey gradients, and nature-inspired green tones for product screens. This iterative design process ensured the final UI prioritized user clarity and fostered a sense of trust through visual cues associated with safety and natural elements.
Optimized user experience through strategic layout
Optimized user experience through strategic layout
Established a robust visual hierarchy by implementing an 8-point grid system for consistent spacing and alignment. Utilized a margin strategy with varying intervals (8 & 16 within groups, 24, 32 & 48 between groups) to guide user focus and enhance information architecture. This resulted in a clear, intuitive interface that prioritizes readability and user experience.
Established a robust visual hierarchy by implementing an 8-point grid system for consistent spacing and alignment. Utilized a margin strategy with varying intervals (8 & 16 within groups, 24, 32 & 48 between groups) to guide user focus and enhance information architecture. This resulted in a clear, intuitive interface that prioritizes readability and user experience.
Established a robust visual hierarchy by implementing an 8-point grid system for consistent spacing and alignment. Utilized a margin strategy with varying intervals (8 & 16 within groups, 24, 32 & 48 between groups) to guide user focus and enhance information architecture. This resulted in a clear, intuitive interface that prioritizes readability and user experience.
Interactive prototype: Validating design solutions
Interactive prototype: Validating design solutions
To facilitate user testing and design iteration, I developed a high-fidelity, clickable prototype. This interactive experience allows users to navigate the app's core functionalities, providing crucial insights to validate and refine design solutions.
To facilitate user testing and design iteration, I developed a high-fidelity, clickable prototype. This interactive experience allows users to navigate the app's core functionalities, providing crucial insights to validate and refine design solutions.
To facilitate user testing and design iteration, I developed a high-fidelity, clickable prototype. This interactive experience allows users to navigate the app's core functionalities, providing crucial insights to validate and refine design solutions.
The prototype can be live-previewed here.
The prototype can be live-previewed here.
The prototype can be live-previewed here.
Usability Testing: Validating navigation for product discovery
Usability Testing: Validating navigation for product discovery
To ensure users intuitively navigate the product hierarchy, I conducted usability testing with 5 participants. Each user interacted with a focused prototype showcasing category and product detail views. The objective was to assess user comprehension of the information architecture:
Can users identify the presence of additional products within categories?
Is the transition to dedicated product pages clear and effortless?
The in-person testing session involved a walkthrough of the app, followed by targeted questions to evaluate the clarity of category and product navigation elements.
To ensure users intuitively navigate the product hierarchy, I conducted usability testing with 5 participants. Each user interacted with a focused prototype showcasing category and product detail views. The objective was to assess user comprehension of the information architecture:
Can users identify the presence of additional products within categories?
Is the transition to dedicated product pages clear and effortless?
The in-person testing session involved a walkthrough of the app, followed by targeted questions to evaluate the clarity of category and product navigation elements.
To ensure users intuitively navigate the product hierarchy, I conducted usability testing with 5 participants. Each user interacted with a focused prototype showcasing category and product detail views. The objective was to assess user comprehension of the information architecture:
Can users identify the presence of additional products within categories?
Is the transition to dedicated product pages clear and effortless?
The in-person testing session involved a walkthrough of the app, followed by targeted questions to evaluate the clarity of category and product navigation elements.
Study results
Study results
Study results
The usability testing revealed a key opportunity to improve the category page's information architecture. While users added products to the cart with ease, 60% (3 out of 5) were unaware that tapping the product image revealed additional details. This resulted in a task success rate of only 40%, highlighting the need for clearer product information discovery cues.
The usability testing revealed a key opportunity to improve the category page's information architecture. While users added products to the cart with ease, 60% (3 out of 5) were unaware that tapping the product image revealed additional details. This resulted in a task success rate of only 40%, highlighting the need for clearer product information discovery cues.
The usability testing revealed a key opportunity to improve the category page's information architecture. While users added products to the cart with ease, 60% (3 out of 5) were unaware that tapping the product image revealed additional details. This resulted in a task success rate of only 40%, highlighting the need for clearer product information discovery cues.
Prototype update concept
Prototype update concept
Prototype update concept
Prioritized efficiency and user convenience: To optimize the checkout process within time and budget limitations, the updated prototype prioritizes user experience by introducing a "View details" button on the product card. This complements the existing "Add to bag" functionality, allowing users to explore product information without interrupting their browsing flow and potentially accelerating their path to purchase.
Prioritized efficiency and user convenience: To optimize the checkout process within time and budget limitations, the updated prototype prioritizes user experience by introducing a "View details" button on the product card. This complements the existing "Add to bag" functionality, allowing users to explore product information without interrupting their browsing flow and potentially accelerating their path to purchase.
Prioritized efficiency and user convenience: To optimize the checkout process within time and budget limitations, the updated prototype prioritizes user experience by introducing a "View details" button on the product card. This complements the existing "Add to bag" functionality, allowing users to explore product information without interrupting their browsing flow and potentially accelerating their path to purchase.
Accessibility check
Accessibility check
I utilized WCAG AA standards to evaluate app contrast. Identified areas for improvement to enhance user experience for individuals with visual impairments.
I utilized WCAG AA standards to evaluate app contrast. Identified areas for improvement to enhance user experience for individuals with visual impairments.
I utilized WCAG AA standards to evaluate app contrast. Identified areas for improvement to enhance user experience for individuals with visual impairments.
I identified an insufficient color contrast between the "Gluten-Free" product attribute tag and its background. Recognizing the importance of inclusivity and safeness, I led the initiative to modify the type color for optimal readability, ensuring a seamless experience for all users.
I identified an insufficient color contrast between the "Gluten-Free" product attribute tag and its background. Recognizing the importance of inclusivity and safeness, I led the initiative to modify the type color for optimal readability, ensuring a seamless experience for all users.
I identified an insufficient color contrast between the "Gluten-Free" product attribute tag and its background. Recognizing the importance of inclusivity and safeness, I led the initiative to modify the type color for optimal readability, ensuring a seamless experience for all users.
Main takeaways and lessons learned
This project revealed a growing market for free-from food with unmet needs.
While user research showed a high prevalence of dietary restrictions and a lack of brand awareness, I also identified a gap in how people discover these specialized options. This led to the proposition of a mobile app that could connect users with relevant free-from food chain: ZeRe.
Through the process of designing and testing prototypes, I gained valuable insights into user behavior and how to best address their needs within the app.
This project revealed a growing market for free-from food with unmet needs.
While user research showed a high prevalence of dietary restrictions and a lack of brand awareness, I also identified a gap in how people discover these specialized options. This led to the proposition of a mobile app that could connect users with relevant free-from food chain: ZeRe.
Through the process of designing and testing prototypes, I gained valuable insights into user behavior and how to best address their needs within the app.
This project revealed a growing market for free-from food with unmet needs.
While user research showed a high prevalence of dietary restrictions and a lack of brand awareness, I also identified a gap in how people discover these specialized options. This led to the proposition of a mobile app that could connect users with relevant free-from food chain: ZeRe.
Through the process of designing and testing prototypes, I gained valuable insights into user behavior and how to best address their needs within the app.
👨🏫
Let’s work together!
brunokatekawa@gmail.com
Let’s work together!
brunokatekawa@gmail.com
Let’s work together!
brunokatekawa@gmail.com