Case Study

Untangling Legacy Logic with a Surgical Redesign

I revitalized a high-friction legacy survey builder full of UX debt into a streamlined, mobile-first experience to reduce customer abandonment and restore brand trust.

Access

Growth

A mobile screenshot of the legacy survey builder alongside the redesigned, mobile-first wireframe prototype.
A mobile screenshot of the legacy survey builder alongside the redesigned, mobile-first wireframe prototype.
A mobile screenshot of the legacy survey builder alongside the redesigned, mobile-first wireframe prototype.

Key Activities

Heuristic Audit and Diagnosis Report

Interactive Prototypes with Redesigned Features

Comprehensive Functional Documentation

Duration

4 weeks

Role

Lead Strategist and UX Designer

Challenge & Vision

TeenTruth’s primary revenue driver, a complex survey builder, was suffering from high abandonment rates. Customers already exhausted by vetting fatigue from competing tools were met with inconsistent logic, missing mobile support, and premature error states that eroded trust in TeenTruth’s data quality and system reliability.

Multiple screenshots of legacy survey builder with poorly spaced UI, premature error states, and conflicting overlays.

Challenge & Vision

TeenTruth’s primary revenue driver, a complex survey builder, was suffering from high abandonment rates. Customers already exhausted by vetting fatigue from competing tools were met with inconsistent logic, missing mobile support, and premature error states that eroded trust in TeenTruth’s data quality and system reliability.

Multiple screenshots of legacy survey builder with poorly spaced UI, premature error states, and conflicting overlays.

Challenge & Vision

TeenTruth’s primary revenue driver, a complex survey builder, was suffering from high abandonment rates. Customers already exhausted by vetting fatigue from competing tools were met with inconsistent logic, missing mobile support, and premature error states that eroded trust in TeenTruth’s data quality and system reliability.

Multiple screenshots of legacy survey builder with poorly spaced UI, premature error states, and conflicting overlays.

Problem

The legacy survey builder required research practitioners to navigate a multi-step process with unpredictable interactions and system responses, causing a 40% abandonment rate in the first couple steps. Performance issues and intrusive, hover-only tooltips made the survey builder unusable for the site’s primarily mobile user base, while surprise pricing drove many users away from the checkout page.

Goal and Objectives

My goal was to architect a surgical redesign that decreases survey builder abandonment rates by prioritizing language, logic, and interface enhancements that minimize the time and effort to build a survey. To achieve this, I focused on three key objectives:

Standardize interaction patterns to lower the cognitive load of survey configuration

Introduce responsive UI with a mobile-first redesign that reflects how most people use the site

Partner with engineering to optimize system performance through smarter validation logic

Role and Contributions

I served as the Lead Strategist and UX Designer. My responsibilities included conducting a foundational usability audit to define the strategy of future enhancements, performing a full UI redesign delivered through an interactive prototype, and writing functional annotations that secured technical alignment.

Process & Approach

My process is how I turn a business challenge into a strategic solution. This structured approach, adapted for the TeenTruth project, shows how I prioritize human needs and deliver a final product with meaningful impact.

Discover

Understanding the Problem

I began by performing a comprehensive UX audit based on real user behavior data from FullStory along with a holistic site exploration. The audit revealed several logic and interface failures such as 32% of users mistaking static designs as interactive links. I gave each finding a priority score out of 100, weighted to TeenTruth’s unique business priorities, and categorized findings into themes like “Conversion Funnel Optimization” and “Trust and Reliability” to help the business understand exactly how usability failures were blocking their financial goals.

Key Learnings

Broken links make users question the credibility of a product

Rage clicks and duplicate submissions before abandonment suggest a heavy mental load

Immediately demonstrate value and ease of use to combat vetting fatigue

Anonymized screenshot of a FullStory dashboard with charts and data that informed the UX audit.

Discover

Understanding the Problem

I began by performing a comprehensive UX audit based on real user behavior data from FullStory along with a holistic site exploration. The audit revealed several logic and interface failures such as 32% of users mistaking static designs as interactive links. I gave each finding a priority score out of 100, weighted to TeenTruth’s unique business priorities, and categorized findings into themes like “Conversion Funnel Optimization” and “Trust and Reliability” to help the business understand exactly how usability failures were blocking their financial goals.

Key Learnings

Broken links make users question the credibility of a product

Rage clicks and duplicate submissions before abandonment suggest a heavy mental load

Immediately demonstrate value and ease of use to combat vetting fatigue

Anonymized screenshot of a FullStory dashboard with charts and data that informed the UX audit.

Discover

Understanding the Problem

I began by performing a comprehensive UX audit based on real user behavior data from FullStory along with a holistic site exploration. The audit revealed several logic and interface failures such as 32% of users mistaking static designs as interactive links. I gave each finding a priority score out of 100, weighted to TeenTruth’s unique business priorities, and categorized findings into themes like “Conversion Funnel Optimization” and “Trust and Reliability” to help the business understand exactly how usability failures were blocking their financial goals.

Key Learnings

Broken links make users question the credibility of a product

Rage clicks and duplicate submissions before abandonment suggest a heavy mental load

Immediately demonstrate value and ease of use to combat vetting fatigue

Anonymized screenshot of a FullStory dashboard with charts and data that informed the UX audit.

Ideate

Building the Solution

My surgical IA approach focused on supporting research practitioners through intuitive flows that lowered barriers to entry and conversion. I pivoted from modals and hover-enabled tooltips to mobile-friendly inline badges that allowed users on small screens to access support without interruption, a crucial accessibility feature for the site’s 71% mobile user base. I also standardized the pricing sidebar as a persistent navigational landmark, and reorganized configuration fields into logical sections to promote seamless progression across the multi-step workflow.

Key Learnings

Establishing landmark UI as a consistent reflection of user input provides platform stability

Removing extraneous interactions lowers the level of effort for task completion

Transforming lengthy interactive popups into concise inline messages makes product guidance more accessible

Static responsive wireframes with multiple Figma annotations detailing the intended experience.

Ideate

Building the Solution

My surgical IA approach focused on supporting research practitioners through intuitive flows that lowered barriers to entry and conversion. I pivoted from modals and hover-enabled tooltips to mobile-friendly inline badges that allowed users on small screens to access support without interruption, a crucial accessibility feature for the site’s 71% mobile user base. I also standardized the pricing sidebar as a persistent navigational landmark, and reorganized configuration fields into logical sections to promote seamless progression across the multi-step workflow.

Key Learnings

Establishing landmark UI as a consistent reflection of user input provides platform stability

Removing extraneous interactions lowers the level of effort for task completion

Transforming lengthy interactive popups into concise inline messages makes product guidance more accessible

Static responsive wireframes with multiple Figma annotations detailing the intended experience.

Ideate

Building the Solution

My surgical IA approach focused on supporting research practitioners through intuitive flows that lowered barriers to entry and conversion. I pivoted from modals and hover-enabled tooltips to mobile-friendly inline badges that allowed users on small screens to access support without interruption, a crucial accessibility feature for the site’s 71% mobile user base. I also standardized the pricing sidebar as a persistent navigational landmark, and reorganized configuration fields into logical sections to promote seamless progression across the multi-step workflow.

Key Learnings

Establishing landmark UI as a consistent reflection of user input provides platform stability

Removing extraneous interactions lowers the level of effort for task completion

Transforming lengthy interactive popups into concise inline messages makes product guidance more accessible

Static responsive wireframes with multiple Figma annotations detailing the intended experience.

Validate

Refining the Experience

In the absence of a formal testing budget, I validated the redesign through rigorous heuristic evaluations and cross-functional reviews. I used the FullStory session data from the definition phase as a control group to simulate user behavior against my prototypes. Early prototypes had different CTA placements across steps, but testing against FullStory data revealed that this approach wouldn’t address user pain points of navigation inconsistency, so I pivoted to a persistent CTA strategy with dynamic labels and destination links.

Key Learnings

Some interactions like sliders are too imprecise for complex user input and need simpler controls

Intuitive pathways to products can decrease abandonment rates by improving lead quality

Keeping the primary CTA in a predictable location resolves fragmented conversion paths

Two screens of an interactive mobile prototype connected by a curved line.

Validate

Refining the Experience

In the absence of a formal testing budget, I validated the redesign through rigorous heuristic evaluations and cross-functional reviews. I used the FullStory session data from the definition phase as a control group to simulate user behavior against my prototypes. Early prototypes had different CTA placements across steps, but testing against FullStory data revealed that this approach wouldn’t address user pain points of navigation inconsistency, so I pivoted to a persistent CTA strategy with dynamic labels and destination links.

Key Learnings

Some interactions like sliders are too imprecise for complex user input and need simpler controls

Intuitive pathways to products can decrease abandonment rates by improving lead quality

Keeping the primary CTA in a predictable location resolves fragmented conversion paths

Two screens of an interactive mobile prototype connected by a curved line.

Validate

Refining the Experience

In the absence of a formal testing budget, I validated the redesign through rigorous heuristic evaluations and cross-functional reviews. I used the FullStory session data from the definition phase as a control group to simulate user behavior against my prototypes. Early prototypes had different CTA placements across steps, but testing against FullStory data revealed that this approach wouldn’t address user pain points of navigation inconsistency, so I pivoted to a persistent CTA strategy with dynamic labels and destination links.

Key Learnings

Some interactions like sliders are too imprecise for complex user input and need simpler controls

Intuitive pathways to products can decrease abandonment rates by improving lead quality

Keeping the primary CTA in a predictable location resolves fragmented conversion paths

Two screens of an interactive mobile prototype connected by a curved line.

Deliver

Proving the Impact

I partnered with engineering to champion the technical sophistication of the final product through detailed documentation. My comprehensive functional annotations shifted validation logic to ensure the system only checked for input errors after user interaction, eliminating false error states on page load and directly addressing pain points from FullStory data.

Key Learnings

Optimizing system calls can resolve legacy performance issues that present as design flaws

Clear functional documentation increases technical sophistication and shipping velocity

Real-time cost transparency reduces checkout friction by increasing user trust in the platform and brand

An anonymized screenshot of a detailed functional annotations document with dozens of organizational headings.

Deliver

Proving the Impact

I partnered with engineering to champion the technical sophistication of the final product through detailed documentation. My comprehensive functional annotations shifted validation logic to ensure the system only checked for input errors after user interaction, eliminating false error states on page load and directly addressing pain points from FullStory data.

Key Learnings

Optimizing system calls can resolve legacy performance issues that present as design flaws

Clear functional documentation increases technical sophistication and shipping velocity

Real-time cost transparency reduces checkout friction by increasing user trust in the platform and brand

An anonymized screenshot of a detailed functional annotations document with dozens of organizational headings.

Deliver

Proving the Impact

I partnered with engineering to champion the technical sophistication of the final product through detailed documentation. My comprehensive functional annotations shifted validation logic to ensure the system only checked for input errors after user interaction, eliminating false error states on page load and directly addressing pain points from FullStory data.

Key Learnings

Optimizing system calls can resolve legacy performance issues that present as design flaws

Clear functional documentation increases technical sophistication and shipping velocity

Real-time cost transparency reduces checkout friction by increasing user trust in the platform and brand

An anonymized screenshot of a detailed functional annotations document with dozens of organizational headings.

Measurable Outcomes

The success of this surgical redesign is measured by its ability to transform a high-friction legacy tool into a reliable business asset. By prioritizing logic and interface enhancements, I architected a streamlined experience that restored brand trust and ensured data integrity across every device. These results demonstrate how untangling technical debt and focusing on mobile-first interactions directly eliminates the primary barriers to user conversion.

  1. 100%

    accessibility compliance through a WCAG 2.1 AA-driven interface, eliminating barriers for the primarily mobile user base

  2. 92%

    reduction in modals and tooltips across the platform, streamlining paths to task completion with a more intuitive interface

  3. 2 second

    estimated average load time reduction after implementing logic optimization for system calls, restoring technical integrity and user trust

Measurable Outcomes

The success of this surgical redesign is measured by its ability to transform a high-friction legacy tool into a reliable business asset. By prioritizing logic and interface enhancements, I architected a streamlined experience that restored brand trust and ensured data integrity across every device. These results demonstrate how untangling technical debt and focusing on mobile-first interactions directly eliminates the primary barriers to user conversion.

  1. 100%

    accessibility compliance through a WCAG 2.1 AA-driven interface, eliminating barriers for the primarily mobile user base

  2. 92%

    reduction in modals and tooltips across the platform, streamlining paths to task completion with a more intuitive interface

  3. 2 second

    estimated average load time reduction after implementing logic optimization for system calls, restoring technical integrity and user trust

Measurable Outcomes

The success of this surgical redesign is measured by its ability to transform a high-friction legacy tool into a reliable business asset. By prioritizing logic and interface enhancements, I architected a streamlined experience that restored brand trust and ensured data integrity across every device. These results demonstrate how untangling technical debt and focusing on mobile-first interactions directly eliminates the primary barriers to user conversion.

  1. 100%

    accessibility compliance through a WCAG 2.1 AA-driven interface, eliminating barriers for the primarily mobile user base

  2. 92%

    reduction in modals and tooltips across the platform, streamlining paths to task completion with a more intuitive interface

  3. 2 second

    estimated average load time reduction after implementing logic optimization for system calls, restoring technical integrity and user trust

Human Impact

While the numbers tell a powerful story, nothing captures the success of a project like a real person's experience.

I didn’t realize how much new customers were paying the price for old decisions until I saw this [prototype].

TeenTruth Product Manager

Personal Reflection

My primary motivation for the TeenTruth survey builder redesign was to get to the heart of user fatigue. I saw marketers, researchers, and educators trying to reach teens but fighting with a tool that should have been their biggest ally. This project wasn't just about cleaning up logic, it was about giving these users their mental energy back so they could focus on their mission. I championed design leadership by applying surgical IA changes that addressed the root causes of abandonment without the need for a total platform overhaul that would have stalled the business.

Personal Reflection

My primary motivation for the TeenTruth survey builder redesign was to get to the heart of user fatigue. I saw marketers, researchers, and educators trying to reach teens but fighting with a tool that should have been their biggest ally. This project wasn't just about cleaning up logic, it was about giving these users their mental energy back so they could focus on their mission. I championed design leadership by applying surgical IA changes that addressed the root causes of abandonment without the need for a total platform overhaul that would have stalled the business.

Personal Reflection

My primary motivation for the TeenTruth survey builder redesign was to get to the heart of user fatigue. I saw marketers, researchers, and educators trying to reach teens but fighting with a tool that should have been their biggest ally. This project wasn't just about cleaning up logic, it was about giving these users their mental energy back so they could focus on their mission. I championed design leadership by applying surgical IA changes that addressed the root causes of abandonment without the need for a total platform overhaul that would have stalled the business.

Future Considerations

The surgical redesign of the TeenTruth survey builder was a critical intervention to stabilize the platform, but the roadmap for long-term success requires a strategic shift from reactive fixing to proactive scaling:

Allow users to save survey drafts with a simple email input rather than a full account, creating a more flexible process that supports marketing initiatives to reengage users after abandonment

Define smart default values for each question type to accelerate survey building speed by eliminating empty states

Transform common use cases into templated starter kits that prefill audience demographics, screener questions, survey questions and more to minimize the clicks required to convert