Optimize existing qualifying quiz

designed and built: 2022-2023

Sealed

overview

Sealed aimed to help electrify homes in America by using air sealing methods and upgrading HVAC systems to more modern and efficient options. They offered various financing solutions to make these upgrades more affordable for homeowners.

We needed a thorough onboarding process to qualify homeowners before they spoke with a sales team member, ensuring they received the help and information they needed. Sealed was almost solely dependent on that experience.

deliverables

User Interface
Comp Analysis
Prototyping

software

Figma

challenge

Optimize the designs for a more efficient and mobile friendly experience.

The qualifying quiz was initially implemented was a limited experience—having first been built in Typeform primarily for speed and efficiency. However, it was later transitioned into WordPress to provide far greater flexibility in the design so it could better align with the established brand guidelines. Despite these improvements, the question set proved to be long and cumbersome, creating unnecessary friction for users. We recognized the need to rebuild the backend to accommodate dynamic question sets that would rely on the backend data rather than having questions hard-coded into the front end.

While we were in the process of rebuilding the backend, we identified a significant opportunity to simultaneously update and enhance the front end. Importantly, the existing question sets had not been designed with mobile users in mind, which was a critical oversight. Therefore, we needed to thoroughly comb through the entire flow and pinpoint problematic areas in order to optimize the overall user experience effectively.

existing experience

I needed to understand fully the entire end-to-end digital experience and the overarching challenges it presented. It was essential for me to grasp all aspects involved, including the potential barriers and obstacles faced throughout the process. So I started with a full audit and screen breakpoint check.

existing UX audit

I started by evaluating the full user experience of Sealed’s existing digital footprint by analyzing design, navigation, content accessibility, and usability.

mobile screen breakpoint issues

With over half of Sealed’s web traffic coming from mobile devices, we had to prioritize responsive layouts. A user-friendly mobile experience improves accessibility, understands native chrome limitations, and prioritizes responsive features.

Review the full audit in Figma

design solution exploration

After the UX audit, I focused on two main priorities; optimizing for smaller screen sizes without sacrificing anything on larger sizes, and cleaning up and simplifying the copy throughout the flow.

We also planned a second phase of the upgrades to make a more efficient flow of content, but we needed the backend upgrade to be complete before we could take this step.

optimize for screen sizes

  • Remove unnecessary white space that ate up valuable pixels in mobile screens

  • Add built in accommodations for accessibility to allow us to remove the floating accessibility button that ate up space.

  • Float the progression buttons in a sticky treatment at the bottom of the screen for easy access for thumbs and peace of mind for users.

simplification of copy

  • A lot of pixel space was taken up merely with wordy questions and responses.

    While there was personality in the longer bits of copy- it added significant height- especially on mobile screens.

planned optimization steps

We felt confident that a significant number of the problems homeowners were facing in the lengthy qualifying quiz which stemmed from the order of the questions and a noticeable lack of dynamism.

There was also considerable drop-off at the very beginning of the flow when we asked for the homeowners' personally identifiable information (PII) right away before they had even begun the quiz. From that point onward, the reasons for the subsequent fall-off were unclear since there was no existing analytics tracking each step along the various questions; we only had rough percentages showing the drop-off from section to section.

planned new user flow

We had several plans in mind to make a more efficient question set- but those were all dependent on a more dynamic and robust backend.

While that was built out we made plans for our first major test in changing the order of questions in the qualifying quiz- moving the PII to closer to the end of the quiz. We’d grab just the ZIP code first before the homeowner started the flow to verifying they were in the right geographical area. Then we’d gather their actual address, full name, phone number and email address at the end with a password creation to secure the information as well

Review the full user flows in Figma

final designs

We worked on introducing a mobile-friendly design for its highly utilized qualification quiz, ensuring an accessible and efficient experience for users on the go. The intuitive interface allows participants to navigate through questions seamlessly, making it easier to complete the quiz at their convenience. Optimized for various mobile devices, the design focuses on clarity and responsiveness, enhancing user engagement and satisfaction. With Sealed, take the qualification quiz wherever you are and discover your potential in an effortless way.

Review the designs in Figma