Hearth & Home

OVERVIEW

SYNOPSIS
Hearth & Home Technologies, the Residential Building Products division of the HNI Corporation, is a leading global provider of residential and commercial fireplace and fire-feature products. They engineer, manufacture, test, sell, and distribute top-quality stoves, fireplaces, and fire tables, delivering comfort and warmth to homes or businesses worldwide.

PROJECT GOAL / RESULTS

When I joined the company, they were in the midst of a major brand refresh across multiple affiliate brands—particularly within their portfolio of fireplace-focused websites. The goal was to modernize both the digital presence and supporting marketing materials in alignment with newly developed style guides.

Collaborating closely with the marketing team, category leads, editors, and developers, we reimagined the content and overall visual direction. I was entrusted with designing a brighter, more contemporary look that not only aligned with the updated brand identity but also resonated with a modern-day target audience.

Heat & Glo, the company’s flagship and highest-performing brand, was the primary focus of the redesign effort. Its newly updated website established a fresh visual and strategic foundation that guided the branding refresh for the other affiliated company sites.

INVOLVEMENT

Extensive Planning & Analytical Phases / Low & High-Fidelity Prototyping / UX-UI Design / Post Design Quality Assurance (QA) / User Research Sessions (Stellar)

Before & After

The previous website felt cramped and visually dated. The redesign focused on creating a more modern, user-friendly experience by introducing generous white space, improving visual hierarchy, and incorporating layout variation to add rhythm and interest. This modernization effort aimed to elevate the overall aesthetic, making the site feel cleaner, more open, and aligned with contemporary digital standards. By allowing the content—and especially the product imagery—to breathe, the design better showcases the brand and puts the spotlight where it belongs: on the products.

Design System

I implemented a streamlined design system to bring consistency, efficiency, and clarity across digital products. Built with scalability in mind, the system included core UI components, typography, color palettes, spacing guidelines, and interactive states—all aligned with brand standards.

To ensure it remained relevant and effective, I regularly evaluated and refined the system based on real-world use, team feedback, and evolving business needs. Whether introducing new patterns, optimizing components, or adjusting visual styles to reflect brand updates, I approached maintenance as an ongoing, collaborative process—ensuring the design system stayed modern, functional, and aligned with both user expectations and company goals.

Find a Dealer Enhancements

This project focused on enhancing the “Find a Dealer” experience across both desktop and mobile for one of Hearth & Home's key brand properties, Heat&Glo. The original interface presented a number of usability challenges, including cluttered spacing, poor visual hierarchy, and confusing interaction flows—especially on mobile.

Working collaboratively with the team, I led a redesign effort that significantly improved the layout, accessibility, and overall usability. Key improvements included:

Streamlined spacing and improved content hierarchy to boost readability.
Enhanced mobile responsiveness for better browsing and dealer selection on smaller screens.
Clearer labeling and CTA positioning to drive user action.
Improved device testing and QA to ensure a consistent experience across breakpoints.

The result is a cleaner, more intuitive experience that aligns better with brand standards and ultimately supports users in locating a dealer quickly and confidently.

Coupon and Lead Gen Form Enhancements

Promo and Form Component

This component was designed as a flexible “lockup” combining bold promotional messaging with a high-converting lead form. The goal was to give marketing teams ample visual space for creative promo content while positioning the form in a way that brings it higher on the page—thanks to a more horizontal layout. This not only improves visibility and engagement but also reduces scroll friction, especially on desktop. The images below showcase parts of the design process, layout refinements, and responsive behavior across breakpoints.