Sauza
Sauza’s launch of a new beverage product featuring desktop and mobile landing pages along with banner ads for marketing.
The work
Branding, UX & UI Design, Marketing, Animation, Prototyping
Problems to Solve
Sauza needed a website and banner ad creative content to compete in the market of pre-made, canned cocktails. These assets needed to get customers to try their new beverage in order to make their new beverage investment a success.
Outcomes
Landing Page
Executed upon the deliverable of the landing page (measurable results not available)
45
Unique banner ad designs created for manipulation for a potential of over 200+ customized ads
Objectives
Design a website and banner ads that generate awareness and inspire customers to try a new beverage from Sauza.
Develop a brand-led landing page for a new product launch to go on Sauza site that drives engagement in the brand and new beverage.
Design banner ads that can be adapted to different audiences and formats to build awareness for people to try and buy.
Sauza Website
The creative assets, content, and experience of the site aimed to express the Mexican culture and the Golden Hour when the people, food, music, and light line up to build deep connections.
High-level Process
1
UX/UI Designs
Create desktop and mobile mockups and iterate until satisfaction and handoff.
2
Interaction Prototype
Build a complex interaction in After Effects that shows a wipe effect to be developed.
3
Design System
Create a design system for engineers to follow.
4
Marketing Assets
Develop banner ads in many different sizes to be launched on different ad platforms.
UX/UI Designs
Desktop and Mobile Site
Desktop and mobile layouts were drafted and delivered with different variations. During this stage, we consulted with stakeholders to get buy-in and critique. Throughout the process, we relied on the brand vision to make the Golden Moment come to life on the site.
As the web and interaction designer on the team, I was responsible for visualizing an engaging wipe interaction on the website. I contributed to the design of the mobile and desktop site and led the design of the banner ads in various sizes.
Interaction Design
Building an Effect in Prototype
Using After Effects, I designed a wipe interaction where the beverage cans changed from one to another as a user scrolled. This coincided with banners scrolling up with the page. It was a challenge to get all the masking correct. It was brought to life by the engineers when we handed it off.
Design System
Organizing and Delivering a Design System
We created a guide to define typography, colors, iconography, and patterns. This included annotations and notes for engineers to follow along with assets delivered in file folder.
Marketing Assets
E-Commerce Banner Ads
I worked and learned a lot from a great internal creative director and partnership team. The precision and focus on pixel perfect was stressed in this project. Building the banner ads in Illustrator reminded me to save often (Illustrator doesn't auto-save work) and to have a live file and expanded file. Working in After Effects is fun, but can be a beast.