Telo-Vital is a anti-aging product for Touchstone Essentials, a cellular health supplement backed by science and developed by a leading telomere researcher. The product launch required a dedicated landing page that could carry a significant volume of content: scientific credibility, ingredient breakdowns, health benefit explanations, social proof, FAQs, and a clear path to purchase all within the brand's established visual identity.
The Opportunity
Working under the direction of the Creative Director and CMO, the content requirements for this page were extensive and intentional. The business needed a high-information experience that built trust through depth. My role was not to simplify what stakeholders had defined, but to organize it. The challenge was taking a large volume of required content and structuring it in a way that a visitor could move through logically without feeling overwhelmed at any stage.
Prototyping a New Interaction
In existing pages they presented the product's health timeline as static text, a list of milestones that required the visitor to read through linearly with no way to explore at their own pace. I proposed and prototyped an interactive timeline component in Figma, a first for this site. Each stage of the journey, Week 1 through Year 1, is represented as a circle. When a visitor clicks a circle it expands to reveal the detailed content for that milestone, then collapses when another is selected. This gives the visitor control over how they move through the information rather than presenting it all at once.
The prototype was built in neutral styling first to focus stakeholder review on the interaction and content. Once the interaction model was approved, I rebuilt it in Elementor with the full Touchstone Essentials brand applied, green palette, brand typography, product imagery, and lifestyle photography for each milestone stage. The interaction behavior, circle expand and collapse on click, was preserved from the prototype to the live build.
Built Live in Elementor
The approved interaction was rebuilt in Elementor matching the prototype behavior as closely as the platform allowed. The full landing page was built and tested across desktop and mobile, ensuring the content hierarchy, visual design, and interactive timeline all held together on every screen size.
The Result
A fully built product landing page that met all stakeholder content requirements while remaining organized and navigable for the visitor. Also a first-of-its-kind interactive timeline component that modernized how the brand presents its product experience. The timeline moved a dense, static list of health milestones into an engaging, visitor-controlled journey, giving people a way to explore the information at their own pace rather than being presented with everything at once.
Skills: Interaction design · Figma prototyping · Information architecture · Content organization · Stakeholder alignment · Elementor · WordPress · Responsive design · UX design
