PlateMate

Swift, Xcode IDE

Platemate is an iOS app that generates a weekly menu and subsequent grocery list for a user using like ingredients. I created this app for use in my own life, as a college student who had recently moved out and struggled with planning healthy meals with ingredients that could be reused throughout the week.

Role: designer, developer  |  Date: 2023

The original platemate

Originally, PlateMate was created for a final project for NMIX 4330 at UGA, aka iOS app development. Due to time constraints, I spent a very limited amount of time working on the design or structure of the app.

Inspiration board image
Original PlateMate design start screen
Inspiration board image
Original PlateMate design generated recipes screen
Inspiration board image
Original PlateMate design browse recipes screen
Inspiration board image
Original PlateMate design shopping list screen

Redesign

About a year after completing and forgetting about the original PlateMate, I was planning out my grocery shopping list and remembered the app. I did design it as something for me to use, afterall. Unfortunately, upon launching the app I was met with an awkward and clunky UI. A few days later, I jumped into redesigning the UI in Figma to be more sleek and user-friendly.

I decided on an orange and white color palette, with soft muted colors. The color scheme of the weekly recipe generating app was chosen to evoke warmth and simplicity, enhancing the user experience. A light orange cream background provides a comforting backdrop, while soft orange accents highlight key elements. Black text ensures readability, and white serves as a secondary accent for clarity and organization.

Inspiration board image
Color palette

My favorite page to redesign was the browse page. In the original design, it was difficult to navigate, with only up to 4 recipes being shown on the screen at one time and no ability to search. In the updated design, I added a grid layout so the user could sort through double the amount of recipes at a time, as well as added a search function at the top of the screen.

Inspiration board image
Original browse page
Inspiration board image
New browse page

Starting over with development

When I went in to add some more features to the app, like adding more recipes and giving the user the ability to select multiple dietary restrictions, I realized that the design was not the only thing that needed work. I decided to rewrite all of the code.

I created observable objects for the user preferences, generated recipes, and recipes list. Ingredients and recipes became stored in identifiable structs. I decided to make ingredients hashable in order to make the shopping list not have repeat items, a problem I had in the original app.

One challenge I came across in the new app was creating an algorithm that chooses which recipes to include in the final menu. In the original app, the recipes were randomly chosen, but this time, I wanted the recipes to share common ingredients to decrease grocery lists. I created the createMenu function to solve this issue. It starts by choosing a random recipe from the recipe list to base the rest of the menu off of. The function then iterates through the other recipes, choosing one with the most common ingredients. I included a random boolean value, and if it is true the recipe with the most common ingredients is added to the menu. I decided to make it so it is not always added in order to ensure every menu is not the same.

Inspiration board image
Create menu function (1/3)
Inspiration board image
Create menu function (2/3)
Inspiration board image
Create menu function (3/3)

Once I finished restructuring the code, I added the design elements to it that I had designed earlier in Figma and the app all came together.

Inspiration board image
Home screen design created in Figma
Inspiration board image
Home screen created in Xcode
Inspiration board image
Recipe details view design in Figma
Inspiration board image
Recipe details view created in Xcode

THE FINAL PRODUCT

In the future, I plan on adding more functionalities to the app, such as giving users the ability to add their own recipes to the app, and eventually publishing the app to the app store.

Inspiration board image
Start screen
Inspiration board image
Welcome screen
Inspiration board image
Home screen
Inspiration board image
Browse screen
Inspiration board image
Saved recipes screen
Inspiration board image
Shopping list screen
Inspiration board image
Allergens select screen
Inspiration board image
Gif of final product in Xcode simulator
View on Github → ← Back to projects