All case studies

Legacy to Design System

Transforming 27 years of technical debt into opportunities.

It All Began with a Digital Maze

Burdened by outdated design and technical debt, Info-Tech's website had become a source of user frustration—a clear signal for change.

The Challenge

Overcoming 27 Years of Design Inconsistencies

As Info-Tech grew to over 30,000 members by 2022, the company faced significant design challenges stemming from rapid expansion during the pandemic. This growth brought outdated systems and fragmented experiences into sharp focus.

3 Overwhelming Challenges:

2.56% Clickthrough Rate

Only 539 of 21,000 active accounts clicked on calls to action (CTAs) for key products.

2.56% Clickthrough Rate

Only 539 of 21,000 active accounts clicked on calls to action (CTAs) for key products.

2.56% Clickthrough Rate

Only 539 of 21,000 active accounts clicked on calls to action (CTAs) for key products.

98.9% Abandonment Rate

170,000 sessions on the IT Leadership Resource ended without engagement.

98.9% Abandonment Rate

170,000 sessions on the IT Leadership Resource ended without engagement.

98.9% Abandonment Rate

170,000 sessions on the IT Leadership Resource ended without engagement.

60% of Loading Time Issues

Fragmented codebase and legacy CSS led to frustratingly slow load times.

60% of Loading Time Issues

Fragmented codebase and legacy CSS led to frustratingly slow load times.

60% of Loading Time Issues

Fragmented codebase and legacy CSS led to frustratingly slow load times.

My Role

Leading a Cross-Functional Transformation

Design Lead

VP of Creatives

Des & Dev Director

Sr. Frontend Dev

As the Design Lead, I collaborated closely with cross-functional stakeholders to tackle these challenges. Our mission: distill clarity from chaos and deliver a scalable design system.

The Process

Identifying User Pain Points and Business Needs

To align with company goals while addressing user frustrations, I employed a combination of user research and business analysis.

Team Alignment in Action

I facilitated retrospectives with cross-functional teammates to define reusable patterns that could resonate across the organization.

Key Actions in First Month:

Conducted 10 User Interviews

1:1 calls with designers and developers to understand workflows and challenges.

Conducted 10 User Interviews

1:1 calls with designers and developers to understand workflows and challenges.

Conducted 10 User Interviews

1:1 calls with designers and developers to understand workflows and challenges.

Audited the 20 Highest-Traffic Pages

Documented inconsistencies and performed heuristic analyses.

Audited the 20 Highest-Traffic Pages

Documented inconsistencies and performed heuristic analyses.

Audited the 20 Highest-Traffic Pages

Documented inconsistencies and performed heuristic analyses.

Reviewed Target Audience Profiles

Identified legal risks affecting contracts with government and education clients.

Reviewed Target Audience Profiles

Identified legal risks affecting contracts with government and education clients.

Reviewed Target Audience Profiles

Identified legal risks affecting contracts with government and education clients.

The Plan

Design for Scalability and Speed

I secured buy-in by presenting visual evidence of critical issues—especially inconsistent CTAs. They have direct and scalable impact on business conversions.

Proposal Translating UX to Business Strategy

Focus on simplicity, WCAG compliance, and scalability to drive measurable business outcomes.

One-pager showing the first step of the strategy

Phased Approach:

Start in Figma

Build a reusable component library.

Start in Figma

Build a reusable component library.

Start in Figma

Build a reusable component library.

Integrate Tailwind CSS

Establish a scalable frontend framework.

Integrate Tailwind CSS

Establish a scalable frontend framework.

Integrate Tailwind CSS

Establish a scalable frontend framework.

Document & Onboard

Provide clear guidelines for adoption.

Document & Onboard

Provide clear guidelines for adoption.

Document & Onboard

Provide clear guidelines for adoption.

Execution

From Plan to Production

Using atomic design principles, we deconstructed components into manageable units as building blocks for building templates and libraries for a consistent implementation across the site.

High-Level Process Map

This shows the journey of atomic design elements evolving into new yet cohesive real pages designed and built by different teammates.

Close-up, The Art of Subtle Details

Every interaction felt like creating a stop-motion film—meticulously deconstructing each micro-design detail to ensure a seamless flow.

WCAG Standards, The Art of Advocacy

"Don't Make me Think" - Steve Krug

Key Deliverables After 6 Months:

Web Component Library

Tested and ready-to-use for designers and developers.

Web Component Library

Tested and ready-to-use for designers and developers.

Web Component Library

Tested and ready-to-use for designers and developers.

Improved Handoffs

Reduced cross-team handoff issues, cutting bug resolution times by 40%.

Improved Handoffs

Reduced cross-team handoff issues, cutting bug resolution times by 40%.

Improved Handoffs

Reduced cross-team handoff issues, cutting bug resolution times by 40%.

Streamlined Onboarding

A design glossary and comprehensive documentation sped up team integration.

Streamlined Onboarding

A design glossary and comprehensive documentation sped up team integration.

Streamlined Onboarding

A design glossary and comprehensive documentation sped up team integration.

Execution

Design-Driven Business Transformation

The design system did more than just address the key challenges—it became an invaluable tool that improved daily workflows and delivery speed across multiple teamnates.

Before Design System

Homepage, 2019

After Design System

Homepage, 2024

3 Key Business Outcomes:

2.5x Increase in CTA Engagement

Click rates for primary CTAs increased from 2.56% to 8.96%.

2.5x Increase in CTA Engagement

Click rates for primary CTAs increased from 2.56% to 8.96%.

2.5x Increase in CTA Engagement

Click rates for primary CTAs increased from 2.56% to 8.96%.

35% Increase in Session Retention

Retention on key pages rose dramatically, from 1.1% to 36.1%.

35% Increase in Session Retention

Retention on key pages rose dramatically, from 1.1% to 36.1%.

35% Increase in Session Retention

Retention on key pages rose dramatically, from 1.1% to 36.1%.

20% Faster Page Load Times

Tailwind CSS streamlined the codebase, reducing bloat and boosting performance.

20% Faster Page Load Times

Tailwind CSS streamlined the codebase, reducing bloat and boosting performance.

20% Faster Page Load Times

Tailwind CSS streamlined the codebase, reducing bloat and boosting performance.

Now a Stronger Brand with Better User Experience

Today, the site reflects a unified, vibrant IT company with a modern experience, powered by the design system.

Feedback Highlights

Bradd Bezzaire

Senior Product Designer

I can build pages so much faster now! Have you consider making a sticky nav for in-page links?

Bradd Bezzaire

Senior Product Designer

I can build pages so much faster now! Have you consider making a sticky nav for in-page links?

Bradd Bezzaire

Senior Product Designer

I can build pages so much faster now! Have you consider making a sticky nav for in-page links?

Chris Lennox

Lead Product Designer

I love it Val, can we get monthly emails for design system updates, I don't want to miss out!

Chris Lennox

Lead Product Designer

I love it Val, can we get monthly emails for design system updates, I don't want to miss out!

Chris Lennox

Lead Product Designer

I love it Val, can we get monthly emails for design system updates, I don't want to miss out!

Sean Robinson

Senior Frontend Developer

Unlike the old bloated stylesheets, this one is clean, efficient, and easy to update.

Sean Robinson

Senior Frontend Developer

Unlike the old bloated stylesheets, this one is clean, efficient, and easy to update.

Sean Robinson

Senior Frontend Developer

Unlike the old bloated stylesheets, this one is clean, efficient, and easy to update.

Next Phase

Optimizing the Call-Booking Modal with Design System

Our next challenge is improving the UX of the call-booking modal, a high-impact touchpoint for scheduling with research analysts, sales reps, and advisors.

By refining this pivotal component, we aim to boost user satisfaction and drive even greater adoption of the design system across Info-Tech’s site.

Team Shoutouts

Thanks to Liam Nickerson, Brian Walker, and Sean Robinson for their invaluable perseverance and contributions. This transformation succeeded thanks to an ambitious team effort.