Brand Identity and UX/UI Design
Puma Hybrid Rocket
Problem
Puma needed to create awareness among customers about their new foam technology. They wanted to effectively communicate the combination of two foams becoming better together and create a campaign that would connect with the end-user.
Goal
The goal was to globally launch Puma's Hybrid foam technology and create customer awareness through a seamless user experience across various digital touchpoints. The project also aimed to drive engagement and sales through activations and promotions in retail spaces and digital channels.
Solution
We developed a campaign strategy that showcased Hybrid technology's benefits while maintaining a consistent brand experience across touchpoints. This included global tool kits and engaging social media assets, resulting in a successful global launch, increased customer engagement, and exceeded activation sell-through projections.
The Design Process
First, we needed to understand what made Puma's Hybrid technology unique and how to effectively communicate it to consumers.
🔍 Discover
After discovery, we introduced the concept of a product story to consumers, refining campaign messaging and developing retail and web executions that centered around the new technology.
🎯 Define
After understanding the technology's unique features and effective communication, we began wireframing to visually map out landing pages, micro-sites, and digital assets.
🎨 Design
With the necessary elements for the micro-sites identified, we created layouts for desktop, tablet, and mobile. Once the solution was ready, we launched globally.
📝 Develop
01 - Discover
What does Hybrid mean?
The Hybrid Rocket silhouette fuses Puma’s pinnacle cushion technology with the hottest style. The HYBRID FOAM is a mix of the two most innovative technologies Puma has to offer: IGNITE and NRGY. The NRGY beads provide instant cushion and comfort while the IGNITE FOAM provides fantastic responsiveness to propel you faster.
We used original sketches from the footwear designer to help visually tell the story of this unique construction of two innovative technologies becoming one in a never-before-seen silhouette.
02 - Define
How do we talk about it?
We created a campaign strategy focused on visually appealing and informative landing pages and micro-sites showcasing the Hybrid technology's benefits. Utilizing a Venn diagram to help tell the story of the two technologies becoming one. We were able to create a campaign that effectively communicated the unique benefits of the Hybrid technology while staying true to Puma's brand identity.
03 - Design
What does it look like?
We had to stick with the existing design system components. This meant we couldn't fully customize things, which made it tricky to match the user experience with the project goals and the client's vision. Using these pre-set components led to some compromises in how the design looked and worked, but it didn’t stop us from pushing the boundaries of what had done before.
We started with wireframes, which allowed us to quickly iterate and refine our designs before moving on to the final execution. Using a mobile-first approach was critical in ensuring that our design solution was effective while meeting the needs of both the client and the end user. This approach also allowed us to create a seamless experience across all touchpoints, including social media, email marketing, and in-store activations.
04 - Develop
Bringing it to life.
With all the foundational elements in place, the final design brought together a cohesive and visually impactful experience. Combining the wireframes, mobile-first layouts, and insights from our product story, we successfully translated Puma's innovative Hybrid Rocket shoe into an engaging, user-friendly digital experience.
We used a block system to build out each section of the microsite, which provided a modular and flexible design. This approach not only ensured consistency and ease of updates but also enhanced our storytelling by allowing us to clearly and effectively present each part of the narrative.
The results
Digital engagement was high, page traffic was up and activation sell-through exceeded projections.
Responsive, adaptive layouts and a mobile-first approach drove digital across enterprise level experiences. Analytics informed decision making while UX and access to Puma’s development environment ensured feasibility of execution.