DOS PASIONES MEZCAL
WEBSITE
A family and independently owned distillery, or pelenque, in the heart of Oaxaca creting exceptional mezcal for over 70 years. After establishing it's initial digital presence 4 years ago with a simple goal of fast and cheap, we've returned and give it a refresh now that we all have a bit more time.
PROJECT DETAILS
ROLE
Lead Designer & Front End Developer
TEAM
Miguel Martinez
TOOLS
Figma, Adobe Illustrator & Photoshop, Squarespace, Claude
GOALS
PROJECT GOALS
Establish a navigation that scales.
Maintain dual language support without SaaS subscription.
Introduce immersive scrollytelling elements.
Increase branding and marketing presence.
Add age gate.
STRATEGY
Expand on the utility of the site, establishing a more branded and engaging experience.
NAVIGATION
Global Header + User Flow Update
The site architecture was initially set up around dual language support, with parent categories English and Spanish. This eliminated the need for a translation service but limits the scalability of the site.
Moving the language support out of the navigation and to the page level, we gain an additional layer of navigation.
Initial navigation
Updated Menu Style
We still had a problem though..
On Desktop, the first layer of navigation was evergreen though on mobile it was within a hamburger menu creating a few drawbacks. Several long labels creating a cluttered appearance in the desktop header. Tucking them into a single drop down cleans this up but creates an additional unnecessary click when navigating mobile.. a first layer menu of just a single item.
Also, why don’t we have a proper logo in the header?
Updated Global Header + Navigation
Solution
Order a burger and asset creation!
Order Up, Hamburger for Desktop..
Force the mobile hamburger menu into the desktop viewport while maintaining the evergreen social links and “Find A Bottle” CTA.
This required manual coding to achieve, but gives us a cleaner global header that maintains the same number of clicks and same prominent “Find A Bottle” CTA. For mobile, the additional click is eliminated and now available for when an additional layer of navigation is introduced.
Horizontal lockup
Asset creation
A horizontal lockup is created for the global header and other marketing needs.
COMPLIANCE
Play/Pause ADA + FTC Date Of Birth
ADA COMPLIANCE
Squarespace allows a video as background to be set as autoplay but does not provide the ADA required play/pause button.
We considered moving to a static image but users reported liking the opening video so we started looking for a solution. After chatting with Claude, we targeted the section and introduced the required controls so users can now stop the motion if needed.
Interesting side note, the solution was not the same for Vimeo hosted video (this portfolio site) so I had to work that code out to maintain compliance.
FTC Recommended Guidelines
Federal TTB regulations do not prescribe one universal website-age-gate format however the FTC recommends that alcohol-company websites use an age gate requiring the visitor to enter date of birth, not simply click a “I am 21+” CTA.
Back to Claude…
Javascript was used to develop a solution that requires users to enter their MM/DD/YYYY date of birth while leveraging first party cookies (~30day) to reduce impact on legal users. Legal copy was added to the footer, also following FTC recommendations.
Don’t worry, we’re currently creating a “dark version” horizontal logo lockup so we can eliminate the light background.
Updated Footer
Original Footer
