YCH Tools
Transformed an inaccessible data lookup tool into a flagship product experience for one of the world's largest hop suppliers.
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.
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.
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.
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.
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.
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.
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.
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
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.