The story begins…

I could feel our collective stomach sink to the floor as we listened to the news.

Our client, Generac, had paid another vendor hundreds of thousands of dollars, only to receive 17 broken web components for their CMS. Now the vendor was refusing to do anything unless they were paid more. I was quickly realizing that this redesign project was going to involve more than just updating design patterns and content.

Now was going to be the time for me to channel my natural optimism and outside-the-box thinking and help our distraught client look for the light at the end of the tunnel.

I knew what they needed, and I knew that I could provide exactly that.

Overview

Generac is a one of the world’s leading manufacturers of power solutions for residential, recreational, and commercial use. Their generators have been used everywhere from hurricane-wracked Southeastern states to Taylor Swift’s Eras tour. The various channels varied in how they applied the brand across their three sites, and leadership saw the need to not only align each division under the same brand guidelines, but improve the overall user experience of their online tools and pages.

Team

The team consisted of Tanner Quie (Director of UX, Creative oversight), myself and Honovi Ho, one of our junior designers (UX/UI design), Julie Hagemann (Client Services), Olivia Luterbach (Strategy), Taleah Perfetti and Ashley Skelly-Lekson (Project Management).

On the Generac side we worked directly with Amanda Seder (CMO), Matt Sullivan (Executive Creative Director), Michelle Kwong (VP, Marketing), and Sarah Hogan (Senior Digital Product Owner), as well as several product SMEs.

Goals

Align all business divisions around a single, unified brand expression
Refresh user experience of all online tools and calculators
Set Generac’s in-house marketing team up for long-term success maintaining their own site

Highlights:

400%

User engagement increase

45%

Cost-per-lead reduction

75%

Increased brand consistency

Project Details

Background

RbA struggled to attract tech-savvy homeowners avoiding consultations.
Goal: Create a self-service tool to replace in-home consultations.
Target audience: "Efficient Explorers" who prefer independent research.

Discovery: “Digitizing an in-person consultation”

Challenge: Recreate consultation experience with a self-service feature.
Key requirement: Ask the right questions to gather accurate data.
Outcome: Saved plans with labeled rooms and windows for later edits

Concepting: “Exercises in play”

Challenge: Craft an intuitive flow that feels natural and sleek.
Solution: Sketched milestones using iPad to map key moments.
Personal approach: Inspired by Star Wars artists, focusing on creative ideation through concept sketching.

Wireframes: Making window-measuring inclusive, not just accessible

Challenge: Make window measuring accessible to all abilities.
Solution: Developed options for both smartphone scanning and manual measuring.
Inclusive design: Considered users with physical limitations or outdated devices.

UI and visual design: “So fresh and so clean”

Focus: RbA handled AR; team concentrated on manual measurement UI.
Used RbA’s refreshed branding for a modern look.
Integrated latest design components to ensure consistency.

Prototyping: Building Realistic Interactions

Prototype: Focused on making the experience as real as possible in Figma.
Simplified inputs by using tap-to-fill text boxes.
Created custom component libraries to enhance realism in user flows.

User Testing: Validating the Prototype

Conducted tests with "Efficient Explorers" over three days.
90% of users found the tool helpful and would meet a consultant.
Feedback led to additional interactions and design tweaks.

Outcomes

The Plan Builder prototype received overwhelmingly positive feedback from the target audience. Its intuitive interface and comprehensive features were highly regarded by users, validating its potential to meet the needs of the target segment.

90% of the users found the tool very helpful, and felt that they would be more willing to meet with a consultant after submitting their own window plan.
Users also suggested some interactions that we had previously decided to drop due to questions of relevance, reminding us that we are not our users.
Their feedack was incorporated into a fourth version, which was then fully approved and accepted by the client.

The success of the project was celebrated by Renewal by Andersen, who showcased Plan Builder in their year-end companywide meeting as the flagship feature for the next step in their company evolution.

As of September, 2024, the feature is currently in development for addition to the RbA website.

Generac.com Redesign