How No Cow Used
Gamification To Increase
Engagement Rates By 500%

No Cow is one of Inc.com's fastest-growing companies and has amassed a loyal community in the plant-based protein space. However, they wanted to elevate their status even further but didn't have the right tools in place to create en engaging and automated ambassador program.

"Zealot has made it a lot easier to streamline our ambassador program and keep our ambassadors engaged. Before Zealot, we solely rewarded our ambassadors via commission and offering specific missions and rewards has helped us maintain a higher level of engagement...also the ability to quickly create missions to get ambassadors involved in campaigns saves our team hours of manual work each week"

Katie Flanders

Brand Manager @ No Cow

Uploaded image

41%

Active Rate

13.7x

Program ROI

20+

Hours Saved Weekly

Challenges


No Cow initially used Aspire for their ambassador program. However, they discovered that while Aspire was excellent for one-off influencer campaigns, it wasn't suitable for an ambassador program since there was no option to offer non-monetary rewards. No Cow struggled to keep their ambassadors engaged and so they turned to manually managing the program through monthly newsletters and Excel spreadsheets. This approach made automating rewards, payments, and reporting incredibly challenging.

Solution


Using Zealot, No Cow was able to mobilize an engaging army of advocates at scale. Zealot’s secret sauce (gamified missions) helped No Cow create community UGC activations, sales challenges, product quizzes and more leading to increase brand awareness and revenue. Also, by being able to streamline their entire program, from tax forms to content reviews in one spot, their marketing team can now take back hours of manual work each week.

Results


After struggling to manage an Ambassador Program manually, No Cow turned to Zealot for help. Zealot provided a white-labeled ambassador program that allowed advocates to track their activities, points, and referrals. This solution proved more motivating for the ambassadors. Following the launch of their "Plantbassador Program", No Cow experienced a significant increase in brand awareness, user-generated content posts, and ambassador-driven sales, all without the need to hire additional staff.

© 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.