Weingartz Promotions

Website sharing available Weingartz promotions to customers. Custom menu designed through JavaScript.

Mobile Design

UX/UI

Prototyping

Client

SI 482: Interaction Design Studio

Date

September 2024-December 2024

Tools

Figma
FigJam
Miro

Prototype

Figma Prototype Link

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

Food Tracker

Manage your fridge, freezer, and pantry with inventory tracking, expiration alerts, and categorized lists.

Recipe Hub

Discover recipes that prioritize soon-to-expire items to reduce waste and inspire creativity.

Grocery Lists

Simplify shopping with personalized lists generated from your habits, current inventory, and meal plans.

Calendar

Manage your food with a calendar that schedules expiration reminders, grocery trips and more.

Aalto mobile app UI with two home listings and a title at the top saying 12 new matches

Aalto mobile app screen showing Seller Q&A with collapsable questions and answers

Mobile screen showing a kitchen with a virtual tour badge

Aalto mobile app UI of home front door, confetti and the word Congratulations at the top and the home name below with the label of sold

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

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

InDesign
JavaScript
In5
Python

Website

buyersguide.weingartz.com

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 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

InDesign
JavaScript
In5

Website

promotions.weingartz.com

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

InDesign
JavaScript
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.

CLIENT

Weingartz

PROJECT TYPE

Web Design

PROJECT YEAR

2024

Tools

Indesign
In5
Javascript
HTML
CSS

In5
Javascript
Indesign

Indesign
In5
Javascript
Python

The problem

The promotions site is used to share all available promotions for our equipment. Users were finding it difficult to search through each rebate. I was tasked with designing a main menu that would make it easier for customers to search through the promotions.

View Buyers Guide Site

View Promotions Site

1import os
2import tkinter as tk
3from tkinter import filedialog
4
5text_us_script = "<script async src='script-name' type='text/javascript'></script>\n"
6insert_line = "<link rel="stylesheet" href="assets/css/pages.css" media="all">"
7
8root = tk.Tk()
9root.withdraw()
10html_dir = filedialog.askdirectory(title="Select Buyer's Guide Output Folder with HTML Files")
11
12if html_dir:
13    for filename in os.listdir(html_dir):
14        if filename.endswith('.html') and filename != 'index.html':
15            file_path = os.path.join(html_dir, filename)
16            
17            with open(file_path, 'r') as file:
18                content = file.readlines()
19            
20            for i, line in enumerate(content):
21                if insert_line in line:
22                    content.insert(i, text_us_script)
23                    break
24            
25            with open(file_path, 'w') as file:
26                file.writelines(content)
27
28    print("Line added to all Buyer's Guide HTML files except index.html.")
29else:
30    print("No folder selected.")

faster exports

50% Faster export

The buyers guides use a Text Us widget that connects customers directly to sales and service representatives, resulting in conversions and scheduled service for equipment. This needs to be added on each 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.

A Javascript widget that connects customers directly to sales and service representatives, resulting in conversions and scheduled service. I created a Python script to automatically add the widget after each in5 export. Guides have up to 10 pages, saving time for each export.

Display Issue

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.

Display Issue

Future Additions

Creating a more mobile friendly design using In5's liquid layout.

Outcome

An easy tool for sales to communicate the best product for each customer, giving them the information to sell a better fit.

Client

Date

Tools

Prototype

The Challenge

Our Solution

Food Tracker

Recipe Hub

Grocery Lists

Calendar

Early Observations

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

User Personas

Initial User Flow

Initial Sketches

Mid-Fidelity Wireframes

Usability Testing

Title

Title

Title

High-Fidelity Wireframes and Prototype

Changes

Client

Date

Tools

Website

Context

Solution

CTA Issues

Price Changes

Improved File Exports

Outcome

Client

Date

Tools

Website

Context

Solution

Adding A Custom Menu

Outcome

Client

Date

Tools

Website

Context

Solution

Refresh Challenge

Responsive Design

Weingartz Promotions

Other Projects