Window Quotation Tool Redesign. Gamifying quoting to build trust and drive conversion.
At JustWeb Agency, we partnered with a Canadian window distributor to create a gamified online quoting tool that simplified complex configurations, increased visitor engagement, and improved lead generation performance.
Athlete RMS is the world’s first league-wide records management system that collects, analyses and visualizes athletes’ data. ARMS Health is NHL’s internal medical software that serves medical data and tracks performance.
2022
Sector:
Sector:
E-commerce, Home Improvement SaaS
E-commerce, Home Improvement SaaS
Team:
Team:
Product Manager, UX Designer, Full-Stack Developer
Product Manager, UX Designer, Full-Stack Developer
Client:
Client:
Client:
A window distributor in Canada
A window distributor in Canada
My Role:
My Role:
UX/UI Design, Research, Product Strategy
UX/UI Design, Research, Product Strategy
Timeline:
Timeline:
4 months
4 months
Users:
Users:
Homeowners and residential construction customers
Homeowners and residential construction customers
Impact:
Impact:
+3.5x
Top-of-Funnel Traffic
Top-of-Funnel Traffic
+16.5%
Conversion Rate at MVP
Conversion Rate at MVP
This is the final prototype!
This is the final prototype!
and see how this new feature increased the NHL's user satisfaction rate!
and see how this new feature increased the NHL's user satisfaction rate!
Research: Identifying friction and redefining the flow.
Research: Identifying friction and redefining the flow.
I joined the project after a developer-built prototype was created without UX involvement.
Through usability testing and competitive analysis, I uncovered key friction points and redefined the quoting experience around user needs.
We focused on:
Usability Testing: Validating the early tool and mapping major drop-off points.
Competitive Benchmarking: Studying quoting experiences from top competitors to extract best practices.
This foundation shaped a quoting flow that felt faster, clearer, and more trustworthy.
I joined the project after a developer-built prototype was created without UX involvement.
Through usability testing and competitive analysis, I uncovered key friction points and redefined the quoting experience around user needs.
We focused on:
Usability Testing: Validating the early tool and mapping major drop-off points.
Competitive Benchmarking: Studying quoting experiences from top competitors to extract best practices.
This foundation shaped a quoting flow that felt faster, clearer, and more trustworthy.
First MVP built by the developers team with no UX designer on the project
Research Focus Areas.
Research Focus Areas.
Competitive Analysis
Competitive Analysis
Benchmarked quoting flows and UX patterns from leading competitors.
Usability Testing
Usability Testing
Identified confusion points, flow breakdowns, and terminology barriers in the early prototype.
Analytics Review
Analytics Review
Analyzed drop-offs, time on task, and quoting completion trends.
Stakeholder Alignment
Stakeholder Alignment
Clarified lead generation goals and success metrics with business stakeholders.
Insights that drove the solution.
Insights that drove the solution.
Confusing terminology
Confusing terminology
Technical jargon like "Brickmould" and terms like "Cart" created unnecessary friction and drop-offs.
Technical jargon like "Brickmould" and terms like "Cart" created unnecessary friction and drop-offs.
Premature Lead Capture
Premature Lead Capture
Asking for personal information too early broke user trust.
Asking for personal information too early broke user trust.
Rigid and linear step flow
Rigid and linear step flow
A linear, non-flexible sequence overwhelmed users and limited editing flexibility.
A linear, non-flexible sequence overwhelmed users and limited editing flexibility.
Missing On-Demand Education
Missing On-Demand Education
Users needed quick explanations without disrupting their quoting flow.
Users needed quick explanations without disrupting their quoting flow.
Solution #1: Flexible Multi-Window Navigation.
Solution #1: Flexible Multi-Window Navigation.
We replaced the rigid, linear flow with a hub-and-spoke model that allowed users to switch between windows, edit on the fly, and shorten their journey. This new structure gave users more control, reduced friction, and made quoting feel faster and lighter.
We replaced the rigid, linear flow with a hub-and-spoke model that allowed users to switch between windows, edit on the fly, and shorten their journey. This new structure gave users more control, reduced friction, and made quoting feel faster and lighter.
Solution #2: Streamlined Step Structure.
Solution #2: Streamlined Step Structure.
We reduced and restructured the steps into a simpler, progressive sequence. Information was surfaced gradually to avoid overload and keep users focused on completing their quote.
We reduced and restructured the steps into a simpler, progressive sequence. Information was surfaced gradually to avoid overload and keep users focused on completing their quote.
Solution #3: Educational Pop-Ups.
Solution #3: Educational Pop-Ups.
To address gaps in understanding, we added inline support through subtle blue CTA links that opened educational overlays. This allowed users to stay in flow while getting the information they needed.
To address gaps in understanding, we added inline support through subtle blue CTA links that opened educational overlays. This allowed users to stay in flow while getting the information they needed.
Solution #5: Lead Generation at the Right Time.
Solution #5: Lead Generation at the Right Time.
We moved lead capture (email, phone) to after the quote summary. This built trust by showing value first — improving form submission rates and user confidence.
We moved lead capture (email, phone) to after the quote summary. This built trust by showing value first — improving form submission rates and user confidence.
Mobile Design: Quoting on-the-go.
Mobile Design: Quoting on-the-go.
We adapted the quoting experience for small screens without losing functionality:
We adapted the quoting experience for small screens without losing functionality:
Condensed navigation into a mobile-optimized drawer
Scrollable window summaries with quick editing
Prioritized visibility for 3D previews and pricing details
These mobile-first improvements made quoting fast, intuitive, and fully accessible across devices.
These mobile-first improvements made quoting fast, intuitive, and fully accessible across devices.
Execution: Clear handoff, fast build.
Execution: Clear handoff, fast build.
I created a detailed handoff package outlining interaction rules, flow logic, and edge cases across desktop and mobile. This minimized development ambiguity, accelerated implementation, and preserved design quality.
Alignment with leadership ensured UX and business goals stayed tightly connected throughout delivery.
I created a detailed handoff package outlining interaction rules, flow logic, and edge cases across desktop and mobile. This minimized development ambiguity, accelerated implementation, and preserved design quality.
Alignment with leadership ensured UX and business goals stayed tightly connected throughout delivery.
Impact: Engagement, trust, and conversion wins.
Impact: Engagement, trust, and conversion wins.
We validated the MVP through iterative testing. User feedback confirmed that the new structure, language, and flow dramatically improved quoting completion rates and user satisfaction.
We validated the MVP through iterative testing. User feedback confirmed that the new structure, language, and flow dramatically improved quoting completion rates and user satisfaction.
+3.5x
Top-of-Funnel Traffic
Top-of-Funnel Traffic
Paid campaigns drove a 3.5x boost in quoting tool engagement post-launch.
Paid campaigns drove a 3.5x boost in quoting tool engagement post-launch.
+16.5%
Conversion Rate at MVP
Conversion Rate at MVP
The new quoting experience achieved a 16.5% lead conversion rate across 1,000 paid visits.
The new quoting experience achieved a 16.5% lead conversion rate across 1,000 paid visits.
Drop Me a line at:
Visit my page:
Drop Me a line at:
Visit my page:
Drop Me a line at:
Visit my page:
Drop Me a line at:
Visit my page: