Home

Work

ECHOLAB

Stepping Out of My Comfort Zone: Designing and Vibe-Coding EchoLab’s Landing Page

Overview

EchoLab is a ticket ingestion and A/B testing hypothesis generation platform designed to help PMs spend less time triaging and more time learning. As the MVP launch approached and engineering capacity was fully tapped, we still needed a landing page to communicate the product’s value.

I stepped in to design and vibe-code the initial landing page experience. Without established guidelines, I focused on catchy messaging, visual hierarchy, and a tone that feels exploratory yet confident. This project pushed me to trust my instincts and define the product’s identity in real time, resulting in a launch-ready page that introduces EchoLab with clarity and personality.

Role

Product Designer

Responsibilities

End-to-End UX & UI Design Process and Deployment

Collaborators

Solo Effort

Timeline

Aug 15 - 18, 2025

PROBLEM TO SOLVE

We need a landing page that introduces EchoLab’s value ahead of launch, but we have no visual identity, no brand guidelines, and no engineering support to build it.

Game Plan

Before starting the design process, I met with Product and Engineering and asked about limitations and tried understanding what was feasible. From our conversation I learned that the biggest limitations were time and resources. The deadline being November 17th and with one front-end engineer on the team, I crafted a plan.

RESEARCH
In order the keep the process lean, I prioritized easy fixes that would take me the least amount of time to design and hand off.
TIMED EXPLORATION
In order the keep the process lean, I prioritized easy fixes that would take me the least amount of time to design and hand off.
RAPID FEEDBACK LOOP
I shared early explorations with the team in quick, informal check-ins. Even lightweight feedback helped me validate what was working and move past what wasn’t, keeping momentum without getting stuck on perfection.

IDEATION

Developing Concepts

Exploring what’s possible
Call out a feature, benefit, or value of your site, then link to a page where people can learn more about it.
A learning curve
Working with Figma Make came with a learning curve. I quickly realized that the outcome depended heavily on how I phrased my prompts and how clearly I articulated what I wanted it to create.

Early on, my prompts were either too vague or too detailed, leading to results that didn’t match my vision. Over time, I learned to be more intentional, describing the function and hierarchy I needed rather than just the visual surface.

This shift helped me guide the tool more effectively and turn it into a collaborative partner rather than a generator of random outputs.
- Taking inspiration from my environment
  On my commute into San Francisco, there’s a billboard that always stood out to me, not because it clearly explained a product, but because it didn’t.
  
  Instead of listing features or selling points, it used a bold, intriguing statement that made you pause and want to learn more. It sparked curiosity.
  
  For EchoLab, I wanted to bring in that same feeling of discovery. Instead of a literal value proposition, I focused on crafting a headline that invites users into a narrative, one that hints at what it can do without giving everything away upfront.

TAKEAWAYS

What I Learned

Trusting intuition is a skill. Designing without rigid guidelines pushed me to make decisions based on feeling, coherence, and intention—not just structure.
Constraints create focus. Time guardrails and small decision frameworks kept the exploration purposeful instead of chaotic.
Tools can shape creativity. Learning how to prompt Figma Make taught me that the language I use influences the visual outcome. Clear direction produces clearer results.
Play leads to clarity. Treating the process like a creative playground helped me uncover the product’s visual identity naturally, instead of forcing it.
Identity can emerge, not just be planned. The product’s personality came from exploration, iteration, and response, not from a moodboard or pre-set style guide.

ECHOLAB

Stepping Out of My Comfort Zone: Designing and Vibe-Coding EchoLab’s Landing Page

Overview

EchoLab is a ticket ingestion and A/B testing hypothesis generation platform designed to help PMs spend less time triaging and more time learning. As the MVP launch approached and engineering capacity was fully tapped, we still needed a landing page to communicate the product’s value.

I stepped in to design and vibe-code the initial landing page experience. Without established guidelines, I focused on catchy messaging, visual hierarchy, and a tone that feels exploratory yet confident. This project pushed me to trust my instincts and define the product’s identity in real time, resulting in a launch-ready page that introduces EchoLab with clarity and personality.

Role

Product Designer

Responsibilities

End-to-End UX & UI Design Process and Deployment

Collaborators

Solo Effort

Timeline

Aug 15 - 18, 2025

PROBLEM TO SOLVE

We need a landing page that introduces EchoLab’s value ahead of launch, but we have no visual identity, no brand guidelines, and no engineering support to build it.

Game Plan

A quick heuristic evaluation of the existing experience revealed unclear visual hierarchy, spacing is inconsistent, and the layout feels unbalanced, resulting in an interface that isn’t intuitive to navigate.

RESEARCH
In order the keep the process lean, I prioritized easy fixes that would take me the least amount of time to design and hand off.
TIMED EXPLORATION
In order the keep the process lean, I prioritized easy fixes that would take me the least amount of time to design and hand off.
RAPID FEEDBACK LOOP
I shared early explorations with the team in quick, informal check-ins. Even lightweight feedback helped me validate what was working and move past what wasn’t, keeping momentum without getting stuck on perfection.

IDEATION

Developing Concepts

Exploring what’s possible
Call out a feature, benefit, or value of your site, then link to a page where people can learn more about it.
A learning curve
Working with Figma Make came with a learning curve. I quickly realized that the outcome depended heavily on how I phrased my prompts and how clearly I articulated what I wanted it to create.

Early on, my prompts were either too vague or too detailed, leading to results that didn’t match my vision. Over time, I learned to be more intentional, describing the function and hierarchy I needed rather than just the visual surface.

This shift helped me guide the tool more effectively and turn it into a collaborative partner rather than a generator of random outputs.
- Taking inspiration from my environment
  On my commute into San Francisco, there’s a billboard that always stood out to me, not because it clearly explained a product, but because it didn’t.
  
  Instead of listing features or selling points, it used a bold, intriguing statement that made you pause and want to learn more. It sparked curiosity.
  
  For EchoLab, I wanted to bring in that same feeling of discovery. Instead of a literal value proposition, I focused on crafting a headline that invites users into a narrative, one that hints at what it can do without giving everything away upfront.

TAKEAWAYS

What I Learned

Trusting intuition is a skill. Designing without rigid guidelines pushed me to make decisions based on feeling, coherence, and intention—not just structure.
Constraints create focus. Time guardrails and small decision frameworks kept the exploration purposeful instead of chaotic.
Tools can shape creativity. Learning how to prompt Figma Make taught me that the language I use influences the visual outcome. Clear direction produces clearer results.
Play leads to clarity. Treating the process like a creative playground helped me uncover the product’s visual identity naturally, instead of forcing it.
Identity can emerge, not just be planned. The product’s personality came from exploration, iteration, and response, not from a moodboard or pre-set style guide.

ECHOLAB

Stepping Out of My Comfort Zone: Designing and Vibe-Coding EchoLab’s Landing Page

Overview

EchoLab is a ticket ingestion and A/B testing hypothesis generation platform designed to help PMs spend less time triaging and more time learning. As the MVP launch approached and engineering capacity was fully tapped, we still needed a landing page to communicate the product’s value.

I stepped in to design and vibe-code the initial landing page experience. Without established guidelines, I focused on catchy messaging, visual hierarchy, and a tone that feels exploratory yet confident. This project pushed me to trust my instincts and define the product’s identity in real time, resulting in a launch-ready page that introduces EchoLab with clarity and personality.

Role

Product Designer

Responsibilities

End-to-End UX & UI Design Process and Deployment

Collaborators

Solo Effort

Timeline

Aug 15 - 18, 2025

PROBLEM TO SOLVE

We need a landing page that introduces EchoLab’s value ahead of launch, but we have no visual identity, no brand guidelines, and no engineering support to build it.

Game Plan

Even in uncertainty I tried being methodical, setting small guardrails for myself so I could explore freely without losing direction, especially with a tight timeline.

RESEARCH
I kicked off with research, reviewing early-stage product landing pages, pulling inspiration, and quickly identifying the patterns and visual directions that felt right.
TIMED EXPLORATION
I set time guardrails to stay on track within the tight timeline. I limited each exploration to 30 minutes, giving the process structure and ensuring I was intentional with where I focused my effort.
RAPID FEEDBACK LOOP
I shared early explorations with the team in quick, informal check-ins. Even lightweight feedback helped me validate what was working and move past what wasn’t, keeping momentum without getting stuck on perfection.

IDEATION

Developing Concepts

Exploring what’s possible
I had never used Figma Make before, so I jumped in and started prompting. I tweaked, iterated, and followed whatever felt good.

The process was intuitive, fluid, and exploratory, and that freedom is what shaped the visual language of the landing page.

I even asked it to generate full page layouts and interactions without knowing whether it could actually do that. And every time it did it surprised me with how flexible and generative it could be. It felt like discovering a new creative collaborator, one prompt at a time.
A learning curve
Working with Figma Make came with a learning curve. I quickly realized that the outcome depended heavily on how I phrased my prompts and how clearly I articulated what I wanted it to create.

Early on, my prompts were either too vague or too detailed, leading to results that didn’t match my vision. Over time, I learned to be more intentional, describing the function and hierarchy I needed rather than just the visual surface.

This shift helped me guide the tool more effectively and turn it into a collaborative partner rather than a generator of random outputs.
- Taking inspiration from my environment
  On my commute into San Francisco, there’s a billboard that always stood out to me, not because it clearly explained a product, but because it didn’t.
  
  Instead of listing features or selling points, it used a bold, intriguing statement that made you pause and want to learn more. It sparked curiosity.
  
  For EchoLab, I wanted to bring in that same feeling of discovery. Instead of a literal value proposition, I focused on crafting a headline that invites users into a narrative, one that hints at what it can do without giving everything away upfront.

TAKEAWAYS

What I Learned

Trusting intuition is a skill. Designing without rigid guidelines pushed me to make decisions based on feeling, coherence, and intention—not just structure.
Constraints create focus. Time guardrails and small decision frameworks kept the exploration purposeful instead of chaotic.
Tools can shape creativity. Learning how to prompt Figma Make taught me that the language I use influences the visual outcome. Clear direction produces clearer results.
Play leads to clarity. Treating the process like a creative playground helped me uncover the product’s visual identity naturally, instead of forcing it.
Identity can emerge, not just be planned. The product’s personality came from exploration, iteration, and response, not from a moodboard or pre-set style guide.

Game Plan

RESEARCH

TIMED EXPLORATION

RAPID FEEDBACK LOOP

Exploring what’s possible

A learning curve

Taking inspiration from my environment

Game Plan

RESEARCH

TIMED EXPLORATION

RAPID FEEDBACK LOOP

Exploring what’s possible

A learning curve

Taking inspiration from my environment

Game Plan

RESEARCH

TIMED EXPLORATION

RAPID FEEDBACK LOOP

Exploring what’s possible

A learning curve

Taking inspiration from my environment