{"id":1822,"date":"2026-06-23T18:36:13","date_gmt":"2026-06-23T18:36:13","guid":{"rendered":"http:\/\/192.168.86.67\/?post_type=portfolio&#038;p=1822"},"modified":"2026-06-24T19:40:50","modified_gmt":"2026-06-24T19:40:50","slug":"ting-meal-planner","status":"publish","type":"portfolio","link":"https:\/\/www.rossomando.net\/index.php\/portfolio\/ting-meal-planner\/","title":{"rendered":"Ting Meal Planner"},"content":{"rendered":"\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\" id=\"Image1\"><div class=\"wp-block-media-text__content\"><h2 class=\"wp-block-post-title\">Ting Meal Planner<\/h2>\n\n\n<p class=\"wp-block-paragraph\" style=\"padding-bottom:20px\"><strong>Role:<\/strong> Product Owner, Product Designer, UX\/UI Designer, Flutter Developer<br><strong>Project Type:<\/strong> Personal Product, Mobile App, MVP Beta<br><strong>Platform:<\/strong> iOS and Android<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Context<\/h4>\n\n\n\n<p class=\"is-excerpt wp-block-paragraph\">Ting Meal Planner started with a real problem at home. My wife shared how mentally draining it was to constantly figure out what to cook, especially while balancing groceries, schedules, and meals for our family.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">My first solution was a three week spreadsheet that tracked breakfast, snacks, lunch, and dinner, including separate meal needs for our toddler. The spreadsheet helped, but it also showed me there was a better product opportunity.<\/p>\n\n\n\n<p class=\"is-excerpt wp-block-paragraph\">Existing meal planning apps either felt too complex or locked the workflow I wanted behind a rigid subscription model. I wanted to create a cleaner, more approachable meal planning app that helped users plan meals, shop smarter, and cook with less friction.<\/p>\n<\/div><figure  class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1448\" height=\"1086\" alt=\"\" src=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/Featured-Image.png\" class=\"wp-image-1824 size-full\" srcset=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/Featured-Image.png 1448w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/Featured-Image-300x225.png 300w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/Featured-Image-1024x768.png 1024w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/Featured-Image-768x576.png 768w\" sizes=\"auto, (max-width: 1448px) 100vw, 1448px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile has-tertiary-background-color has-background\" style=\"padding-top:1px\" id=\"Image2\"><figure class=\"wp-block-media-text__media\"><a href=\"\/wp-content\/uploads\/2026\/06\/Onboarding-Splash-Page-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/onboarding-splash-page-1024x768.png\" alt=\"\" class=\"wp-image-1856 size-full\" srcset=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/onboarding-splash-page-1024x768.png 1024w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/onboarding-splash-page-300x225.png 300w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/onboarding-splash-page-768x576.png 768w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/onboarding-splash-page.png 1448w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<h4 class=\"wp-block-heading\">My Role<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">This was a full product ownership project. I handled the product thinking, UX design, UI design, design system, Flutter development, requirements documentation, and beta preparation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I also used the project as a way to deepen my understanding of how design systems connect to front end code and to sharpen my native mobile product design skills.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-columns has-tertiary-background-color has-background is-layout-flex wp-container-core-columns-is-layout-a1f4a78f wp-block-columns-is-layout-flex\" id=\"Image3\" style=\"padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px\">\n<div class=\"wp-block-column has-background-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"padding-top:8%;padding-right:0;padding-bottom:8%;padding-left:0\">\n<h4 class=\"wp-block-heading\" style=\"padding-right:8%;padding-left:13.6%\"><br>From Spreadsheet to Mobile Product<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"padding-right:8%;padding-left:13.6%\"><br>The first version of the app was intentionally simple. It included a basic dashboard with meal cards and week controls, but I realized the app needed more structure before sending users into the main experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"padding-right:8%;padding-left:13.6%\">That led me to design a three step onboarding flow:<\/p>\n\n\n\n<ul style=\"padding-right:8%;padding-left:13.6%\" class=\"wp-block-list\">\n<li>Choose how many weeks to plan<\/li>\n\n\n\n<li>Choose how many days ahead to shop for<\/li>\n\n\n\n<li>Set up household profiles for different meal needs<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"padding-right:8%;padding-left:13.6%\">This moved important setup decisions out of the dashboard and gave the app a clearer first time experience.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-gutsliders-photo-carousel gutslider-a2ff6ea3 nav_inside nav_cc ba-gutslider\" data-swiper-options=\"{&quot;slidesPerView&quot;:1,&quot;spaceBetween&quot;:0,&quot;loop&quot;:true,&quot;autoplay&quot;:false,&quot;speed&quot;:800,&quot;effect&quot;:&quot;slide&quot;,&quot;keyboard&quot;:{&quot;enabled&quot;:false},&quot;mousewheel&quot;:false,&quot;breakpoints&quot;:{&quot;320&quot;:{&quot;slidesPerView&quot;:1,&quot;spaceBetween&quot;:0},&quot;768&quot;:{&quot;slidesPerView&quot;:2,&quot;spaceBetween&quot;:15},&quot;1025&quot;:{&quot;slidesPerView&quot;:&quot;1&quot;,&quot;spaceBetween&quot;:15}},&quot;navigation&quot;:{&quot;nextEl&quot;:&quot;.gutslider-a2ff6ea3 .swiper-button-next&quot;,&quot;prevEl&quot;:&quot;.gutslider-a2ff6ea3 .swiper-button-prev&quot;},&quot;pagination&quot;:false}\"><div class=\"swiper\"><div class=\"swiper-wrapper\"><a class=\"swiper-slide\" data-fslightbox=\"gallery\" href=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/onboarding-page1.png\"><div class=\"swiper-container-outer zoom__in\"><img loading=\"lazy\" decoding=\"async\" width=\"1448\" height=\"1086\" src=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/onboarding-page1.png\" alt=\"\" class=\"wp-image-1859\" srcset=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/onboarding-page1.png 1448w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/onboarding-page1-300x225.png 300w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/onboarding-page1-1024x768.png 1024w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/onboarding-page1-768x576.png 768w\" sizes=\"auto, (max-width: 1448px) 100vw, 1448px\" \/><\/div><\/a><a class=\"swiper-slide\" data-fslightbox=\"gallery\" href=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/onboarding-flow.png\"><div class=\"swiper-container-outer zoom__in\"><img loading=\"lazy\" decoding=\"async\" width=\"1448\" height=\"1086\" src=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/onboarding-flow.png\" alt=\"\" class=\"wp-image-1869\" srcset=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/onboarding-flow.png 1448w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/onboarding-flow-300x225.png 300w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/onboarding-flow-1024x768.png 1024w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/onboarding-flow-768x576.png 768w\" sizes=\"auto, (max-width: 1448px) 100vw, 1448px\" \/><\/div><\/a><\/div><div class=\"gutslider-nav nav_inside nav_cc\"><div class=\"swiper-button-prev\"><\/div><div class=\"swiper-button-next\"><\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile has-tertiary-background-color has-background\" style=\"padding-top:1px\" id=\"Image4\"><figure class=\"wp-block-media-text__media\"><a href=\"\/wp-content\/uploads\/2026\/06\/Main-Dashboard-2-or-More-Meals-in-Dashboard.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/mobile-navigation-1024x768.png\" alt=\"\" class=\"wp-image-1872 size-full\" srcset=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/mobile-navigation-1024x768.png 1024w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/mobile-navigation-300x225.png 300w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/mobile-navigation-768x576.png 768w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/mobile-navigation.png 1448w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<h4 class=\"wp-block-heading\">Key UX Decisions<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Mobile First Navigation Structure<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">From early development and testing, I prioritized a navigation pattern that supports comfortable one handed use on mobile devices. I introduced a bottom tab bar with Dashboard, Shopping List, and Settings to keep primary actions within easy reach.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\" id=\"Image5\"><div class=\"wp-block-media-text__content\">\n<h5 class=\"wp-block-heading\">Shopping List Experience<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">The shopping list became a core part of the product because planning meals is only useful if users can easily translate those plans into what they need to buy.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I designed an educational empty state, custom list items, and alert controls so users could manage grocery and non grocery needs in one place.<\/p>\n<\/div><figure class=\"wp-block-media-text__media\"><a href=\"\/wp-content\/uploads\/2026\/06\/Shopping-List.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/shoppinglist-1024x768.png\" alt=\"\" class=\"wp-image-1876 size-full\" srcset=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/shoppinglist-1024x768.png 1024w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/shoppinglist-300x225.png 300w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/shoppinglist-768x576.png 768w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/shoppinglist.png 1448w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile has-tertiary-background-color has-background\" style=\"padding-top:1px\" id=\"Image6\"><figure class=\"wp-block-media-text__media\"><a href=\"\/wp-content\/uploads\/2026\/06\/Start-Cooking-Mid-Step.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/recipestepper-1024x768.png\" alt=\"\" class=\"wp-image-1881 size-full\" srcset=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/recipestepper-1024x768.png 1024w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/recipestepper-300x225.png 300w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/recipestepper-768x576.png 768w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/recipestepper.png 1448w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<h5 class=\"wp-block-heading\">Guided Cooking Flow<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">To make the MVP more valuable, I added a &#8220;Start Cooking&#8221; feature. When a meal includes steps or a recipe link, users can launch a focused cooking mode.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The cooking interface highlights the current step, checks off completed steps, and visually reduces completed content so the user can stay focused while cooking.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\" id=\"Image7\"><div class=\"wp-block-media-text__content\">\n<h4 class=\"wp-block-heading\">Design System and Development<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">I built the app in Flutter so it could support both iOS and Android from one codebase. Flutter also gave me more control over visual execution, which made it a strong fit for a design focused mobile app.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In Figma, I created a design system that aligned closely with the Flutter code structure. I used naming conventions that matched my Dart files, helping bridge the gap between design tokens and implementation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I am also upgrading the Figma file from basic styles to Variables, using a brand color collection and semantic alias collection. This makes the system easier to scale and closer to how production design systems work.<\/p>\n<\/div><figure class=\"wp-block-media-text__media\"><a href=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/Figma-to-code.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/Figma-to-code-1024x768.png\" alt=\"\" class=\"wp-image-1888 size-full\" srcset=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/Figma-to-code-1024x768.png 1024w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/Figma-to-code-300x225.png 300w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/Figma-to-code-768x576.png 768w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/Figma-to-code.png 1448w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile has-tertiary-background-color has-background\" style=\"padding-top:1px\" id=\"Image8\"><figure class=\"wp-block-media-text__media\"><a href=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/Beta.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/Beta-1024x768.png\" alt=\"\" class=\"wp-image-1889 size-full\" srcset=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/Beta-1024x768.png 1024w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/Beta-300x225.png 300w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/Beta-768x576.png 768w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2026\/06\/Beta.png 1448w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<h4 class=\"wp-block-heading\">MVP Beta<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Ting Meal Planner has been built and compiled for external beta testing through Apple TestFlight, and with Android closed testing through Google Play.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I also set up Firebase and Crashlytics to monitor stability, technical issues, and app performance during testing.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group has-background-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-df5f80fc wp-block-group-is-layout-constrained\" style=\"padding-top:5%;padding-right:25%;padding-bottom:5%;padding-left:5%\">\n<h4 class=\"wp-block-heading\">Outcome<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Ting Meal Planner grew from a personal spreadsheet into a working mobile MVP built with Flutter. It gave me hands on experience owning a product from idea to design, code, beta preparation, and analytics setup.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This project pushed me beyond UX\/UI design alone. It helped me better understand the relationship between design systems, front end development, mobile usability, and real product tradeoffs.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Ting Meal Planner started with a real problem at home. My wife shared how mentally draining it was to constantly figure out what to cook, especially while balancing groceries, schedules, and meals for our family.<\/p>","protected":false},"featured_media":1824,"template":"portfolio-template","meta":{"_acf_changed":false,"footnotes":""},"company":[14],"class_list":["post-1822","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry","company-personal-projects"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.rossomando.net\/index.php\/wp-json\/wp\/v2\/portfolio\/1822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rossomando.net\/index.php\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/www.rossomando.net\/index.php\/wp-json\/wp\/v2\/types\/portfolio"}],"version-history":[{"count":35,"href":"https:\/\/www.rossomando.net\/index.php\/wp-json\/wp\/v2\/portfolio\/1822\/revisions"}],"predecessor-version":[{"id":1899,"href":"https:\/\/www.rossomando.net\/index.php\/wp-json\/wp\/v2\/portfolio\/1822\/revisions\/1899"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rossomando.net\/index.php\/wp-json\/wp\/v2\/media\/1824"}],"wp:attachment":[{"href":"https:\/\/www.rossomando.net\/index.php\/wp-json\/wp\/v2\/media?parent=1822"}],"wp:term":[{"taxonomy":"company","embeddable":true,"href":"https:\/\/www.rossomando.net\/index.php\/wp-json\/wp\/v2\/company?post=1822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}