Overview
The goal of this project was to explore how the homepage experience could be improved through thoughtful UI/UX design and no-code development. I focused on creating a modern, user-friendly interface that aligns with current design standards, improves clarity, and enhances the overall user journey—from landing to conversion.
This is a self-initiated redesign of the Campaign Monitor homepage, created solely for my personal portfolio. I am not affiliated with Campaign Monitor in any way.
This redesign also serves as a demonstration of my skills in:
• Visual design and layout
• UX thinking and problem-solving
• Responsive design practices
• No-code implementation using Framer
The goal of this project was to explore how the homepage experience could be improved through thoughtful UI/UX design and no-code development. I focused on creating a modern, user-friendly interface that aligns with current design standards, improves clarity, and enhances the overall user journey—from landing to conversion.
This is a self-initiated redesign of the Campaign Monitor homepage, created solely for my personal portfolio. I am not affiliated with Campaign Monitor in any way.
This redesign also serves as a demonstration of my skills in:
• Visual design and layout
• UX thinking and problem-solving
• Responsive design practices
• No-code implementation using Framer
Navigation
Old navigation
New navigation
As part of the Campaign Monitor homepage refresh, the top navigation was redesigned for improved clarity, usability, and engagement. Key enhancements include:
Switched to a white background for better logo contrast and brand visibility.
Reduced letter spacing for improved text readability and modern visual alignment.
Styled key CTAs (“Log in,” “Get a demo,” “Free trial”) to improve action visibility.
Introduced a structured mega dropdown for “Features”, grouping content under clear categories with icons for faster scanability and better information architecture.
As part of the Campaign Monitor homepage refresh, the top navigation was redesigned for improved clarity, usability, and engagement. Key enhancements include:
Switched to a white background for better logo contrast and brand visibility.
Reduced letter spacing for improved text readability and modern visual alignment.
Styled key CTAs (“Log in,” “Get a demo,” “Free trial”) to improve action visibility.
Introduced a structured mega dropdown for “Features”, grouping content under clear categories with icons for faster scanability and better information architecture.
Hero section
Old hero section
New hero section
The hero section was redesigned to establish a stronger first impression, improve clarity, and drive user action more effectively. Key improvements include:
Fixed broken CTA layout by introducing clearly styled, high-contrast primary and secondary buttons.
Replaced confusing imagery with contextual visuals that communicate platform performance (open rates, user stats), not just templates.
Used a cohesive visual theme with background texture and brand color accents to reinforce brand identity.
The hero section was redesigned to establish a stronger first impression, improve clarity, and drive user action more effectively. Key improvements include:
Fixed broken CTA layout by introducing clearly styled, high-contrast primary and secondary buttons.
Replaced confusing imagery with contextual visuals that communicate platform performance (open rates, user stats), not just templates.
Used a cohesive visual theme with background texture and brand color accents to reinforce brand identity.
Trusted by section
Old logo wall
New logo wall
The "Trusted By" section was refined to improve layout consistency, visual hierarchy, and cross-device polish. Key improvements include:
Reduced excessive vertical spacing to create tighter visual flow and reclaim valuable page real estate.
Removed awkward horizontal scroll bar, replacing it with a seamless inline layout to improve accessibility and user control.
Standardized logo sizing to ensure balanced visual weight and consistent brand presentation.
Improved contrast and cohesion by switching to a dark background, allowing logos and typography to stand out more clearly.
The "Trusted By" section was refined to improve layout consistency, visual hierarchy, and cross-device polish. Key improvements include:
Reduced excessive vertical spacing to create tighter visual flow and reclaim valuable page real estate.
Removed awkward horizontal scroll bar, replacing it with a seamless inline layout to improve accessibility and user control.
Standardized logo sizing to ensure balanced visual weight and consistent brand presentation.
Improved contrast and cohesion by switching to a dark background, allowing logos and typography to stand out more clearly.
Features section
Old feature section
New feature section
The features section was redesigned to enhance readability, reduce cognitive load, and better demonstrate product capabilities. Key improvements include:
Increased font sizes to improve readability and accessibility across devices (previous headings were as small as 12px).
Replaced text-heavy layout with an interactive accordion, allowing users to explore content progressively without being overwhelmed.
Integrated product demo video in place of a static screenshot to showcase real functionality and increase engagement.
The features section was redesigned to enhance readability, reduce cognitive load, and better demonstrate product capabilities. Key improvements include:
Increased font sizes to improve readability and accessibility across devices (previous headings were as small as 12px).
Replaced text-heavy layout with an interactive accordion, allowing users to explore content progressively without being overwhelmed.
Integrated product demo video in place of a static screenshot to showcase real functionality and increase engagement.
Template section
Old template section
New template section
The template section was redesigned to showcase more options and create a more dynamic, engaging experience. Key improvements include:
Expanded from 3 to 6+ templates for better selection visibility
Added infinite loop animation to continuously cycle through more available templates
Increased engagement through dynamic carousel that draws attention and showcases variety
The template section was redesigned to showcase more options and create a more dynamic, engaging experience. Key improvements include:
Expanded from 3 to 6+ templates for better selection visibility
Added infinite loop animation to continuously cycle through more available templates
Increased engagement through dynamic carousel that draws attention and showcases variety
Customer testimonial section
Old customer testimonial section
New customer testimonial section
The testimonials section was redesigned to consolidate social proof and improve space efficiency. Key improvements include:
Consolidated multiple testimonial sections into a single, unified slider component
Enhanced visual consistency with a cohesive card-based design and consistent formatting
Better brand showcase by featuring company logos prominently alongside testimonials
The testimonials section was redesigned to consolidate social proof and improve space efficiency. Key improvements include:
Consolidated multiple testimonial sections into a single, unified slider component
Enhanced visual consistency with a cohesive card-based design and consistent formatting
Better brand showcase by featuring company logos prominently alongside testimonials
AI feature section
A new AI Writer feature section was added to showcase the trending AI capabilities and differentiate the product. Key design decisions include:
Prominent standalone section with distinctive purple background to make AI features stand out from other sections
Animated GIF demonstration showing real AI content generation in action to prove functionality
A new AI Writer feature section was added to showcase the trending AI capabilities and differentiate the product. Key design decisions include:
Prominent standalone section with distinctive purple background to make AI features stand out from other sections
Animated GIF demonstration showing real AI content generation in action to prove functionality
Integration section
A new integrations section was added to highlight platform connectivity and data unification capabilities.
A new integrations section was added to highlight platform connectivity and data unification capabilities.
CTA section
Old CTA section
New CTA section
The final call-to-action section was redesigned to be more visually engaging and space-efficient. Key improvements include:
Reduced excessive whitespace for better space utilization and visual density
Enhanced visual appeal with starfield background pattern and gradient effects
The final call-to-action section was redesigned to be more visually engaging and space-efficient. Key improvements include:
Reduced excessive whitespace for better space utilization and visual density
Enhanced visual appeal with starfield background pattern and gradient effects
Footer section
Old footer section
New footer section
The footer was redesigned to improve organization and reduce visual clutter. Key improvements include:
Better content distribution by moving social media icons and legal links to the left side for improved balance
Reduced right-side clutter by reorganizing elements that were previously crowded together
Cleaner visual hierarchy with better spacing between different content sections
Improved readability through better alignment and grouping of related elements
The footer was redesigned to improve organization and reduce visual clutter. Key improvements include:
Better content distribution by moving social media icons and legal links to the left side for improved balance
Reduced right-side clutter by reorganizing elements that were previously crowded together
Cleaner visual hierarchy with better spacing between different content sections
Improved readability through better alignment and grouping of related elements
Need Design or Just a Fresh Perspective?
I work on digital design, UI, and no-code builds. If that’s what you need, let’s talk.
I work on digital design, UI, and no-code builds. If that’s what you need, let’s talk.
I work on digital design, UI, and no-code builds. If that’s what you need, let’s talk.
