YCH Tools — John Venters

Problem

The data was valuable. Nobody could read it.

Yakima Chief Hops supplies hops to breweries around the world. For brewers, lot-level analysis data (alpha acids, oil profiles, aroma compounds) is critical to recipe formulation. YCH had this data and a tool to access it, but the tool was barely functional. The landing page split the screen between two large tiles with inaccessible color contrast. Clicking through to lot lookup revealed a full-width search bar above a largely empty page, and results returned as raw four-column tables where keys and values shared the same cell with no visual hierarchy. There was no way to compare multiple lots simultaneously, something brewers regularly needed when selecting hops for a recipe. The brewing calculators existed in a similarly degraded state. YCH is owned by a cooperative of hop growers, and the board approves projects based on demonstrated community demand. Brewers and growers had been asking for a better tools experience, and the redesign was approved because the existing tool was failing the people whose purchasing decisions depended on it.

The original lot lookup result as four plain tables for acids, oils, other values, and methods — fig.01The original YCH Tools: a basic table layout with poor accessibility, no charts or graphs, and no easy way to compare lots side by side

Constraints

YCH's well-established brand standards had to be respected throughout
The YCH design system and component library I was building in parallel had to serve this application and future ones simultaneously, meaning design system decisions had direct implications for what was feasible here
Design and implementation ran concurrently with other active projects

Approach

Make the data the interface.

The central design decision was that lab and sensory data should drive the visual language rather than being listed in a table. Radar charts made aroma profiles immediately legible at a glance. Range indicators showed where a lot fell relative to typical variety ranges. Color-coded comparative overlays made multi-lot evaluation possible for the first time. All designs were taken directly to high fidelity using the Figma component library built for YCH, allowing stakeholders (brewers, hop growers, and internal sensory and lab teams) to evaluate a complete, realistic prototype rather than a wireframe. Design decisions were largely resolved before implementation began.

01 · Lot lookup redesign

Replaced the raw table result with structured data cards, a radar chart aroma profile, range indicators for acid and oil values, and a persistent search interface. Introduced barcode and QR code scanning for looking up lots directly from boxes in the field.

02 · Lot comparison

Designed and built a net-new comparison feature allowing brewers to evaluate up to three lots side by side with overlaid radar charts and parallel bar charts per compound category. A table view toggle served users who preferred reading specific values directly.

03 · Brewing calculators

Redesigned the existing IBU and Hop Extract conversion calculators from a degraded prior state into a consistent tool suite with clear inputs, contextual explanations, and print and download options. Added a new CryoHops usage calculator to the suite.

04 · Implementation

Two-person team (myself and one senior fullstack developer) over two months. I taught myself ChartJS to implement the visualization work I had designed rather than redesigning to fit what I already knew, building all charts to be responsive and accessible. Also built a custom Google Maps integration for farm location modals displaying the geographic origin of each lot's hops.

Solution

From data table to data experience.

The redesigned YCH Tools shipped as a public-facing customer platform serving brewers and growers worldwide. The lot lookup experience was rebuilt around a persistent search interface, structured result cards, and radar chart aroma profiles that made lot character immediately readable. The comparison tool gave brewers a side-by-side evaluation capability that had previously required manual spreadsheet work. The brewing calculator suite was consolidated and standardized using the YCH design system, establishing the visual and component foundation used across subsequent YCH applications.

fig.02Chart view: a single lot's alpha acids and total oil against typical variety ranges, with its aroma profile radar chart and bar charts for brewing values, oil components, and survivable compounds

Lot comparison table view with categorized sections and shared row headings across three lots — fig.03Table view: the toggle shows the same data as the charts in a pure data layout, with shared row headings, categorized sections, row highlighting on hover, and add/remove lots. Useful for accessibility and for comparing across lots or years

Kettle Addition IBUs calculator with boil time, volume, and gravity inputs, two kettle additions, and a total IBU result — fig.04IBU estimator: brewers set boil time, volume, and post-boil gravity, then add kettle additions by hop variety, product, and boil time to estimate a brew's IBUs before they brew it

Cryo Hops calculator with brewery inputs and results comparing T-90 pellets with Cryo Hops revenue and beer output — fig.05Cryo Hops calculator as I left it, comparing T-90 pellets with Cryo Hops to estimate revenue and beer output gains. The team has continued to build on it since

Extract Conversion Calculator converting hop pellets to extract, with equivalent total and remainder results in GMA — fig.06Extract conversion calculator: converts between hop pellets and extract, showing the equivalent total and the remainder in GMA tins

A brewer viewing a lot comparison with charts on a tablet next to brewery tanks — fig.07In the brewery: tools like the barcode scanner let brewers quickly pull up relevant data for the boxes of hops they receive from YCH

Outcomes

What shipped, and what it moved.

Transformed an inaccessible, table-based lookup tool into a data-visualization-driven product experience for a global customer base of brewers and growers
Introduced lot comparison functionality for the first time, replacing a manual spreadsheet workflow for brewers evaluating multiple hop varieties
Resolved multiple WCAG accessibility failures in the previous tool including failing contrast ratios on primary interactive surfaces
Built ChartJS-powered visualizations from scratch: responsive radar charts and compound bar charts across single-lot and multi-lot comparison views
Established the YCH design system and component library in production, providing the visual and component foundation for the Sensory App and other subsequent internal tools
Received consistent positive feedback from brewers on the added clarity, visual depth, and analytical capability of the redesigned experience

Retro

What I'd do differently

With more time I would have pushed for formal usability testing with actual brewers before launch rather than relying on stakeholder review alone. Brewers have specific mental models around lot data shaped by years of recipe work, and some assumptions about how they would interpret the radar chart layout (particularly the ordering of aroma compounds on the chart) were not surfaced until after launch. The high-fidelity prototype approach accelerated stakeholder alignment significantly and I would use it again, but I would pair it with at least one round of testing with end users before shipping. I would also note that the CryoHops calculator has since been expanded into a broader Efficiency Calculator covering multiple process stages, a sign that the platform is being actively built on, which is the right outcome for a tool designed to grow.