MOBILE
APP
Using the science of the HopTechnic® lab, we created an innovative app that revolutionizes the brewer's hop selection process with a proprietary flavor profile selector. The app does not actually pour beer… yet.
![](https://assets-global.website-files.com/62c71c3534c22355d21d6c2c/62c71c3534c223853d1d6e58_AppOverview_Preview.jpg)
App Overview
![](https://assets-global.website-files.com/62c71c3534c22355d21d6c2c/62c71c3534c223807e1d6e59_Brewer_Preview.jpg)
Brewer Overview
![](https://assets-global.website-files.com/62c71c3534c22355d21d6c2c/62c71c3534c2232c321d6e57_Distributor_Preview.jpg)
Distributor Overview
![](https://assets-global.website-files.com/62c71c3534c22355d21d6c2c/62c71c3534c2237f811d6e61_AppGallery_1.jpg)
App Gallery
Icons
We developed icons to be used through out the app, site and printing materials that translate what the HopTechnic lab does in a visual form.
![](https://assets-global.website-files.com/62c71c3534c22355d21d6c2c/62c71c3534c2234ed01d6e53_Artboard%201HopVarietySelector.svg)
Hop Variety Selector
![](https://assets-global.website-files.com/62c71c3534c22355d21d6c2c/62c71c3534c223fbf21d6e4f_Artboard%201FlavorProfileSelector.svg)
Flavor Profile Selector
![](https://assets-global.website-files.com/62c71c3534c22355d21d6c2c/62c71c3534c223acf01d6e50_Artboard%201spyderchart.svg)
Spyder Chart
![](https://assets-global.website-files.com/62c71c3534c22355d21d6c2c/62c71c3534c223b4a51d6e52_Artboard%201HopInventory.svg)
Hop Inventory
![](https://assets-global.website-files.com/62c71c3534c22355d21d6c2c/62c71c3534c22331681d6e51_Artboard%201LabSupport.svg)
Lab Support
![](https://assets-global.website-files.com/62c71c3534c22355d21d6c2c/62c71c3534c22359b91d6e4e_Artboard%201CodeActivation.svg)
Code Activation
PRINT
DESIGN
Designed and placed magazine ads in national industry publications.
HopTechnic®
Site
We built a reactive website with a back-end portal for data input from the HopTechnic lab.
// All Slliders
$('.next-splide').click(function() {
$(this).closest('.splide').find('.splide__arrow.splide__arrow--next').click();
});
$('.prev-splide').click(function() {
$(this).closest('.splide').find('.splide__arrow.splide__arrow--prev').click();
});