AdaptEat UI Case Study

UI Design

Figma, FigJam

2025

An iterative, user-centered design process for AdaptEat, a recipe app that personalizes dishes based on dietary needs and nutritional goals. The project involved a competitive benchmark, sketching, wireflows, a mood board, and low and high-fidelity prototypes, refined through an iteration phase based on feedback. Finally, I created a Design System to ensure a consistent and scalable UI. This project showcases my ability to balance research, usability, and aesthetics through a structured yet flexible design process.

Ideation

AdaptEat is a mobile app designed for food-conscious individuals who prioritize nutrients over calorie counting. The app helps users modify their favorite recipes to align with dietary goals, discover healthy alternatives, and simplify meal planning. Developed in three phases, it starts with personalized recipe modifications, expands to ingredient-based searches, and evolves into a full meal-planning tool. By making healthy eating more accessible and practical, AdaptEat enhances both nutrition and convenience.

Competitive Benchmark

Analyzed competitor apps to identify gaps in the market, focusing on how AdaptEat differentiates itself with real-time recipe modifications for healthier alternatives. Findings are grouped into Strengths to Consider, Weaknesses to Avoid, and Opportunities, as shown in the insight map below, followed by visual examples of selected competitor interfaces.

Sketching

Explored user flows and interface ideas through early sketches, defining the app’s structure and key interactions.​​​​​​​

Wireflow

Mapped out the app’s core user journey to ensure seamless navigation and an intuitive experience.​​​​​​​

Low-Fidelity Prototype

Created wireframes and an interactive prototype to define the app’s layout, structure, and key functionalities before moving into detailed design.​​​​​​​

Moodboard

Curated color palettes, typography, photography, and UI inspiration to establish the app’s visual direction.​​​​​​​

High-Fidelity Prototype

Designed and prototyped the final interface with polished UI elements, branding, and detailed interactions.​​​​​​​

Iteration - Final Prototype

Refined the high-fidelity wireframes and prototype based on user feedback. Adjusted the body font size for better readability, selected new main colors from the palette to improve contrast and accessibility, and added a toast message to confirm user actions, ensuring a more inclusive and user-friendly experience.​​​​​​​

Design System

Developed a scalable Design System with guidelines for components, typography, and colors to ensure consistency.

Purpose

AdaptEat empowers users to make informed and flexible food choices by providing adaptable, health-conscious recipes. The design system ensures a seamless, inclusive, and intuitive experience that aligns with users' dietary needs and preferences.

Shared Values

  • Adaptability: Recipes and recommendations should be flexible and customizable to fit individual health goals and dietary restrictions.

  • Empowerment: Users should feel in control of their food choices with clear, informative, and actionable insights.

  • Inclusivity: The experience should be welcoming and accessible to people with different dietary needs, from gluten-free to low-glycemic diets.

  • Guidance, not restriction: The system helps users find better alternatives without enforcing rigid rules.

  • Trustworthiness: Nutritional information should be accurate, science-based, and transparently sourced.