Guggenheim Investments

Guggenheim.com

Complete Website Redesign & Development

Guggenheim.com
Redesign
Client
Guggenheim Investments
Role
Senior Front-End Engineer
Company
Code and Theory NYC
Url
https://www.guggenheiminvestments.com
Period

The Challenge

Guggenheim Partners, one of the world’s leading private investment banking and asset management firms managing over $240 billion in assets globally, faced a significant digital challenge. Despite their rich 130-year heritage and thought leadership in technology and market insights, their digital presence lagged behind competitors.

The firm needed to modernize two critical digital properties:

Key Business Challenges:

The Solution

Design Philosophy: Connecting History to Present Day

The new digital experience pays homage to 130 years of Guggenheim heritage while showcasing modern innovation. Large, impactful imagery juxtaposes historical family photographs with current employees, creating a visual narrative of enduring values and continuous evolution.

Key Features Delivered:

🎯 “Our Perspectives” Content Platform

📱 Responsive Design Architecture

🔍 Advanced Search & Discovery

🏢 Corporate Storytelling

Technical Implementation

Frontend Architecture

Core Technologies:

Code Structure & Methodology

🎨 SCSS Architecture

// Modular SCSS structure
@import 'compass';
@import 'compass/css3';
@import 'resources'; // Variables and mixins
@import 'vendors/webfonts'; // Typography system
@import 'vendors/iconfont'; // Icon system

// BEM-based component structure
.hero {
  &__slideshow {
    /* Block element */
  }
  &__headline {
    /* Block element */
  }
  &--slideshow {
    /* Block modifier */
  }
}

🧩 Modular JavaScript Architecture

// Namespace pattern for organized code
var Gugg = Gugg || {};

Gugg.Main = (function () {
  function init() {
    Gugg.Header.init();
    Gugg.HeroSlideShow.init();
    Gugg.HeritageTimeline.init();
    Gugg.Locations.init();
  }
})();

📱 Component-Based Development

Key Technical Features

🎢 Hero Slideshow System

Custom-built slideshow with fade transitions and automatic progression for homepage hero section.

📅 Heritage Timeline

Interactive timeline component showcasing company history with smooth animations and responsive design.

🗺️ Location Finder

Interactive office location system for global company presence with map integration.

✅ Custom Form Components

🔍 Enhanced Search Experience

Typography & Brand Implementation

📝 Guardian Font System

Complete implementation of Guardian font family:

Web font optimization with multiple format support (EOT, SVG, TTF, WOFF) for cross-browser compatibility.

🎨 Color System

// Brand color palette
$purple: rgb(81, 40, 79); // Primary brand color
$light_purple: #592f57; // Secondary purple
$light_blue: #5e8ab4; // Accent color
$grey: rgb(99, 102, 106); // Text color
$warm_grey: #f9f9f9; // Background tints

Performance Optimizations

Development Process & Methodology

🏗️ Template System

Developed comprehensive template library including:

📋 Development Tools & Workflow

🧪 Quality Assurance

Results & Impact

📈 Enhanced User Experience

🎯 Technical Achievements

💼 Business Impact

Technical Highlights

🔧 Custom Components Built

  1. Hero Slideshow Module - Automatic image rotation with fade transitions
  2. Heritage Timeline - Interactive company history with smooth scrolling
  3. Location Finder - Global office locator with map integration
  4. Custom Form Controls - Styled checkboxes, radios, and dropdowns
  5. Search Enhancement - Multi-mode search with intelligent filtering
  6. Article Grid System - Responsive content layout with hover effects

📱 Responsive Design Features

⚡ Performance Features

Code Quality & Standards

🎯 CSS Architecture

📝 JavaScript Standards

🔄 Maintenance & Scalability

Conclusion

The Guggenheim.com project successfully transformed a traditional financial services website into a modern, engaging digital experience that honors the firm’s rich heritage while showcasing their innovative approach to investment management. Through careful attention to user experience, technical implementation, and brand storytelling, we created a platform that effectively communicates Guggenheim’s expertise and thought leadership to their diverse audience.

The project demonstrates the successful marriage of sophisticated design with robust technical implementation, resulting in a scalable, maintainable, and high-performing website that serves as a digital flagship for one of the world’s most prestigious investment firms.

Technologies Used: SCSS/Sass, JavaScript/jQuery, PHP, BEM Methodology, Compass, HTML5, CSS3, Responsive Design

Key Deliverables: Complete front-end development, responsive design implementation, custom JavaScript modules, SCSS architecture, template system development, cross-browser optimization

Overview

Full Case Study on codeandtheory.com at https://www.codeandtheory.com/things-we-make/guggenheim-partners

Screens

Guggenheim_Homepage.jpg Guggenheim _heritage.jpg