Redesigning & Migrating a 5,000+ Page Legacy Marketing Site

Background

iContainers is a trailblazer in digital freight forwarding, providing seamless end-to-end logistics solutions. Their operations span two key platforms: a content-rich marketing site designed to drive user engagement and conversions, and an application platform where most transactions occur.

Objective

To transform iContainers’ marketing site into a scalable, user-friendly platform that empowers the marketing team with autonomy, enhances SEO performance, and delivers a consistent and engaging user experience. The project aimed to:

• Reduce developer dependency for faster page publishing.
• Address technical SEO issues and optimize site performance.
• Establish a cohesive design system for consistency.
• Focus on high-traffic, high-conversion pages to drive results.

My Role: Design Lead, owning delivery

I led the design process, collaborating with a visual designer and cross-functional teams to deliver a scalable, efficient solution. Key responsibilities included:

• Aligning goals with stakeholders across marketing, development, and SEO teams.
• Creating a comprehensive design library and reusable component system to ensure consistency and scalability.
• Designing and prototyping solutions to streamline content creation and enhance user engagement.
• Guiding the visual designer in crafting cohesive and on-brand UI elements and visuals.
• Overseeing the implementation process, ensuring the designs were accurately executed and optimized for performance.

This role required strategic leadership, hands-on design, and close collaboration with both the visual designer and cross-functional teams to deliver a scalable and efficient solution.

Discovery

Pain Points

• Publishing a new page required developer support, taking up to two weeks per page.
• Small SEO or content updates faced long implementation delays.
• Past redesigns resulted in inconsistent content, tone, and design across the site.
• High-traffic landing pages had low conversion rates due to outdated design and poor optimization.

Observations

• The legacy site had a disorganized structure with poor categorization, duplicate content, outdated pages, excessive 301 redirects, abundant 404 errors, and no internal linking.
• Each page was custom-built in HTML by developers without design guidance, often leading to inconsistent designs based on developer assumptions.
• The marketing team lacked control over pages, which were not responsive, and key CTAs were hidden on mobile views.

Key Solutions & Visuals

• Used the Strapi CMS to give the marketing team autonomy and control over the site.
• Coordinated with marketing to leverage the CMS for SEO customizations on each page.
• Created a design library with over 300 UI elements for consistency.
• Developed a component library comprising 40 reusable sections for streamlined page building.
• Standardized page categorization and unified designs for each category to ensure a cohesive experience.
• Website is currently live at www.icontainers.com

Results

Design Process

Research

• Analyzed website performance using Google Analytics, focusing on the top 100 pages with the highest traffic and conversions out of 5,000 pages.
• Installed Hotjar to study user behavior through heatmaps, click patterns, and scroll depth on high-performing pages.
• Collaborated with the marketing team to identify factors driving conversions, such as keywords, content, or design structure.
• Conducted A/B tests on key pages to validate hypotheses and gather actionable insights for the new design.

Definition

• Identified critical problems and outlined key requirements for each team.
• Marketing needed an SEO-friendly system with the abilty to customize meta tags, alt tags and publish new pages independently.
• Technical teams required a solution with minimal developer dependency and simplified updates.
• The SEO team aimed to clean up chains of redirects, create new 301 redirects, restructure URLs, and automatically update the robots.txt file.
• The design team focused on achieving consistency across pages using the existing design system while limiting the design dependency primarily to images and illustrations for new pages.

Ideation

• Explored solutions, including HTML pages with a dedicated developer, a custom CMS, or a third-party CMS.
• Developed a new Information Architecture (IA) to group pages and content logically while planning for future scalability.
• Removed approximately 800 outdated pages and redirected them appropriately.
• Restricted language support to EN and ES for most pages while retaining DE and NL for high-traffic pages.

Design

• Exported the top 200 pages into Figma and broke them into sections to identify reusable components.
• Created a library of 40+ components in light and dark themes, ensuring flexibility and coverage of all page layouts.
• Validated the components by testing them on an additional 200 random pages and made adjustments for robustness and adaptability.

Implementation

• Integrated a third-party CMS to meet marketing and technical requirements.
• Built and implemented the component library within the CMS, ensuring compatibility with SEO tools and scalability.
• Migrated updated content into the CMS while adhering to the new IA and SEO best practices.

Testing

• Conducted functional testing to ensure all components and pages worked across devices and browsers.
• Validated Core Web Vitals and resolved over 200 issues to optimize page speed and performance.
• Performed usability testing with internal and external stakeholders to ensure a smooth user experience.
• Monitored analytics post-launch to track user behavior and identify areas for further optimization.

Learnings

• Content Cleanup Drives Clarity: Eliminating redundant pages and streamlining the URL structure not only improved SEO but also enhanced the user experience by making content more accessible.
• Scalability Matters: Adopting a component-based design approach ensured that the new system was flexible and scalable for future needs, reducing long-term design and development efforts.
• Collaboration Enhances Results: Close collaboration between marketing, SEO, and tech teams allowed us to create a system that met diverse needs while maintaining a unified vision.
• Design System Consistency: Leveraging a comprehensive design system reduced inconsistencies across pages and streamlined the process for future updates and new page creation.