Buyer's Guide

Product comparison tool developed by industry experts.
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 pressing global concern, significantly driven by personal consumption patterns. In many American households, poor management and tracking of food inventory are notable contributors of waste. This problem leads to expired food, redundant purchases, and misused resources.

Our Solution

A food tracker app to reduce food waste

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

Based on our user interviews, we developed 5 personas.

Initial User Flow

We developed a user flow based on our user research, focusing on 5 connected flows.

Initial Sketches

Rapid ideation of potential features.

Click or use keyboard arrows to interact.

Mid-Fidelity Wireframes

Initial wireframes involved onboarding and adding items to fridge task.

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

High-Fidelity Wireframes and Prototype

After further usability testing, we prototyping interactions for FoodWise's key features.

Click or use keyboard arrows to interact.

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.

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.

Price Changes

Certain John Deere models have different price points depending on mower deck size. I implemented a button to show prices based on the selected deck size.

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

Context

Weingartz has a surplus of available promotions. We wanted to display these promotions in an easily accessible location for customers.

Solution

I created a multi-paged website using InDesign and the plugin In5. We linked this site on Weingartz's homepage for customer access.

Adding A Custom Menu

After our first iteration, we spoke with customers and the Sales team on future improvements. Customers desired an easier way to move between pages. I reviewed the In5 generated HTML and JavaScript code and wrote JavaScript code to add a menu. This menu leveraged the existing thumbnails, allowing users to readily move between promotions.

Outcome

Users

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.
No items found.

Other Projects