Legacy to Design System
Transforming 27 years of technical debt into opportunities.
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
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.
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.
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
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.
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.
The Plan
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.
Phased Approach:
Start in Figma
Build a reusable component library.
Integrate Tailwind CSS
Establish a scalable frontend framework.
Document & Onboard
Provide clear guidelines for adoption.
Execution
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.
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.
Execution
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%.
35x 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.
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
Senior Product Designer
I can build pages so much faster now! Have you consider making a sticky nav for in-page links?
Lead Product Designer
I love it Val, can we get monthly emails for design system updates, I don't want to miss out!
Senior Frontend Developer
Unlike the old bloated stylesheets, this one is clean, efficient, and easy to update.
Next Phase
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.