2024
Awwwards Masterclass Project for the revamp of the Mana website
Art direction
Concept
Visual Strategy
UX/UI
Animation
Prototyping
Mana Yerba Mate
Web Design Remote
Masterclass Project
Teaching Louis Paquet
Art Direction Naiara Odriozola
Visual Design Naiara Odriozola
Animation Naiara Odriozola
Content Mana Yerba Mate
I recently participated in the Memorable UI Design For Interactive Experiences Masterclass, where Louis Paquet guides participants through each step of the web design process, starting from scratch. The outcome is the Mana homepage, along with the entire creative journey that brought it to life.
The project brief focused on Mana, a Montreal-based company producing and distributing cans of Yerba Mate, a natural, organic energy drink. While most brands highlight the health benefits, Mana wanted to stand out by emphasizing the 'energy boost' and 'fun' aspects of their product. For the website, it was essential to capture this vibrant, energetic spirit while keeping it functional and user-friendly.
The identity
Fun and dynamic energy
My concept for Mana's website takes inspiration from waves and liquid, incorporating smooth, rounded elements, wave-like patterns, and lively animations. I chose a bold, character-filled font to capture the brand's fun and playful essence. The product colors are used as pops of accent, set against a soft beige background that creates a serene, open space.
The entire design unfolds in a lively, colorful graphic setting that reflects Mana's one-of-a-kind style, with each flavor represented through its own distinctive visual theme and color scheme.
The user experience
Let the work speak for itself
The homepage functions as a portal for exploring and purchasing the brand’s wide range of flavors, while also raising awareness about the lesser-known benefits of Yerba Mate.
The visual design
Fueling fun with an harmonious balance
Mana wanted a digital experience that was not only highlighting the healthy aspect of the brand, but also had a fun and modern look to attract the fitness and energy boost market.
We centered the design direction in highlighting the unique personalities behind every flavor through bold fonts, vibrant colors, and playful animations.