How Odyssey Got 11x
More UGC From Their
Brand Community

Odyssey started a brand ambassador program to keep up with changing customer habits in a tough market. These programs, which are authentic to both sides, helped Odyssey form lasting relationships with people engaged with the brand. As ambassadors are already fans of the brand, Odyssey could form trustworthy, cost-effective partnerships for ongoing engagement.

"Can't imagine running our ambassador program without Zealot! The gamified features make it easy to keep ambassadors engaged and the automations save us hours of manual work each day"

Megan Hailey

Brand Manager @ Odyssey Elixir

Uploaded image

1000+

Brand Ambassadors

200+

Pieces of UGC Posted

7.5x

Program ROI

Context

While Odyssey has a very loyal customer base, they needed a way to further engage their biggest fans and create incentives for them to continue to post about their love for the brand beyond just handing out affiliate links. Odyssey also wanted to shift their strategy from paying influencers for posts one-off posts, to more long-term relationships with customers who were real brand fans of their brand.

Challenges


Odyssey was using several other platforms to manage their ambassadors, but were constantly running into the problem of them getting bored and becoming inactive. This would require extra effort from their team to contact and incentivize them, making it incredibly difficult to scale beyond a 25 brand ambassadors.

Ideal Scenario


Odyssey came to Zealot seeking a way to turn their ambassador program into a game to help boost engagement, sales, and fun to help increase ambassador motivation. They also needed a way for ambassadors to self-manage tasks like discount codes and payments, allowing the brand to efficiently scale without micromanaging.

Solution


Using Zealot, Odyssey enhanced their ambassador experience with gamification. This lets Odyssey easily engage with many ambassadors, keeping them active and boosting brand awareness. Odyssey can now create missions for content, sales, and engagement all in one place.

Results


Immediately after announcing their "Growth Gang" program, Odyssey saw an impressive increase in UGC posts, impressions, and users posting multiple times vs. just one-off posts. Best of all, these are high-quality posts that meet requirements set by Odyssey. With the high engagement rate, authenticity, and quality of the posts, these posts and impressions bring in more value than potential paid Instagram ads, influencer posts, or brand posts.

Try

Framer

Start building your website in seconds with Framer. Click the button below to create a free Framer account.

© 2024 Zealot. All rights reserved.

Made with ❤️ by The Zealot Team

Zealot Case Study

Odyssey x Zealot Case Study

Read how this fast-growing Mushroom Energy Drink brand built a community of 400+ advocates to accelerate brand awareness, generate UGC, and increase referral sales through a gamified ambassador program on Zealot.

By Hamza Ehsan

By Hamza Ehsan

Hamza delivers beautiful, highly-converting designs in record time. It's hard to find a designer you can trust with your brand but Hamza and Limitless have earned it. Look forward to working in the future.

Tony Saoprano

CEO of Tryal

Uploaded image

45+

45+

Happy customers

5k+

5k+

Hours spent on craft

4.8

4.8

Review rate

How Odyssey Grew the "Growth Gang" to 100s of Members:


Creating an intricate web design isn't as daunting as it seems. With Framer, you can unlock a variety of desktop navigations and utilize viewport units within the Min and Max height properties. These connections facilitate a smoother workflow, allowing you to set up stunning designs effortlessly.


Jumping into Action

To vividly illustrate this concept, let's walk through developing a desktop navigation from scratch. Take an everyday top-bar, featuring a logo and a button. Through Framer, we can convert this basic model into a component, forming the backbone of our desktop navigation.

Crafting Component Variants


Two variants are constructed- the 'open' (or expanded navigation) variant and the 'closed' one. The 'open' variant captures the expanded navigation state, while the 'closed' variant denotes the initial state of the top bar. To adapt these features to your design seamlessly, you ought to name your variants appropriately. Doing so gives you less hassle as you apply the design across different layouts, and allows your design to become responsive based on viewport height.

Interactions and Adding Links


Framer isn’t just about static designs. Interactive elements bring user interfaces to life. By turning the layer labels in each variant into clickable links, we optimize our design for navigation, leading users seamlessly between the two states using Framer's interaction feature. Next on the agenda is enriching your menu. You can add links to a text layer. Ensure to give each navigation item a distinctive and intuitive label. This quick tip goes a long way in promoting an effortless user experience.


Optimizing Height Properties


A critical objective is to ensure that the component animates from its 'closed' state of 64 pixels to an 'open' state that spans the viewport, when the links are set to fill. Applying the "Min height" property to the links and switching them to viewport ensures that they occupy the entirety of the viewport. This results in a smooth transition from a 'closed' state to an entirely filled viewport.

Finalizing your Design


With the basics in place, it’s time for refining. Set the initial variant to the 'closed' variant. To keep your navigation at the top of the viewport regardless of scrolling, set the position type to 'fixed'. To facilitate the animation of the height, set the 'height' property to 'auto'. These adjustments enable your menu navigation to animate successfully from 64 pixels to fill the entirety of the viewport. It's highly advised to experiment with your transition settings, to attain an animation speed that feels natural to your design. Consider elements like stiffness and damping to promote fluidity in your work. Think about the aesthetics of your navigation too — adjusting the alpha of the background allows you to modulate the transparency, permitting the underlying design elements to subtly shine through. This adds a sophisticated layer of complexity and depth to the user interface. But remember, this is only scratching the surface of what can be accomplished with Framer. Consider exploring and adding custom appearances, hover variants, and much more to take your design to the next strata. In the realm of Framer, the only limit is your imagination.

Try

Framer

Start building your website in seconds with Framer. Click the button below to create a free Framer account.

Zealot Case Study

Odyssey x Zealot Case Study

Read how this fast-growing Mushroom Energy Drink brand built a community of 400+ advocates to accelerate brand awareness, generate UGC, and increase referral sales through a gamified ambassador program on Zealot.

By Hamza Ehsan

By Hamza Ehsan

Hamza delivers beautiful, highly-converting designs in record time. It's hard to find a designer you can trust with your brand but Hamza and Limitless have earned it. Look forward to working in the future.

Tony Saoprano

CEO of Tryal

Uploaded image

45+

Happy customers

5k+

Hours spent on craft

4.8

Review rate

How Odyssey Grew the "Growth Gang" to 100s of Members:


Creating an intricate web design isn't as daunting as it seems. With Framer, you can unlock a variety of desktop navigations and utilize viewport units within the Min and Max height properties. These connections facilitate a smoother workflow, allowing you to set up stunning designs effortlessly.


Jumping into Action

To vividly illustrate this concept, let's walk through developing a desktop navigation from scratch. Take an everyday top-bar, featuring a logo and a button. Through Framer, we can convert this basic model into a component, forming the backbone of our desktop navigation.

Crafting Component Variants


Two variants are constructed- the 'open' (or expanded navigation) variant and the 'closed' one. The 'open' variant captures the expanded navigation state, while the 'closed' variant denotes the initial state of the top bar. To adapt these features to your design seamlessly, you ought to name your variants appropriately. Doing so gives you less hassle as you apply the design across different layouts, and allows your design to become responsive based on viewport height.

Interactions and Adding Links


Framer isn’t just about static designs. Interactive elements bring user interfaces to life. By turning the layer labels in each variant into clickable links, we optimize our design for navigation, leading users seamlessly between the two states using Framer's interaction feature. Next on the agenda is enriching your menu. You can add links to a text layer. Ensure to give each navigation item a distinctive and intuitive label. This quick tip goes a long way in promoting an effortless user experience.


Optimizing Height Properties


A critical objective is to ensure that the component animates from its 'closed' state of 64 pixels to an 'open' state that spans the viewport, when the links are set to fill. Applying the "Min height" property to the links and switching them to viewport ensures that they occupy the entirety of the viewport. This results in a smooth transition from a 'closed' state to an entirely filled viewport.

Finalizing your Design


With the basics in place, it’s time for refining. Set the initial variant to the 'closed' variant. To keep your navigation at the top of the viewport regardless of scrolling, set the position type to 'fixed'. To facilitate the animation of the height, set the 'height' property to 'auto'. These adjustments enable your menu navigation to animate successfully from 64 pixels to fill the entirety of the viewport. It's highly advised to experiment with your transition settings, to attain an animation speed that feels natural to your design. Consider elements like stiffness and damping to promote fluidity in your work. Think about the aesthetics of your navigation too — adjusting the alpha of the background allows you to modulate the transparency, permitting the underlying design elements to subtly shine through. This adds a sophisticated layer of complexity and depth to the user interface. But remember, this is only scratching the surface of what can be accomplished with Framer. Consider exploring and adding custom appearances, hover variants, and much more to take your design to the next strata. In the realm of Framer, the only limit is your imagination.

Try

Framer

Start building your website in seconds with Framer. Click the button below to create a free Framer account.