{"id":251,"date":"2025-11-29T00:35:00","date_gmt":"2025-11-29T08:35:00","guid":{"rendered":"https:\/\/tiaogilvie.ca\/?p=251"},"modified":"2026-04-27T21:25:40","modified_gmt":"2026-04-28T04:25:40","slug":"bento","status":"publish","type":"post","link":"https:\/\/tiaogilvie.ca\/?p=251","title":{"rendered":"Bento"},"content":{"rendered":"\n<div class=\"wide-image-block\" id=\"hero\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"612\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/bento-hero.png\" alt=\"\" class=\"wp-image-554\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/bento-hero.png 1440w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/bento-hero-300x128.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/bento-hero-1024x435.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/bento-hero-768x326.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\" id=\"client-fad407c3-efed-4c0b-83ed-1c53ba4b17b3\">Overview<\/h3>\n\n\n\n<p>Bento is a mobile app created to help parents find recipes quickly for their kid&#8217;s lunch based on ingredients present in their kitchen. These recipes can be added to a meal schedule in order to plan lunches for a week. Additionally, children have access to their own user profile where they are able to provide feedback about a recipe that was assigned to them by their parent.<\/p>\n\n\n\n<p>For more information visit our website<mark style=\"background-color:rgba(0, 0, 0, 0);color:#00a89d\" class=\"has-inline-color\"> <a rel=\"noreferrer noopener\" href=\"http:\/\/bentoapp.ca\" data-type=\"URL\" data-id=\"bentoapp.ca\" target=\"_blank\">bentoapp.ca<\/a><\/mark><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<h4 class=\"wp-block-heading\">Role<\/h4>\n\n\n\n<p>UX\/UI Designer<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Team<\/h4>\n\n\n\n<p>4 designers &amp; 5 developers<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Tools<\/h4>\n\n\n\n<p>Figma, Adobe Illustrator, Photoshop, Premier Pro, After Effects, Trello, Slack<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">My Contribution<\/h3>\n\n\n\n<p>For this project I was responsible for the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>User Flow<\/li>\n\n\n\n<li>Wireframes \n<ul class=\"wp-block-list\">\n<li>Home screen<\/li>\n\n\n\n<li>Lunchbox<\/li>\n\n\n\n<li>Shopping list<\/li>\n\n\n\n<li>Kids section <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Icons <\/li>\n\n\n\n<li>Logo<\/li>\n\n\n\n<li>Marketing assets<\/li>\n\n\n\n<li>UI Kit<\/li>\n\n\n\n<li>Design System<\/li>\n<\/ul>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Problem<\/h3>\n\n\n\n<p>Through research and experience from one of my team members who is a single parent, here are some of the problems we have discovered with recipe apps and other sources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lack of recipes for lunch for kids &#8211; the recipes are not geared towards kids but of the general population.<\/li>\n\n\n\n<li>Insufficient ingredients for recipes &#8211; most times the recipes that are suggested, the user does not have the necessary ingredients they might need to make the dish. This is especially so for parents\/guardians who plan or prepare their kid\u2019s lunch the night before or the morning when they need to give their child the lunchbox.<\/li>\n\n\n\n<li>Unable to find child-friendly recipes that are quick &amp; easy to prepare &#8211; the recipes that are available requires some lengthy prep and cooking time<\/li>\n\n\n\n<li>Kids don\u2019t get to choose their lunches &#8211; available platforms do not give kids any form of autonomy in choosing their lunch. Children are more inclined to eat the food they choose.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Solution<\/h3>\n\n\n\n<p>In order to curtail some of these problems, my team had created <strong>bento app<\/strong> with the following features:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Quick recipe suggestions &#8211; matching the ingredients the user has available<\/li>\n\n\n\n<li>Recipes based on the user&#8217;s pantry ingredients &#8211; the user has to first input the ingredients they have available at home<\/li>\n\n\n\n<li>Plan lunches &#8211; prepare a weekly meal plan with recipes that are available in the app and assign these lunches to a child\/children<\/li>\n\n\n\n<li>Shopping List &#8211; used to keep track of the ingredients that the user does not have available for a recipe they wish to make<\/li>\n\n\n\n<li>Kids rate lunches -these are the lunches that their parents have assigned to them<\/li>\n<\/ul>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Market Research<\/h3>\n\n\n\n<p>Preparing lunchboxes for kids can be a great task because you have to consider many factors when doing so. Some of these factors include making the meal nutritious and appealing to the kids, especially if they are a picky eater. Busy parents also need to be able to quickly prepare these meals. Therefore, they have a lot less time to think about what to prepare and then actually prepare these meals.<br>Being able to create a weekly meal plan, it allows parents to put more thought into each meal that they want to prepare. Also, preparing a meal plan gives the parents time to decide if they need to get additional groceries and purchase those additional groceries. Planning ahead also cuts down the time to prepare the lunchboxes in the morning.<br>Allowing the kids to have some part in the decision making process of creating these meals makes them more likely to eat these meals.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Competitive Analysis<\/h3>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"900\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/competitive-analysis.png\" alt=\"\" class=\"wp-image-556\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/competitive-analysis.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/competitive-analysis-300x141.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/competitive-analysis-1024x480.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/competitive-analysis-768x360.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/competitive-analysis-1536x720.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Persona<\/h3>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"2078\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/persona.png\" alt=\"\" class=\"wp-image-561\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/persona.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/persona-277x300.png 277w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/persona-946x1024.png 946w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/persona-768x831.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/persona-1419x1536.png 1419w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/persona-1892x2048.png 1892w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">User Flow<\/h3>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"8004\" height=\"3452\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2022\/11\/User-Flow-v2.png\" alt=\"\" class=\"wp-image-252\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2022\/11\/User-Flow-v2.png 8004w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2022\/11\/User-Flow-v2-300x129.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2022\/11\/User-Flow-v2-1024x442.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2022\/11\/User-Flow-v2-768x331.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2022\/11\/User-Flow-v2-1536x662.png 1536w\" sizes=\"auto, (max-width: 8004px) 100vw, 8004px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<ol class=\"wp-block-list\">\n<li>After logging in, the user chooses between parent type and kid type profile. To change account, the user has to logout &amp; login and select which user type they wish to be.<\/li>\n\n\n\n<li>On first login, the user will be directed to the Pantry screen in order to select a few ingredients they have available at home. Otherwise, the Pantry screen is available by clicking the update pantry button on the home screen.<\/li>\n\n\n\n<li>List of ingredients we have in our database<\/li>\n\n\n\n<li>To easily find an ingredient, the user can search for it by name<\/li>\n\n\n\n<li>The user has to select the ingredients they have in their pantry in order to see available recipes based on their selection of ingredients<\/li>\n\n\n\n<li>After applying their selection they get recipe options that uses only the ingredients they have selected in the Pantry screen<\/li>\n\n\n\n<li>they also get other recipe suggestions that may need one or two more ingredients that were not selected by the user<\/li>\n\n\n\n<li>Based on the options they chose from the recipe list screen, they are directed to the single recipe view which shows thhe recipe details.<\/li>\n\n\n\n<li>The user can add the selected recipe to the Lunchbox<\/li>\n\n\n\n<li>If the user selects a recipe that has extra ingredients that the user does not have, a popup will be shown to the customer to inform them.<\/li>\n\n\n\n<li>The Lunchbox section is a weekly meal plan<\/li>\n\n\n\n<li>This shows the recipes of the week that the parent assigned for each day<\/li>\n\n\n\n<li>The user will then send the recipe to the child &#8211; child can only see the picture and name of recipe<\/li>\n\n\n\n<li>Remove recipe from lunchbox<\/li>\n\n\n\n<li>Shoppinglist &#8211; The ingredients items from recipes that the user may wish to purchase on their own<\/li>\n\n\n\n<li>User can search for the ingredient in the list if they cant find it<\/li>\n\n\n\n<li>The user can check or uncheck an item in the list if they have purchased it<\/li>\n\n\n\n<li>User can remove an item from the list<\/li>\n\n\n\n<li>Profile section to manage users<\/li>\n\n\n\n<li>In the parent profile, the user can have multipe kids assigned to them<\/li>\n\n\n\n<li>This is the section where parents can see the recipe ratings that were submitted by their kids<\/li>\n\n\n\n<li>The user gets notified when a kid rates a recipe<\/li>\n\n\n\n<li>The kid can see the meals that are assigned to them for the week<\/li>\n\n\n\n<li>The kid can rate their meal with a smiley face, sad face or neutral face<\/li>\n\n\n\n<li>The kid gets notified about new meals<\/li>\n\n\n\n<li>Past ratings<\/li>\n<\/ol>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Wireframe<\/h3>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"2741\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Wireframe.png\" alt=\"\" class=\"wp-image-565\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Wireframe.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Wireframe-210x300.png 210w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Wireframe-717x1024.png 717w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Wireframe-768x1096.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Wireframe-1076x1536.png 1076w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Wireframe-1435x2048.png 1435w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Recipe Match tab &#8211; shows all the recipes a user can make with only ingredients they have in their pantry<\/li>\n\n\n\n<li>Other Recipes tab &#8211; shows all the available that the user may have one or two ingredients missing in their pantry<\/li>\n\n\n\n<li>Recipe component &#8211; used to show a preview of the recipe with its name, image, overall cook + prep time and amount of ingredients matched.<\/li>\n\n\n\n<li>Floating pantry button &#8211; the user may click this button to go to the pantry screen<\/li>\n\n\n\n<li>Navigation for parent user<\/li>\n\n\n\n<li>Recipe screen &#8211; this screen shows the details for a single recipe<\/li>\n\n\n\n<li>Add to Lunchbox button &#8211; the user clicks this button in order to add the recipe to the Lunchbox<\/li>\n\n\n\n<li>When the user clicks the &#8216;Add to Lunchbox&#8217; button they will be redirected to this screen which is where they choose the day(s) of the week they want to schedule a recipe for<\/li>\n\n\n\n<li>Days of the week to select<\/li>\n\n\n\n<li>Pantry screen &#8211; this is where the user input into the app the ingredients they have available<\/li>\n\n\n\n<li>Selected ingredient item<\/li>\n\n\n\n<li>Ratings screen &#8211; this is where the parent user can see a list of ratings their child have submitted for different recipes.<\/li>\n\n\n\n<li>Recipe rating<\/li>\n\n\n\n<li>Shopping List screen &#8211; when a user clicks on a recipe they do not have all the ingredients for they get the option to add those missing ingredients into the shopping list which are shown on this screen<\/li>\n\n\n\n<li>Shopping list items<\/li>\n\n\n\n<li>Notification screen<\/li>\n\n\n\n<li>Notification item<\/li>\n\n\n\n<li>Manage account screen &#8211; the parent user is able to manage the different profiles from this screen<\/li>\n\n\n\n<li>Parent profile component<\/li>\n\n\n\n<li>The parent user can add more profiles if the wish by clicking this button<\/li>\n\n\n\n<li>Lunchbox screen on the kids profile &#8211; this is where the user can see all the lunches under specific days that their parent had assigned to them<\/li>\n\n\n\n<li>Lunch component &#8211; this shows a preview of the recipe, only showing its picture and name<\/li>\n\n\n\n<li>Navigation for kid user<\/li>\n\n\n\n<li>Kids rating modal &#8211; the user selects a lunch in the lunchbox section in order to get this component. The kid uses it to submit a rating of the lunch to their parent<\/li>\n<\/ol>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Mockup<\/h3>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1682\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-32.png\" alt=\"\" class=\"wp-image-562\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-32.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-32-300x263.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-32-1024x897.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-32-768x673.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-32-1536x1346.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">UI Kit &amp; Branding<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Typography<\/h4>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"262\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/typography.png\" alt=\"\" class=\"wp-image-564\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/typography.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/typography-300x41.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/typography-1024x140.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/typography-768x105.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/typography-1536x210.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<p>The Sniglet font was chosen as the heading font in the app because it is a fun &amp; playful font, which we want to represent in the app because it is for kids.<br>The Outfit font compliments the Sniglet font, and it is more suitable as the body font because it is more readable than the Sniglet font.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Logo<\/h4>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"300\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/logo.png\" alt=\"\" class=\"wp-image-560\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/logo.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/logo-300x47.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/logo-1024x160.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/logo-768x120.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/logo-1536x240.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<p>The following are three colour versions of the logo. During the ideation process of the logo I wanted to incorporate an actual bento box and create a design that is fun and playful. I was able to incorporate the bento box as a logo mark on the left of the logo. Additionally, I was able to make the text playful by modifying the original font.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Colour Palette<\/h4>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"260\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/colour-palette.png\" alt=\"\" class=\"wp-image-555\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/colour-palette.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/colour-palette-300x41.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/colour-palette-1024x139.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/colour-palette-768x104.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/colour-palette-1536x208.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<p>The Yellow &amp; Green were both chosen as the main colours of the app because they represent food, specifically fresh produce. Therefore, we wanted to represent that in our app because it is a food app. The dark grey was used as the text colour while the other colours were used as supporting colours.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Components<\/h4>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1447\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/components.png\" alt=\"\" class=\"wp-image-557\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/components.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/components-300x226.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/components-1024x772.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/components-768x579.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/components-1536x1158.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<p>The following components were designed and created by the team to be used within the Bento app.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Iconography<\/h4>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"10474\" height=\"5892\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2022\/11\/Icons.png\" alt=\"\" class=\"wp-image-266\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2022\/11\/Icons.png 10474w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2022\/11\/Icons-300x169.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2022\/11\/Icons-1024x576.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2022\/11\/Icons-768x432.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2022\/11\/Icons-1536x864.png 1536w\" sizes=\"auto, (max-width: 10474px) 100vw, 10474px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<p>Each of these icons were created by me and were optimised to be used in the Bento app.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Design System<\/h3>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<div class=\"wp-block-advgb-images-slider advgb-images-slider-block advg-images-slider-fbe397e1-d48c-4c5a-a69a-70bd3be7f1e8\"><div class=\"advgb-images-slider\" dir=\"ltr\"><div class=\"advgb-image-slider-item\"><img decoding=\"async\" src=\"http:\/\/tiaogilvie.ca\/wp-content\/uploads\/2022\/11\/Letter-1.png\" class=\"advgb-image-slider-img\" alt=\"\" style=\"width:100%;height:auto\"\/><div class=\"advgb-image-slider-item-info\" style=\"justify-content:center;align-items:center\"><\/div><\/div><div class=\"advgb-image-slider-item\"><img decoding=\"async\" src=\"http:\/\/tiaogilvie.ca\/wp-content\/uploads\/2022\/11\/Letter-2.png\" class=\"advgb-image-slider-img\" alt=\"\" style=\"width:100%;height:auto\"\/><div class=\"advgb-image-slider-item-info\" style=\"justify-content:center;align-items:center\"><\/div><\/div><div class=\"advgb-image-slider-item\"><img decoding=\"async\" src=\"http:\/\/tiaogilvie.ca\/wp-content\/uploads\/2022\/11\/Letter-3.png\" class=\"advgb-image-slider-img\" alt=\"\" style=\"width:100%;height:auto\"\/><div class=\"advgb-image-slider-item-info\" style=\"justify-content:center;align-items:center\"><\/div><\/div><div class=\"advgb-image-slider-item\"><img decoding=\"async\" src=\"http:\/\/tiaogilvie.ca\/wp-content\/uploads\/2022\/11\/Letter-6.png\" class=\"advgb-image-slider-img\" alt=\"\" style=\"width:100%;height:auto\"\/><div class=\"advgb-image-slider-item-info\" style=\"justify-content:center;align-items:center\"><\/div><\/div><div class=\"advgb-image-slider-item\"><img decoding=\"async\" src=\"http:\/\/tiaogilvie.ca\/wp-content\/uploads\/2022\/11\/Letter-7-1.png\" class=\"advgb-image-slider-img\" alt=\"\" style=\"width:100%;height:auto\"\/><div class=\"advgb-image-slider-item-info\" style=\"justify-content:center;align-items:center\"><\/div><\/div><\/div><\/div>\n\n\n\n<\/div>\n\n\n\n<p>The following are some of the components that were highlighted in the design system.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Marketing Assets<\/h3>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"701\" height=\"917\" src=\"http:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/flyer.png\" alt=\"\" class=\"wp-image-558\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/flyer.png 701w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/flyer-229x300.png 229w\" sizes=\"auto, (max-width: 701px) 100vw, 701px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"851\" height=\"1207\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/handout.png\" alt=\"\" class=\"wp-image-559\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/handout.png 851w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/handout-212x300.png 212w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/handout-722x1024.png 722w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/handout-768x1089.png 768w\" sizes=\"auto, (max-width: 851px) 100vw, 851px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1300\" height=\"1362\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/social-posts.png\" alt=\"\" class=\"wp-image-563\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/social-posts.png 1300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/social-posts-286x300.png 286w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/social-posts-977x1024.png 977w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/social-posts-768x805.png 768w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<p>The marketing assets were created for promotional purposes for the bento app. The handout and flyers were designed by me as a printed asset to be handed out on our presentation day. The Twitter and LinkedIn posts were designed by me as a digital asset to be posted on the respective platforms.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview Bento is a mobile app created to help parents find recipes quickly for their kid&#8217;s lunch based on ingredients present in their kitchen. These recipes can be added to a meal schedule in order to plan lunches for a week. Additionally, children have access to their own user profile where they are able to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":490,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-251","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-group-project"],"author_meta":{"display_name":"tiaogilvie","author_link":"https:\/\/tiaogilvie.ca\/?author=1"},"featured_img":"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/05\/bento-300x260.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/tiaogilvie.ca\/?cat=18\" class=\"advgb-post-tax-term\">Group Project<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Group Project<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 5 months ago","modified":"Updated 12 hours ago"},"absolute_dates":{"created":"Posted on 29 November 2025","modified":"Updated on 27 April 2026"},"absolute_dates_time":{"created":"Posted on 29 November 2025 12:35 am","modified":"Updated on 27 April 2026 9:25 pm"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/posts\/251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=251"}],"version-history":[{"count":44,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/posts\/251\/revisions"}],"predecessor-version":[{"id":643,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/posts\/251\/revisions\/643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/media\/490"}],"wp:attachment":[{"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}