Tools App (YCH)

← Back to Software

As the UI/UX Developer at Yakima Chief Hops, I redesigned the Tools application to include additional features and information, streamline user flows, and enhance layouts for better visual appeal and understanding. The main focus of this redesign was the Lot Lookup tool, but the calculators also received a refresh.

Core Features:

Lot Lookup: Empowers brewers with a wealth of scientific information about the specific lot* their hops came from and allows them to compare lots.
* A lot is a segment of a hops field (or combination of hops fields) that's been refined into a particular product. YCH performs laboratory analysis on nearly every lot it gathers from growers to ensure it meets the standards for a given hops variety (strain).
Cryo Calculator: Allows brewers to calculate how much money they can expect to save if they switch from pellets to Cryo Hops.
IBU Estimator: Allows brewers to accurately estimate the IBUs (International Bitterness Units) their beers will have based on the exact hop varieties, kettle temperatures used, and the stage at which they introduce additional hops to their kiln.
Extract Converter: Allows brewers to calculate from other hop products to Extract or vice versa, so they know exactly how much to use when switching from one to the other.

My Contributions:

Worked with stakeholders to gather requirements.
Developed mockups/prototypes in Figma and iteratively presented them to stakeholder groups for feedback.
Created a custom search component to search for lots and display recent search queries.
Assisted with development in Vue 3 and ensuring front-end styles matched design specs.
Learned ChartJS to create graphs and charts and found ways to make them more dynamic and responsive to screen size.
Wrote initial copy and worked with the marketing and data science departments for approval.

Please note: The Tools app is proprietary software for which Yakima Chief Hops retains all intellectual property rights.

Platform: Web | Framework: Vue 3 | Software: Figma, PHPStorm | https://tools.yakimachief.com/

Information

Prototypes

Old Lot Lookup (Before Redesign)

This is what Lot Lookup looked like before the redesign

New Single Lot View (After Redesign)

Improved organization, 'at-a-glance' interpretation, responsiveness, and visual aesthetics.

Multi-Lot Compare (Chart View)

Brewers can now compare lots side-by-side to see how they stack up.

Multi-Lot Compare (Table View)

Brewers who want to view the same information as a data table can do so as well.

Cryo Calculator

Allows brewers to quickly calculate potential savings from switching to Cryo Hops

IBU Estimator

Allows brewers to quickly get accurate IBU estimates for their beers before they brew them

Extract Converter

Allows brewers to determine how much product to use when switching to/from extract to another product type.