THE BRIEF:

Build a web app that allows users to create, schedule, and execute meal plans and recipes using an intelligent and intuitive interface. Developed on a team of five as a final capstone project for TechElevator’s full stack Java bootcamp.

THE RESULT:

The “Chef de Cuisine” sets the menu and plans execution of all meals in a traditional French kitchen. They captain the ship. De Cuisine puts that power into the hands of home cooks by allowing them to find and create recipes, create cohesive and repeatable meal plans, schedule them into the future, and manage their groceries with a single click.

Great care was taken for optimizing user paths. Wireframes were developed either on paper or digitally, and before build we would do walkthroughs to address what we felt the impulse to do on each page. I wanted to make sure a user could get anywhere relevant from anywhere without ever having to backtrack.

At each step, we thought about how to encourage the user to use the app optimally through visual cues and clear signage/language. Responsive search bars that changed results in real time, automatic import buttons, and draggable objects all figured into this.

All MVPs + nice to haves met within timeframe. Public presentation met with excellent reviews; high praise for interface design.

THE PRODUCT:

DRAG AND DROP CALENDAR

The flagship feature of De Cuisine is the intuitive meal plan creator and calendar. A user can add or remove days from their meal plan, and each day can be unique. Choosing each meal is also made easy using autocomplete. As a user begins typing a recipe name, the box will suggest similar recipes to add to that slot (early version screenshot)

Once they have saved their meal plan, they are redirected to their meal plan calendar. Saved meal plans appear as a card in the sidebar.

Users can simply drag and drop those meal plans to the calendar to schedule them. The user may then drag the meal plan around on the calendar to change its start date, click it to see meal plan details, or even double click it on the calendar to remove it. (early version screen recording)

GROCERY LIST

A user may add all the ingredients from their meal plan to their grocery list with the push of a button within their meal plan detail view. If items appear more than once, their quantities are added together and displayed as a single item.

A user may also edit their grocery list, adding or removing items as needed using autocomplete. When they’re at the store, they can check off items they have found, and then delete those checked items without even needing to go to the editor.

RECIPES

Once signed in, the user can browse the recipe database using an autocomplete search bar that dynamically displays recipes with matching titles. A user may then click on the thumbnail to see recipe details. The user may also add ingredients for the recipe to their grocery list (more on that later). (early version screen recording)

To edit a recipe, the user simply presses the button in the top right corner of the recipe card, which opens a form where they can modify the recipe details. The form allows the user to add or delete ingredient slots as needed. Both the ingredient name and unit fields feature autocomplete, offering suggestions from our extensive ingredient and unit database as the user types.

This form serves dual purposes: creating new recipes and editing existing ones. When editing, the form is pre-populated with the current recipe data from the database. In this case, the "Submit" button is labeled "Save," and when pressed, the updated information replaces the original data at the recipe's unique "Recipe ID" in the database using a PUT method. For new recipes, submitting the form triggers a POST method, saving the recipe to the database.

THE PROCESS:

TIME: ~2 weeks

METHODOLOGY: Condensed agile inspired sprints (3 days/sprint)

TEAM: 5 full stack developers, 1 product owner

MY ROLE: Lead of design/UX/UI + full stack developer

TECH STACK:

  • FRONT-END: Vue.js, HTML, CSS, JavaScript

  • BACK-END: Java, PostgreSQL

  • UI/UX: Figma, Canva, Adobe Suite

  • PLANNING/COMMUNICATION: Trello, Confluence, Slack, Zoom (remote team workflow)

INSPIRATION:

PLANNING:

Design language inspired by traditional rural French brands and imagery. Key points are imagery that captures process of preparing and serving home cooked meals, color palates that draw on natural tones, and a sense of luxurious ease and simple abundance.