Calypso: Strain Guide & Menu Builder

While many of our other pages include hero images, I saw this as a catalog of sorts and opted to keep the focus on the product itself. One customer need we wanted to address was comparing the relative effects of the strains. So, while the initial state of each strain card provides basic information, if the stats icon is selected users can see and compare the relative effects and terpenes. This page also includes a call-to-action for the menu builder, which generates a customized menu of strains based on their details.

Upon selecting a strain the user navigates to the strain details page where they are provided with more details about effects, terpenes, and applicable ailments. This page also allows users to manually add and remove the strain from their menu.

Selecting the menu builder from the strain guide page navigated the user to the menu builder; a simple three-step process which generates a custom menu based on the users usage, ailments, and desired effects. This is achieved by dynamically setting local storage arrays for each set of options and generating the menu based on the selections which are weighted to achieve the appropriate results.

Once the menu is generated as described above the user is navigated to their customized menu, which can then be altered manually while exploring an of the strain detail pages. They can also use this page to email themselves their custom menu to share with their dispensary for addition help. Once a menu is established a fixed button appears in the bottom right to allow navigation from anywhere else on the site. Because we don’t support user accounts, the user’s menu is also stored in local storage as an array of IDs. On page load, the strains are filtered for display and a block of HTML is generated and stored in an hidden form input to be appended to the email.