Sprayfoam – Bilawal Shah – Product & UX/UI Designer

Spray Foam Systems – Website Redesign Case Study

Project

Spray Foam Systems (SFS)

Role

UI/UX Designer

Users

Contractors, Roofing Experts, DIY Homeowners

Tools

Figma, Google Analytics, Hotjar

Spray Foam Systems (SFS) is a leading provider in the spray foam industry, offering equipment and solutions for insulation and roofing projects. With a large product catalog and a diverse user base, their website plays a crucial role in both product discovery and purchase decisions. However, outdated design and usability issues created friction in the user journey. This project aimed to modernize the platform and deliver a streamlined, conversion-friendly experience across devices.

Before diving into the process Visual Transformation: Before & After

Glimpse of After

Project Goals

My Design process

Interview Planning: What We Asked

Before conducting our user interviews, we prepared a focused set of questions to uncover key pain points, expectations, and behavior patterns. These questions were designed to guide open-ended conversations and help us better understand both frustrations and improvement opportunities from a user’s point of view.

User Personas That Guided the Redesign

My (experience) is horrible. Check-out is really bad.

I find the website a bit cluttered and it takes me a while to find what I need.

The design doesn’t matter to me as much as finding what I need quickly.

I tried to buy a product once, but the checkout process was confusing, so I gave up. and called you guys instead.

Empathy Map

This empathy map reflects the collective insights gathered from four user interviews representing contractors, DIY customers, and procurement roles

Think & Feel

Frustrated by websites that don’t provide enough product details or reviews.

Worries about making the right purchase for their projects.

Seeks reassurance through customer support and clear information.

Values a straightforward, hassle free shopping experience.

Recommendations from peers about where to buy spray foam equipment.

Feedback about various brands’ customer service experiences.

Industry news and updates through forums, social media, and professional networks.

Promotions and advertisements from competing brands.

Hear

See

Competitor websites with more engaging designs and interactive elements.

Video tutorials and product demos that help in understanding the products better.

Customer reviews and testimonials on other sites, influencing their trust.

Clear categorization and visuals of products on user friendly sites.

See

Expresses the need for detailed product information before making a purchase.

Compares products and prices on different websites.

Seeks advice from online forums or social media groups related to their projects.

Contacts customer service for inquiries about products or for support.

Say & Do

Competitive Analysis

I conducted a thorough examination of key competitors within the spray foam industry to benchmark our website’s features, user experience, and overall online presence against the market standards.

Competitor Type

Self

Indirect

Website Design and Usability

Functional but could benefit from modernization.

Visually engaging design with limited content

Sleek, modern design with user-friendly layout.

Modern and responsive design with high visual appeal.

Not so modern but functional

Product Presentation

Basic product descriptions; could improve multimedia integration.

Fewer products but integrated with interactive features.

Detailed, engaging product presentations with multimedia.

Detailed product pages with comprehensive specifications and visuals.

Detailed product descriptions with images and videos.

Search feature

User Experience

Standard interface; checkout process could be streamlined.

Intuitive user interface with streamlined navigation.

Highly engaging and intuitive UX with easy navigation.

Exceptionally interactive UX with advanced features for user engagement.

Simplified checkout process, user-friendly interface.

Online Purchasing

Clear but could be more intuitive with better calls to action.

Smooth and persuasive purchasing flow.

Dynamic and engaging purchasing process with personalized options.

Streamlined, with clear and compelling calls to action.

Content & Resources

Path to Purchase

To clearly define how users move through the redesigned site and complete key tasks, I created a user flow diagram. This flow outlines the essential paths users take to explore products, view details, and successfully complete a purchase. It helped us map out bottlenecks, identify redundant steps, and ensure a frictionless experience from landing to checkout.

Wireframing & Low-Fidelity Exploration

To align the structure before diving into visual design, I created wireframes that mapped out each core screen. These wireframes focused on layout, content hierarchy, and interaction logic. We used this step to validate our ideas early especially for navigation, product listings, and checkout.

By keeping the wireframes low-fidelity, we were able to quickly test structure and flow with stakeholders and internal teams before committing to final designs.

Branding Direction

A key aspect of the redesign was evolving the brand’s digital identity while respecting its established reputation in the construction and insulation space. We introduced a more modern and cohesive visual language by refining the color palette, typography, and icon system.

The new branding reflects trust, durability, and professionalism key traits our users associate with spray foam equipment suppliers. We also ensured the updated style worked seamlessly across all digital touchpoints, including product pages, marketing banners, and mobile layouts.

Branding Direction

With the structure and components validated through wireframes, we moved into high-fidelity mockups using Figma. This stage brought the full visual direction to life applying the updated branding, layout hierarchy, and UX decisions across key screens.

We focused on real product content, CTAs, and interaction patterns to make sure the design translated well from static frames to a functional UI. Special attention was given to the homepage, product listing, product detail, cart, and checkout experience across both desktop and mobile.