Hearth website
Hearth is a software company that empowers home improvement contractors and businesses with tools to achieve the American Dream. With offices in Austin and San Francisco, Hearth offers an all-in-one app designed to help home improvement professionals streamline their sales processes, enhance efficiency, and secure more business.
The Problem
In redesigning Hearth’s website, I aimed to solve several key problems that were impacting user experience and conversion rates. The previous site was cluttered and lacked a cohesive, modern aesthetic, which made it difficult for users to trust the brand and quickly grasp Hearth's value proposition. The information architecture was not intuitive, causing users to struggle in finding relevant information about Hearth’s financing tools. Additionally, the calls-to-action were not prominent or strategically placed, resulting in missed opportunities for lead generation. Mobile responsiveness and load speed also needed improvement to ensure a seamless experience across devices. By addressing these issues, my goal was to create a visually engaging, user-friendly site that would clarify Hearth’s offerings, boost user engagement, and ultimately drive more conversions.
Wireframes
I started with detailed wireframes to serve as the foundation for a streamlined, user-centered experience tailored to home improvement professionals. These wireframes mapped out the site’s structure and prioritized key user flows, ensuring an intuitive journey from exploring product offerings to completing transactions.
Key Elements of the Wireframes:
User-Centric Layouts: Each page was organized to support contractors’ needs, with prominent calls to action (CTAs) guiding them through critical processes such as requesting payments, exploring service benefits, and accessing customer success resources.
Clear Hierarchies: Visual hierarchies were designed to highlight essential features like payment options, customer financing, and business tools. This structure made it easy for contractors to quickly locate information, reducing cognitive load and enhancing user satisfaction.
Conversion-Driven Design: The wireframes emphasized conversion points across the site, including optimized CTAs like "Get Started Today" and step-by-step guidance on the payment process to simplify user decision-making.
Consistency and Scalability: The wireframe system incorporated Hearth’s brand elements in a consistent format, creating a cohesive experience across all pages and allowing for easy scalability as new features are added.
These wireframes served as a critical blueprint, helping align design and development teams and facilitating user feedback during early usability testing. This foundation ultimately contributed to a more efficient design-to-development process and a user experience that supports contractors in growing their businesses with Hearth’s tools.
Information Architecture
To optimize user experience and make Hearth’s offerings more accessible, I developed a clear and intuitive information architecture for the website. Starting with an in-depth analysis of user needs and business goals, I organized the content into logical categories, creating a structure that would guide users effortlessly through the site.
The sitemap has the top navigation, sub-navigation, and footer links, ensuring users can quickly locate essential information, whether they’re contractors exploring financing options or potential clients learning about Hearth’s solutions. Key sections such as “Tools for Every Business” and “Financial Tools” were grouped to reflect the primary services Hearth offers, while the “Learn” section provides valuable resources tailored to contractors’ needs. Additionally, a dedicated footer includes quick links to frequently accessed pages, supporting a seamless experience across devices.
Final design
The redesigned Hearth website offers a fresh, streamlined, and customer-centric experience that significantly enhances brand perception and usability. By introducing a clean, modern aesthetic and balancing the layout with high-quality visuals and consistent branding, the new design builds trust and presents Hearth as a professional, trusted financing partner. The revamped navigation and clearly placed calls-to-action make it easier for users to find relevant information and take action, boosting conversion potential.
Mobile optimization and faster load times make the site more accessible to contractors on the go, while an improved information architecture helps users understand Hearth’s offerings more intuitively. Tailored messaging for different business types, along with strategically placed social proof, builds credibility and speaks directly to various customer needs. Overall, these changes increase user engagement, enhance brand authority, and support lead generation goals by making it easier for potential clients to understand Hearth’s value and connect with the company.
The redesigned Hearth website delivered impressive results, achieving a 50% increase in site visits and a 35% boost in qualified leads. By enhancing UX/UI, I developed a streamlined information architecture that made the site easier to navigate, while optimizing for mobile responsiveness and load speed to ensure a smooth experience across devices. The improved visual hierarchy and clear, strategically placed CTAs guided users intuitively through the site, boosting engagement and making it simple for users to take action.
This redesign not only enhanced the user journey but also aligned closely with Hearth’s business objectives, effectively driving conversions and supporting the company’s growth goals. The new website provides a strong foundation for continued engagement and establishes Hearth as a trusted, professional partner in contractor financing.