Launch of Bulletproof Greens Custom Landing Page

PIVOT was tasked to build and execute the design created by the Bulletproof team for their new Bulletproof Greens landing page. Bulletproof wanted to create a dynamic and interactive page for their customers to learn more about the nutritional facts and benefits of their new product expansion – one that provided more interactive education than a traditional PDP.

PIVOT's new landing page for Bulletproof enables customers to learn more about the nutritional facts and benefits of their latest product expansion, Bulletproof Greens, through interactive design customizations. ADA accessibility and performance were the top priorities for developing the new interactive landing page. As a result, the experience beautifully showcases what's inside – educating the user on the ingredients used to make Bulletproof Greens. Bulletproof Greens carefully selected and sourced 35 ingredients are further detailed in categories of Vegetables & Fruits, Vitamins & Minerals, Digestive Enzymes, Probiotics, Superfoods, Mushrooms, and Nootropics. Users click a category to learn more about what ingredients make up each and why those ingredients matter to their health.

The PIVOT development team wrote modern and custom frontend code utilizing all the latest browser's built-in functionality and features with high page performance in mind. Using a combination of IntersectionObserver and position sticky to create the scrolly-telling “Inside the Scoop” feature, the page renders as close to 60 frames per second as possible, allowing the scroll to run smoothly all without the need to load any large javascript libraries. Utilizing modern lightweight javascript libraries [whenever it makes the most sense] can achieve top performance while requiring less code and producing the best UX possible. PIVOT turned to the Vue.js reactive library for this project to quickly build out the ingredients desktop UI.