<h1 id="background">Background</h1>
<p>Vita Virdi, a wellness-focused brand, wanted to improve their conversion rates through the introduction of a dedicated squeeze page. This page would serve as a critical entry point for capturing user interest, and driving conversions. My role as a UX designer on this project was to transform approved marketing content into a high-performing squeeze page that upheld the brand’s aesthetic while trying to increase the site engagement and conversion rates.</p>
<p>This project took place in July 2025, over four days.</p>
<h1 id="problem">Problem</h1>
<p>The marketing team identified a drop-off in user engagement when transitioning from ads and social media campaigns to general product pages. To solve this, the team proposed a squeeze page that would:</p>
<ol>
<li>Capture user attention within the first few seconds</li>
<li>Clearly communicate Vita Virdi's product and lifestyle value proposition</li>
<li>Minimise distractions and friction during the conversion process</li>
</ol>
<h1 id="solution">Solution</h1>
<p>I worked on creating two developer-ready designs that could be implemented quickly, while keeping the brand's vision in mind. <u>Version A</u> was meant to be deployed rapidly, while <u>Version B</u> kept initial criticisms and feedback in mind while implementing a site that highlighted more contrast. My iterations led to a page with clearer value proposition, stronger CTA hierarchy, and an overall more appealing experience.</p>
<div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:2em 0">
  <figure style="margin:0">
    <img src="/projects/vita-virdi/solution_v1.png" alt="Version 1" style="width:100%; border-radius:10px">
    <figcaption style="font-size:14px; opacity:0.6; margin-top:2px; text-align:left">Version 1</figcaption>
  </figure>
  <figure style="margin:0">
    <img src="/projects/vita-virdi/solution_v2.png" alt="Version 2" style="width:100%; border-radius:10px">
    <figcaption style="font-size:14px; opacity:0.6; margin-top:2px; text-align:left">Version 2</figcaption>
  </figure>
</div>
<h1 id="research">Research</h1>
<p>I began by looking at good examples of squeeze pages to assess competitor benchmarks, focusing specifically on sites with well-contrasted CTAs and less graphics-heavy content, so as to not confuse users who aren't sure about converting yet. I really liked the appeal of Officevibe's bright blue CTAs against the white background, but I wanted to incorporate the different colors of Vita Virdi's brand, as well as their flavor colors.</p>
<figure style="margin:2em 0">
  <img src="/projects/vita-virdi/officevibe_squeeze_page.png" alt="Description" style="width:100%; border-radius:10px">
  <figcaption style="font-size:14px; opacity:0.6; margin-top:8px; text-align:left">Officevibe's Squeeze Page</figcaption>
</figure>
<div style="display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin:2em 0">
  <div>
  <img src="/projects/vita-virdi/style_guide.png" alt="Vita Virdi bottle" style="width:100%; border-radius:10px">
  </div>
  <div>
    <p>I also began to compile a style guide so I understood the brand colors, both primary and secondary. I kept Neutra Text- the same font used in the logo- to be maintained as the primary font, and paired it with Smoothy in my second iteration of the squeeze page to increase contrast between the text and capture more viewer interest. I listed the most important elements to include from my research: 
    </p><ul style="padding-left:1.5em; margin:1em 0">
  <li style="margin-bottom:0.4em"> 1. Scannable layouts</li>
  <li style="margin-bottom:0.4em"> 2. Visual anchors</li>
  <li style="margin-bottom:0.4em"> 3. Trust signals</li>
  <li style="margin-bottom:0.4em"> 4. High-contrast CTAs</li></ul>
<p></p>
  </div>
</div>
<h2 id="designs">Designs</h2>
<p>After the marketing team approved a copy of the content for the squeeze page, I iterated multiple hi-fi versions quickly, incorporating feedback from my supervisor. I focused on breaking up the content into short-form, easy-to-absorb paragraphs and adjusting the CTA buttons' size and placement to draw more attention.</p>
<div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:2em 0">
  <figure style="margin:0">
    <img src="/projects/vita-virdi/V1.gif" alt="Version 1" style="width:100%; border-radius:10px">
    <figcaption style="font-size:14px; opacity:0.6; margin-top:2px; text-align:left">Version 1</figcaption>
  </figure>
  <figure style="margin:0">
    <img src="/projects/vita-virdi/V2.gif" alt="Version 2" style="width:100%; border-radius:10px">
    <figcaption style="font-size:14px; opacity:0.6; margin-top:2px; text-align:left">Version 2</figcaption>
  </figure>
</div>
<h1 id="key-improvements">Key Improvements</h1>
<h3 id="1-reducing-reliance-on-stock-images">1. Reducing Reliance on Stock Images</h3>
<p><strong>Issue with Version 1:</strong> The page leaned heavily on stock imagery that felt generic and undermined the page's authenticity.</p>
<p><strong>Why this matters:</strong> Studies show that generic stock images significantly decrease perceived trust. According to the research I did post-version 1, only 33% of users in a Digifox Consulting study trusted pages with generic images. Websites featuring authentic imagery reported 83% greater consumer trust compared to those relying on stock photos.</p>
<p><strong>Design action:</strong> In Version 2, I replaced the generic visuals with bold colors and modified the site to use a more minimalist aesthetic.</p>
<p><img src="/projects/vita-virdi/improvement_1.png" alt="Key Improvement 1"></p>
<h3 id="2-introducing-a-contrasting-secondary-font">2. Introducing a Contrasting Secondary Font</h3>
<p><strong>Issue with Version 1:</strong> The sentence hierarchy felt flat, lacking visual differentiation — looking a little boring and more likely to lose attention.</p>
<p><strong>Design action:</strong> I added Smoothy as a secondary, contrasting font alongside Neutra Text. This enhanced visual clarity by elevating key messaging and CTA elements.</p>
<p><img src="/projects/vita-virdi/improvement_2.png" alt="Key Improvement 2"></p>
<h3 id="3-reducing-use-of-gradients">3. Reducing Use of Gradients</h3>
<p><strong>Issue with Version 1:</strong> Heavy gradient overlays introduced diluted contrast, making important elements like CTAs less prominent.</p>
<p><strong>Design action:</strong> I minimised gradients — leaning instead on flat color contrast and typographic hierarchy. This choice sharpened the visual focus, improved hierarchy clarity, and made CTAs stand out more decisively.</p>
<div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:2em 0">
  <figure style="margin:0">
    <img src="/projects/vita-virdi/3A.png" alt="Version 1" style="width:100%; border-radius:10px">
    <figcaption style="font-size:14px; opacity:0.6; margin-top:2px; text-align:left">Version 1</figcaption>
  </figure>
  <figure style="margin:0">
    <img src="/projects/vita-virdi/3B.png" alt="Version 2" style="width:100%; border-radius:10px">
    <figcaption style="font-size:14px; opacity:0.6; margin-top:2px; text-align:left">Version 2</figcaption>
  </figure>
</div>
<h1 id="reflections">Reflections</h1>
<p><strong>Typography is brand identity in action:</strong> Strategic font pairing created visual contrast without losing authenticity.</p>
<p><strong>Iteration drives measurable improvement:</strong> Feedback loops and refinement of CTA clarity significantly improved the design's effectiveness.</p>
<p><strong>Design flexibility supports agility:</strong> Offering two distinct versions empowered developers to act quickly while keeping room for A/B testing and future optimisation.</p>

Designing a high-converting squeeze page for a wellness brand, iterating from stock-heavy imagery to bold, minimal contrast-driven design.

2. Introducing a Contrasting Secondary Font

Vita Virdi Squeeze Page