HubSpot

Role: UI Designer | Date : 2022 - 2023 | Client: Hubspot

 
 
 
 

The Challenge

HubSpot's homepage needed to better communicate its value propositions to diverse audiences while improving conversion rates. The existing design lacked visual hierarchy and failed to guide users effectively through the product ecosystem, resulting in lower engagement and unclear next steps for potential customers.

  • Inconsistent messaging across product tiers

  • Complex navigation is overwhelming users

  • Low click-through rates on key CTAs

  • Poor mobile experience is impacting 40% of traffic

The Solution

A data-driven redesign focused on hierarchy, clarity, and conversion optimization through iterative testing and refinement.

  • Simplified navigation with clear user paths

  • Component-based design system for consistency

  • Mobile-first responsive framework

  • A/B tested layouts validated with real user data

 
 
 

Approach

Design Process

My approach combined user research, rapid prototyping, and data validation to ensure every design decision was grounded in evidence and aligned with business goals

Research & Analysis: Conducted user interviews, analyzed heat maps, and reviewed conversion funnel data to identify pain points.

Ideation & Prototyping - Created multiple design variations, exploring different layouts and component structures.

 
 
 

Testing & Validation - Ran A/B tests on component variations. Gathered feedback through user testing sessions with 30+ participants across different segments.

Iteration & Launch - Refined designs based on test results and rolled out changes with engineering partners.

 
 

Key Deliverables

Design Solutions


Homepage Hero

Redesigned the hero section to immediately communicate HubSpot's core value proposition. The new design features a clear headline hierarchy, compelling product imagery, and prominent CTAs that guide users toward conversion.

The hero was optimized through 12 rounds of A/B testing, ultimately achieving a 34% increase in click-through rate compared to the previous design.

Key Improvements

  • Simplified messaging hierarchy

  • Dynamic product visuals

  • Dual CTA strategy tested

  • Mobile-optimized layout

  • Reduced cognitive load

Before & After

 
 

Three-Card Value Proposition

Designed a three-card module that breaks down HubSpot's platform into digestible value propositions. Each card uses visual storytelling, clear hierarchy, and strategic CTA placement to guide users deeper into the product ecosystem.

This component became a reusable pattern across the marketing site, maintaining consistency while allowing for contextual customization.

Design Principles

  • Scannable content structure

  • Contextual product imagery

  • Consistent CTA patterns

  • Responsive grid system

  • 28% conversion increase

Before & After

 
 
 
 

Responsive Design System

 
 
 

Impact & Results

Data-driven improvements validated through extensive A/B testing

 
 

+34% Click-Through Rate

+19% Conversion Rate

+28% Page Engagement

 
 
 
 

Key Learnings

Data-Informed Iteration: Running continuous A/B tests revealed that even small changes in CTA placement could significantly impact conversion rates.

Balancing Stakeholders: Aligning marketing, product, and engineering teams early in the process prevented scope creep and ensured smooth implementation.

Responsive Complexity: Designing for mobile-first required rethinking information hierarchy, as what works on desktop doesn't always translate effectively to smaller screens.

Performance Matters: Visual richness must be balanced with page load performance—optimizing images and animations was crucial to maintaining engagement.

 
 

Other Projects

HubSpot - Breeze Visual Design

Cisco - Mobile Apps

Instashop - Case Study