RbA Plan Builder

Client: Renewal by Andersen

Role: Lead UX Designer

Responsibilities: UX/UI design, user flows, wireframing, prototyping, user testing

Duration: 6 weeks (10/23-12/23)

Tools:

miro logo
Figma logo
Procreate logo

The story begins…

“What would a blind window design consultant ask to make sure they got the answers they needed?” Jim got up from his chair and strode purposefully towards the Jumbotron. He creative brief on the screen. “I mean, that’s essentially what we’re solving for.”

The rest of us exchanged glances and nodded agreeably. Of any of my agency teammates, he was one of the subject matter experts in this field, as he’d been out on ride-alongs with actual design consultants for our client, Renewal by Andersen. He and Tanner had the most firsthand experience of anyone on our project team.

He continued. “We’re going to replicate the entire consultation process with a mobile feature.”

“The client doesn’t think it’s possible,” said Stacy.

“And we only have six weeks to turn this idea into a functional prototype?” I asked. Talk about a compressed timeline. I was being asked to bring this concept from 0 to 1, or as close to 1 as we could without involving engineers, in three sprints.

“Yep,” Lisa confirmed. “They want to start user testing by the first week of December.”

An entire timeline unfolded before my mind’s eye in a fraction of a second. In addition to my other project work, this wasn’t going to be easy.

“Well, I like a good challenge,” I nodded. “Game on.”

Overview

Plan Builder is a mobile tool that allows homeowners to measure their existing windows and design custom replacements, using a combination of AR technology and standard user inputs. The tool gives the user an estimated price range for the project, as well as the option to send their designs directly to Renewal by Andersen (RbA), the project sponsor.

Team

I was the lead designer on the project, and was joined by two senior design leaders (who provided creative oversight and subject-matter expertise), one copywriter, two client services managers, and two strategists.

Goals

  • Allow users to explore custom window options without needing an in-home consultation

  • Increase lead generation for RbA among homeowners age 30-45

  • Design and prototyle a modern, accessible, mobile feature integrating AR technology

Highlights:

90%

User approval rating

44%

Potential lead-gen increase

$3.7M

Increased revenue potential

A smartphone displaying a screen from the RbA Plan Builder experience
A smartphone displaying a screen from the RbA Plan Builder experience
A smartphone displaying a screen from the RbA Plan Builder experience
A smartphone displaying a screen from the RbA Plan Builder experience
A smartphone displaying a screen from the RbA Plan Builder experience
A smartphone displaying a screen from the RbA Plan Builder experience
A smartphone displaying a screen from the RbA Plan Builder experience

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.

Hand-drawn sketches of elements of the user experience of the Plan Builder feature

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.

Three screens showing how a user chooses a window type within Plan Builder.
An image showing the interconnected screen flow for the Plan Builder prototype

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.