Smart & Sustainable: Crafting a Seamless UI for the Harvest Grocery App
A UI case study on designing a grocery shopping app that empowers users to shop sustainably, eat healthy, and save more—all through a clean and intuitive experience.
I. Overview
Harvest is a grocery shopping app designed to make conscious shopping simpler, smarter, and more sustainable. Catering to busy professionals who prioritize efficiency, savings, and eco-friendly choices, Harvest streamlines the shopping experience while encouraging mindful consumption.
Harvest needed a mobile app that seamlessly integrates budget management, meal planning, and sustainability features, ensuring a smooth and intuitive shopping experience. The goal was to create a user-friendly, visually engaging platform that promotes smarter purchasing decisions while making sustainable shopping more accessible.
My Role:
Lead UI Designer | Tools: Figma, Miro, ChatGPT
The Problem
Busy professionals and eco-conscious shoppers struggle with decision fatigue, budget management, and limited transparency in product sustainability. Existing grocery platforms often lack intuitive navigation and user-friendly features that support efficiency, convenience, and mindful consumption.
The challenge is to design an app that streamlines the shopping experience, reduces cognitive load, and aligns with users’ sustainability and budget-conscious goals—all within a seamless, visually engaging interface.
My Responsibilities
- Conducted Needs Assessments – Identified user frustrations and challenges through user research, including empathy maps and persona development, to inform design decisions.
- Developed User Personas – Gained a deep understanding of target users, analyzing their goals, behaviors, and pain points to create a more intuitive experience.
- Designed and Prototyped – Created high-fidelity prototypes with a sleek, editorial-inspired aesthetic, optimizing navigation and enhancing usability.
- Refined Visual Design – Balanced functionality and aesthetics to ensure a seamless and visually engaging shopping experience.
- Used Gen AI Ethically – Leveraged generative AI to enhance research efficiency, streamlining the empathize and define process while maintaining ethical design practices.
From sign-up to checkout—see how Harvest simplifies grocery shopping with seamless recipe integration and smart, sustainable choices.
II. User Research
To understand users and their needs for the Harvest app, I employed empathy maps, user journey maps, personas, and user flows. This process helped identify a primary user group: busy, budget-conscious individuals who are committed to making sustainable grocery choices while managing their time effectively.
Through empathetic analysis, the research uncovered key pain points affecting Harvest app users. These included decision fatigue, difficulty staying within budget, and limited transparency regarding the sustainability of products. These insights guided the design decisions to create a more intuitive, user-friendly experience.
EMPATHY MAPS
Common Themes & Their Impact Across All Four Personas
Time Efficiency & Convenience
Impact: Reduces the time spent on meal planning and grocery shopping, allowing users to focus on work, family, or personal well-being. A seamless, time-saving grocery experience enhances productivity and lowers stress.
Healthy & Thoughtful Eating
Impact: Encourages healthier eating habits by making nutritious choices more accessible and manageable. Users can maintain a balanced diet without sacrificing convenience, sustainability, or budget.
Smart Meal Planning & Shopping
Impact: Helps users stick to their dietary goals, minimize food waste, and avoid impulse purchases. A structured meal plan increases confidence in food choices and ensures every grocery purchase serves a purpose.
Tech-Enabled Solutions
Impact: Enhances user experience by integrating meal planning, grocery shopping, and purchasing into a single platform. Personalization features cater to unique needs, whether it’s diet tracking, cost-saving tips, or sustainability insights.
Cost-Conscious Shopping
Impact: Empowers users to shop smarter within their budget, maximizing affordability without compromising quality. Bulk discounts, price comparisons, and budget-friendly meal suggestions enhance financial well-being.
Preference for Guided, Reliable Recipes
Impact: Simplifies decision-making by providing curated, easy-to-follow recipes tailored to each user’s diet, budget, and sustainability values. Reduces frustration and makes cooking an enjoyable experience.
Summary of user needs
Reduced time commitment: Users want to streamline the grocery shopping process to save time in busy schedules.
Meal planning support: Users struggle to plan healthy meals throughout the week and need tools or resources to simplify this task.
Recipe inspiration: Users desire easy-to-follow, delicious, and healthy recipe options that fit their dietary preferences.
Efficient shopping: Users seek a way to avoid impulse purchases and make efficient grocery shopping decisions based on a pre-defined plan.
Budget-conscious options: Users want to find affordable and healthy meal options that fit their budget.
Seamless purchasing: Users need a way to seamlessly purchase groceries directly within the app, eliminating the need for a separate shopping trip.
The most important user need to focus on, based on the personas, is convenient and efficient meal planning and grocery shopping. This need is shared across all personas and is central to solving their frustrations with time management, meal planning, and grocery shopping.
Why focus on this need?
Laila (Busy Professional): She wants to simplify her shopping routine, reduce grocery trips, and efficiently plan meals.
Maria (Health-Conscious Entrepreneur): She struggles with finding time to plan healthy meals that fit her dietary needs.
Omar (Eco-Friendly Family Man): He seeks efficient meal planning to minimize food waste and align with his sustainability goals.
Colin (Budget-Aware Culinary Expert): He aims to reduce food waste and create exciting meals using seasonal and local ingredients, while staying within his budget.
Key App Features Based on USER NEEDS
Meal Planning Tools: Simplified meal planning with grocery list integration.
Customizable Dietary Options: Filters for health and dietary preferences (vegan, gluten-free, sustainable).
Budget Tools: Budget tracker, cost-per-meal breakdown, and budget-friendly recipe suggestions.
Sustainability Focus: Eco-friendly grocery options, minimal packaging, and support for local farmers.
Convenient Delivery/Pickup: In-app delivery options and local pickup integration, with eco-friendly choices.
Personalized Experience: Tailored recommendations based on user preferences, habits, and goals.
Engaging, Visual Interface: Easy-to-follow recipes, and visual meal planning for users with varying tech proficiency.
III. The Design
In designing the Harvest mobile app, I focused on sketching multiple iterations of each screen, starting with paper prototypes. This hands-on approach allowed me to explore various design possibilities, ensuring that the most effective elements were selected to address key user pain points before transitioning to digital wireframes.
For the home screen, my primary goal was to create a seamless and intuitive experience. I simplified the process of meal planning, grocery selection, and budget management, making it easy for users to quickly access key features. By prioritizing ease of use and clarity, I aimed to save users time, minimize decision fatigue, and provide an overall smooth, enjoyable experience, all within a clean and efficient interface.
Paper wireframes.
Harvest’s design centers around convenient and efficient meal planning and grocery shopping, making it effortless for users to build a plan and purchase ingredients with just a few taps. The visually engaging and intuitive interface ensures that every step—from selecting recipes to checking out—is smooth, efficient, and highly informative. Prioritizing cost-effective, budget-conscious shopping, Harvest empowers users to make healthier, more sustainable choices while streamlining the entire grocery experience.
App Design insights.
The "Build Your Plan" feature is prominently placed, guiding users through a structured, intuitive process of selecting recipes and automatically adding ingredients to their cart. Personalized "Recipes for You" recommendations help users discover meals that fit their dietary needs and budget, reducing decision fatigue and making grocery shopping more intentional and efficient.
With a clean, minimal interface, Harvest ensures that meal planning feels effortless rather than overwhelming. Budget-conscious shopping is integrated into the experience, allowing users to track their spending with the "Weekly Budget" tool while making informed choices. Sustainability is also a key focus, with optimized images reducing server energy consumption without compromising visual appeal. By combining intuitive navigation, smart meal planning, and an eco-conscious approach, Harvest simplifies grocery shopping and empowers users to eat healthier while staying within budget.
Low-Fidelity Wireframes of Key Screens for Recipe Shopping
Using the finalized digital wireframes, I created a low-fidelity prototype to illustrate the user experience within the Harvest app. My primary focus was on defining the core user journey, particularly the process of meal planning, selecting groceries, and completing the checkout process. This prototype was designed to be well-suited for a usability study, ensuring that the key features align with user needs and offer an intuitive, efficient shopping experience.
IV. Mockups
How the Design Solves User Needs & Pain Points?
Shop by recipe screens.
Shop by Recipe Screens:
- Seamless Meal Planning & Grocery Shopping Integration
- The "Build Your Plan" feature is the central focus, guiding users toward an efficient way to shop by recipe.
Recipes are organized into clear, structured categories:
- Personalized ("Recipes for You") → Reducing decision fatigue.
- Most Popular Recipes → Leveraging social proof to guide user choices.
- Recipes by Budget, Diet, and Ease → Offering flexibility based on user preferences and constraints.
Users can instantly add all ingredients to their cart, streamlining the shopping experience.
2. User-Centered Navigation & Accessibility
- A clean, editorial-inspired UI removes clutter, making it easier to browse and select meals.
- The bottom navigation bar keeps essential functions (Home, Search, Recipes, Profile) within easy reach.
- High-contrast, visually engaging imagery makes the app intuitive and accessible to a broad audience.
3. Budget-Conscious & Sustainable Shopping
- "Recipes by Budget" helps users make cost-effective meal choices.
- Seasonal & Local Recipes encourage sustainable shopping habits.
- Eco-conscious design (optimized images, structured layout) ensures efficiency without unnecessary resource use.
Individual Recipe and Item Screens examples.
Individual Recipe & Food Item Screens:
- Smart & Flexible Grocery Shopping
- Users can add all recipe ingredients to their cart or select only what they need, preventing unnecessary purchases and reducing food waste.
- Similar food items are suggested, making it easy to swap products or find alternatives without searching manually.
2. Guided Cooking with Step-by-Step Instructions
- Recipes include clearly labeled prep and cook times at the top, helping users plan efficiently.
- Step-by-step instructions break down the cooking process into easy-to-follow sections, reducing overwhelm.
- Users can reference similar recipes for inspiration, lowering cognitive load and making meal selection effortless.
3. Nutritional Transparency & Health Integration
- Detailed nutritional facts for both recipes and food items empower users to make healthy decisions.
- Users can share nutritional info directly with their health apps, helping them track dietary goals seamlessly.
4. Sustainability & Mindful Shopping
- Sustainable food choices are encouraged with seasonal/local options and clear ingredient sourcing details.
- The eco-conscious product descriptions help users choose items that align with their values (organic, kosher, vegetarian, etc.).
5. User-Centered Design for Meal Planning
- The "Add Recipe to Meal Plan" feature makes it easy to organize meals, reinforcing healthy eating habits.
- The layout maintains a clean, editorial aesthetic, ensuring a seamless, visually engaging, and user-friendly experience.
Profile screens example.
Profile Screens
- Budget Tracking & Financial Awareness
- A budget tracker visually displays spending vs. remaining balance, helping users manage grocery costs at a glance.
- The “My Budget” button offers deeper insights into financial management, supporting cost-conscious shopping.
2. Effortless Order & Meal Plan Management
- "Buy Again" allows users to quickly reorder past recipes and groceries, reducing friction in repeat purchases.
- "My Orders" provides instant access to purchase history, making it easy to track past spending and orders.
- "My Plan" offers a structured view of scheduled meals, ensuring users stay on track with meal planning.
3. Weekly Meal Planning with Calendar View
- Users can choose a specific week and view all planned recipes, creating an organized and intuitive meal schedule.
- Recipes are displayed clearly, allowing for easy adjustments and better meal prep coordination.
4. Personalized Shopping Preferences
- A dedicated Shopping Preferences screen lets users customize their grocery experience, tailoring recommendations to dietary needs, brands, and sustainability choices.
- This personalization reduces cognitive load, making shopping more efficient and user-friendly.
UI Design & Branding
The visual identity of Harvest was crafted to feel like more than just a grocery shopping app—it’s a wellness space where users can nourish and enhance their lives. Inspired by The New York Times Cooking app, the upstate spa Inness, the brand Gohar, vintage 50s and 60s recipe cards, and the Thrive Market app, the design blends art, vintage aesthetics, and curated organic visuals to create an elevated and engaging experience.
A carefully considered, artistic approach to showcasing food plays a key role in setting the mood—intentionally designed to be warm, inspiring, and wellness-driven. Every element, from typography to imagery, reflects a sense of curation and quality, making the app feel like an inviting, thoughtfully designed space rather than a transactional platform.
Moodboard
Harvest was designed to reflect the values and aesthetics of its users—how they live, decorate their homes, the music they enjoy, their wellness rituals, and even the colors they gravitate toward. The goal was to make the app feel like a natural extension of their lifestyle, so that navigating it feels intuitive and familiar.
Harvest users are thoughtful, intelligent individuals who make intentional choices about their food, and the design needed to mirror that level of care. By using simple typography, earthy muted tones, and an extremely minimal layout, the interface remains both functional and intuitive. Carefully curated imagery further elevates the experience, making the app feel not just like a tool, but a beautifully designed space that aligns with their mindset and values.
The UI, branding, and overall design of Harvest seamlessly align with both user needs and business goals by creating an experience that is intuitive, visually engaging, and deeply connected to users' values. The minimal, thoughtfully curated aesthetic ensures a stress-free shopping journey, reducing decision fatigue while reinforcing a sense of wellness and intentionality. Earthy tones, simple typography, and elevated imagery create a familiar, inspiring space that encourages user engagement. This approach not only enhances usability and accessibility but also supports business goals—driving user retention, increasing conversions, and fostering brand loyalty by making Harvest a destination, not just a tool for grocery shopping.
Final Design
The final high-fidelity prototype of the Harvest mobile app presents optimized user pathways for building meal plans, purchasing groceries, and completing the checkout process, ensuring a seamless and intuitive user experience. Key improvements include streamlined navigation, personalized recommendations, and easy-to-follow meal planning features, all designed to make grocery shopping more efficient and enjoyable.
Additionally, the prototype expands its customization options, allowing users to tailor meal plans, grocery lists, and product recommendations to their dietary preferences, sustainability goals, and budget requirements. This final version of the app reflects Harvest's commitment to providing a functional, intuitive, and personalized platform for conscious, health-focused, and budget-savvy shoppers.
V. Takeaways from Designing the Harvest App
Impact
Harvest streamlines grocery shopping with an intuitive, visually engaging interface that simplifies meal planning and budget-conscious choices. High-quality photography and a structured layout help users explore recipes and products effortlessly.
To enhance sustainability, I optimized image resolution, reducing server energy use while maintaining the app’s editorial aesthetic.
What I Learned and What Could Be Improved
Harvest was a complex challenge—organizing hundreds of recipes, ingredients, and nutrition facts into a clean, user-friendly interface. I focused on creating a minimalist design where every element served a clear purpose, guiding users through meal planning with ease. The use of imagery transformed the experience, making it feel inviting and effortless.
I recognize there are areas for improvement that could further enhance user satisfaction. A feature that allows users to log the ingredients they already have at home and receive recipe recommendations based on their fridge contents would make meal planning even more efficient and reduce food waste. Additionally, refining the budget-tracking experience with more detailed insights, such as cost-per-meal breakdowns, could better support users in making cost-conscious decisions.
