FoodWise

A mobile app empowering users to reduce food waste and make sustainable choices.
Mobile Design
UX/UI
Prototyping
Client
SI 482: Interaction Design Studio
Date
September 2024-December 2024
Tools
  1. Figma
  2. FigJam
  3. Miro

The Challenge

Food waste is a critical global issue, with individuals contributing significantly to the 2.5 billion tons wasted annually. Food waste in individual households is often caused by inefficient food inventory tracking and management. This problem affects busy parents, young professionals, and eco-conscious individuals, leading to expired items, unnecessary purchases, and wasted resources.

The Solution

A food tracker app.

Early Observations

We interviewed 10 potential users to identify pain points within their food management. Our goal was to understand their current habits, challenges, and needs in tracking their food.

Recipe-centric shopping results in wasted leftover ingredients.

A solution needs to seamlessly integrate into existing routines.

Participants buy more produce than they need, leading to spoilage.

Competitive Analysis

Description

User Personas

Description

Initial User Flow

Description

Initial Sketches

Description

Mid-Fidelity Wireframes

Initial wireframes involved onboarding and adding items to fridge task.

Click or use keyboard arrows to interact.

Usability Testing

We conducted usability tests with 4 users. They were instructed to complete the onboarding process and add one item to their fridge.

Title

Title

Title

Insufficient confirmation for item addition

All users were unsure if an item was added or where to find the item after it was added.

Changes

Weingartz added a 'View Pricing & Financing' button that would link to the specific buyer's guide page containing the model. This solution allowed customers to view varying price points and provided a tool for sales members to guide customers towards the best model based on their needs.

Outcome

Weingartz added a 'View Pricing & Financing' button that would link to the specific buyer's guide page containing the model. This solution allowed customers to view varying price points and provided a tool for sales members to guide customers towards the best model based on their needs.

Buyer's Guide

Weingartz needed a way to easily display varying prices to customers. I created an interactive website to solve this problem.
Web Design
UX/UI
Prototyping
Client
Weingartz
Date
January 2024-March 2024
Tools
  1. InDesign
  2. JavaScript
  3. In5
  4. Python

Context

High-cost products have varying price points depending on cash, credit, or financing payment methods. Weingartz had no way to display these prices beyond a 'Contact Us' button on their website.

Solution

I created a mock-up in InDesign, consulting with Weingartz's CEO and marketing team throughout the design process. The final revision was then exported using In5 to create an interactive website for users.

Notable design decisions included an emphasis on various payment methods and detailed product specifications for easy comparison between models.

CTA Issues

The first iteration used the model number headers as the access point back to Weingartz's website. Users often did not realize these headers were clickable so a 'View More' button was added.

Improved File Exports

The buyer's guide uses a 'Text Us' widget to connects customers directly to sales and service representatives, resulting in conversions and scheduled service for equipment. This needs to be added on every html page after each export. With some guides being 10 pages, this takes up a significant portion of time. I created a Python script to automatically add the widget after each In5 export, saving the team 10 minutes on each export.

Additionally, the default settings for the Text Us widget would overlay on zoom buttons, preventing users from viewing information more closely. I reviewed the generated HTML, CSS, and JavaScript code to identify the classes used by the widget. From this, I was able to add custom CSS within the In5 export, moving the widget up enough to allow users to interact with the zoom buttons.

Outcome

Weingartz added a 'View Pricing & Financing' button that would link to the specific buyer's guide page containing the model. This solution allowed customers to view varying price points and provided a tool for sales members to guide customers towards the best model based on their needs.

Weingartz Promotions

Weingartz needed a way to share promotions to customers. I created an interactive website to solve this problem.
Web Design
UX/UI
Prototyping
Client
Weingartz
Date
January 2024-March 2024
Tools
  1. InDesign
  2. JavaScript
  3. In5
  4. Python

Context

High-cost products have varying price points depending on cash, credit, or financing payment methods. Weingartz had no way to display these prices beyond a 'Contact Us' button on their website.

Solution

I created a mock-up in InDesign, consulting with Weingartz's CEO and marketing team throughout the design process. The final revision was then exported using In5 to create an interactive website for users.

Notable design decisions included an emphasis on various payment methods and detailed product specifications for easy comparison between models.

CTA Issues

The first iteration used the model number headers as the access point back to Weingartz's website. Users often did not realize these headers were clickable so a 'View More' button was added.

Improved File Exports

The buyer's guide uses a 'Text Us' widget to connects customers directly to sales and service representatives, resulting in conversions and scheduled service for equipment. This needs to be added on every html page after each export. With some guides being 10 pages, this takes up a significant portion of time. I created a Python script to automatically add the widget after each In5 export, saving the team 10 minutes on each export.

Additionally, the default settings for the Text Us widget would overlay on zoom buttons, preventing users from viewing information more closely. I reviewed the generated HTML, CSS, and JavaScript code to identify the classes used by the widget. From this, I was able to add custom CSS within the In5 export, moving the widget up enough to allow users to interact with the zoom buttons.

Outcome

Weingartz added a 'View Pricing & Financing' button that would link to the specific buyer's guide page containing the model. This solution allowed customers to view varying price points and provided a tool for sales members to guide customers towards the best model based on their needs.

Weingartz Resources

Weingartz has a surplus of available company resources for their sales and service team members. I was tasked with creating a solution to consolidate this information.
Web Design
UX/UI
Prototyping
Client
Weingartz
Date
June 2024
Tools
  1. InDesign
  2. JavaScript
  3. In5

Context

In this UX design project, I tackled the challenge of creating a centralized resource hub for Weingartz, a leading outdoor power equipment company. The goal was to develop a user-friendly platform that would consolidate various resources for marketing, sales, and service teams, enhancing efficiency and collaboration across departments.

‍Weingartz's teams were struggling with scattered information and disjointed processes, leading to inefficiencies in customer service, delivery scheduling, and accessing crucial reports. M task was to create an intuitive, comprehensive solution that would streamline operations and improve overall productivity.

Solution

A homepage to hold all resources in one location.

Refresh Challenge

The buttons grow larger with a hover state. The initial export options resulting in the buttons remaining large after being clicked and returning to the page.

I reviewed the exported code and identified the problem function causing the error. I then developed a custom JavaScript code to resolve this issue.

Responsive Design

In5's liquid layout feature was used to develop a responsive design. A full screen desktop view shows a two-column layout while a smaller screen shows one scrollable column. The top header was also animated to hide when a user scrolls farther down the page.

No items found.

Other Projects