#024: MANA yerba mate
An animated graphic universe for organic health drinks? Hold my card.
We’re back with a new edition of Web Wizards! I’m psyched for this edition because this website is simply out of this world. And I don’t use those words lightly. When you think of an organic, healthy product, you might imagine earthy tones, lots of nature, you get the gist. Well, here’s a website for an organic healthy drink that went against those expectations by being bold, adventurous and colorful!
Got a cool website you’d like to see featured? Let me know by replying to this email or reaching out.
An Intro
My name is Louis Paquet (he/him) and I’m a Montréal-based Creative Director working at Tux Creative House. I lead the digital team while staying a hands-on designer and creating brand narratives via interactive web experiences. I’ve been designing websites for a little over 12 years now.
➤ Socials: Website, Twitter, Instagram
About the Site
Mana is a Montréal-based company that produces cans of Yerba Maté. We wanted to create a fun website that represents the boost of energy that you get from drinking Mana, Yerba Maté.
URL: en.manayerbamate.com
Collaborator(s): Michaël Garcia: Front-End Development / Pam: Back-End Development
Tools: Shopify
Q&A
What did your concept ideation process look like for this project?
Yerba Mate being an organic, natural, and healthy energy drink. Most brands on the market focus solely on this aspect. For Mana, we wanted to do things differently and focus more on the "energy boost" side, with vibrant colors, "in your face" animations, and playful interactions.
How did you strike a balance between creativity and functionality in this website design or build?
The ultimate goal of the website was to sell the products, so we had to find the right balance between the fun and functional aspects. One could say that we aimed for a "funtional" site. The homepage serves as both a portal to buy the different flavors of the brand but also educates on the benefits of Yerba Mate, which are still largely unknown to the public. But all in a colorful and animated graphic universe unique to Mana, where each flavor has its own graphic universe and color palette.
What challenges did you have whilst designing/building this site?
The website needed to be really fast and easy to navigate. We built it on the Shopify platform to offer users the most fluid and complete shopping experience possible. Want to buy a case of Mana? It only takes 4 clicks to complete your transaction! Are you a big fan of Mana? You can easily choose your subscription and receive your organic energy boost automatically at the desired frequency. Are you going on a trip for a month? No problem, you can pause your subscription at any time. The entire shopping experience has been designed to be as simple and effective as possible. They even thought about people who prefer to buy their Mana in the grocery store, by offering an interactive map indicating all the points of sale and an intelligent search tool to find the nearest point of sale.
What are some of your favourite elements/features on the site?
As if the site wasn't fun enough already, we decided to create a game that can be found in the footer of each page. The goal of the game? Keep your energy boost by avoiding the unpleasant obligations of life, like doing dishes, taking out the trash, or ironing your clothes. Is your character starting to run out of energy from doing all these tasks? Grab a Mana to give yourself a boost of energy!
What’s one new thing you learned during the entire process?
I learned a lot about Yerba Maté. I knew close to nothing about this beverage and had to do a lot of research to really understand the benefits and find the best way to showcase these on the website. That’s what’s fun about our job — we get to learn new interesting things on every project!
If this website was a lead single, what song would it be and why?
Happy by Pharrell Williams 🎶
Thanks for reading! Definitely reach out if you’d like to be featured or would like to recommend a site to feature.