Roos International

Roos International has been a go-to destination for interior designers, architects, millworkers, and contractors for over 30 years, often described as the "materials candy store" due to its carefully curated selection of high-end architectural materials. The company’s main value proposition has always been providing a pure, exclusive selection of materials that clients can confidently choose for their design projects.

However, despite its industry reputation and curated approach, Roos International’s digital presence did not reflect the same level of refinement, exclusivity, and sophistication that its physical experience provided. The website was outdated, lacking modern UX and UI trends, and did not convey the premium quality of its offerings. Instead of feeling like an elite design destination, the online platform failed to communicate the essence of Roos International’s brand—one that should mirror the aesthetic and functionality of high-end retailers such as Williams Sonoma or Crate & Barrel.

This disconnect between the brand’s physical and digital experiences created challenges, including:

• Inconsistent brand perception: The outdated design did not align with the company's identity as a leader in premium architectural materials.
• Suboptimal user experience: Navigation, product exploration, and overall usability did not meet the expectations of modern designers and clients.
• Missed engagement opportunities: A lack of a cohesive marketing structure limited the effectiveness of digital outreach and customer retention.

To address these issues, a complete website and marketing redesign was necessary—one that embraced modern UI/UX principles, created a seamless and immersive digital experience, and reinforced Roos International’s position as the premier destination for curated architectural materials.

With Roos recognizing the need for a modern, high-performing digital presence that accurately reflected its brand identity and premium selection of architectural materials, the company’s owner appointed me to identify key pain points and implement a solution that would deliver a functional, visually appealing, and user-friendly website within a defined timeframe.

After evaluating the existing platform, it became clear that the outdated design and lack of streamlined functionality hindered both user engagement and internal efficiency. The primary objectives for the redesign were:

Understanding User Needs:

• Conducted extensive research through user interviews and feedback sessions.
• Identified key user personas: Interior Designers, Architects, Contractors, and Millworker Trades.
• Defined pain points such as difficulty in navigating vast product collections and the need for a seamless digital showroom experience.

Form Management & Client Interaction:

• Implement an intuitive, backend-connected form system for clients interested in requesting material samples or signing up for newsletters.
• Ensure that form submissions are stored and managed effectively, providing a smooth experience for both users and internal teams.

By addressing these core challenges, the goal was to create a website that not only enhances the user experience but also improves operational efficiency, ensuring that Roos International’s online presence matched its reputation as a premier provider of architectural materials.

To bridge the gap between its brand identity and its digital presence to its competitors, I developed a comprehensive solution that focused on aesthetics and enhanced functionality and operational efficiency. The redesign was structured around 2 key pillars: A/B Testing & UX Enhancements, and Feedback surveys

‍

Product Card Layout

A card is a UI component that creates a visually distinct group of logically related information. It usually consists of a headline, a short chunk of description — summarizing the content of the resulting page — and an optional image, button, or ‘call-to-action’.

‍

A/B Testing & UX Enhancements

• To understand the user, I conducted an iterative A/B testing to optimize user flow and conversion rates, this was first done under a staging site that allowed me to record preferred areas of interest within a page. A small piece of code was integrated to the website to automatically detect viewers and clicks per product, a way of creating a visual heat map using logical/technical coding.

<script>
    document.addEventListener("DOMContentLoaded", async function () {
        const productSlug = document.body.getAttribute("data-product-slug");

        if (!productSlug) {
            console.error("No Product Slug found.");
            return;
        }

        const viewCountElement = document.querySelector(".product-view-count");
        if (viewCountElement) {
            viewCountElement.innerText = "Loading...";
        }

        // This code checks to see if the user has already visited this product today
        const lastViewed = localStorage.getItem(`viewed_${productSlug}`);
        const today = new Date().toDateString();

        if (lastViewed === today) {
            console.log("Skipping duplicate view for product:", productSlug);
        } else {
            try {
                // Update UI before main database updates
                if (viewCountElement) {
                    let currentCount = parseInt(viewCountElement.innerText.replace(/\D/g, "")) || 0;
                    viewCountElement.innerText = `Views: ${currentCount + 1}`;
                }

                // Send request to Firebase Function (database) to increment popularity
                await incrementPopularityFunc({ productId: productSlug });
                localStorage.setItem(`viewed_${productSlug}`, today);
                console.log(`Page view recorded for product: ${productSlug}`);
            } catch (error) {
                console.error("Error tracking page view:", error);
            }
        }

        try {
            //Fetch the actual popularity count from Firestore database
            const productsRef = db.collection("exclusive_products");
            const querySnapshot = await productsRef.where("slug", "==", productSlug).limit(1).get();

            if (!querySnapshot.empty) {
                const productDoc = querySnapshot.docs[0];
                const popularity = productDoc.data().popularity || 0; 

                console.log(`Popularity for ${productSlug}: ${popularity}`);

                // Update the Webflow page with the final view count from Firestore
                if (viewCountElement) {
                    viewCountElement.innerText = `Views: ${popularity}`;
                }
            } else {
                console.warn("Product not found in Firestore:", productSlug);
            }
        } catch (error) {
            console.error("Error fetching popularity:", error);
        }
    });
</script>

• This code allowed me to analyze 2 key elements: 
  • What the user was drawn to (without violating cookie policy)
  • How popular (or unpopular) a product was

‍

This small feature allowed me to understand how the average user in this area navigated the site, it satisfied a key element in how the website is structured and where bounce backs could occur:

• Home Page (most popular, 1% bounce backs)
  • Vendor Page (5% bounce backs)
    • Collections Page (12% bounce backs)
      • Item Page (26% bounce backs)
        • Request sample/quote

‍

Quick Search Bar

One key feature missing from the old layout was a search bar, a highly requested addition based on user feedback. Many users, already familiar with the product, preferred searching for items by their product numbers rather than navigating through multiple pages. With the introduction of this search functionality, finding specific products has become significantly faster and more convenient.

‍

Form Management & Client Interaction: Enhancing User Engagement

• Designed customized forms for sample requests and newsletter sign-ups, ensuring a user-friendly submission process.
• Developed a backend integration that securely stores and organizes client data, streamlining communication between Roos International and its customers.
• At the request of the owner, an inventory system that is capable of updating inventory in real time for warehouse operations was created. A simple user interface that was ready to update at the discretion of the warehouse manager.
• Another detail to enhance user experience and create more page impressions to the item page was to incorporate a popular products section along with an interactive brochure that allowed users to see what is trending in the industry, this allowed for more page views and quick and easy access to the request forms.

‍

‍

‍

A Seamless, Modern, and High-Performing Digital Experience

The comprehensive redesign of Roos International’s website successfully transformed it into a visually compelling, user-friendly, and functionally efficient platform that aligns with the company’s high-end brand identity. By focusing on user experience, workflow integration, and automation, the new website delivers a seamless digital experience that enhances both customer engagement and internal operations.

‍

A Visually Engaging and Intuitive Website

• ‍Premium Design Aesthetic – The new UI/UX design mirrors the sophistication and exclusivity of Roos International’s product offerings, aligning with high-end retail experiences like Soelberg, Williams Sonoma and Crate & Barrel.
• Intuitive Navigation – Users should easily find materials through search and auto-fill browsing.
• ‍Mobile Optimization – A digital platform that feels like a native application to ensure seamless mobile usability and a smooth, responsive experience for designers, architects, and contractors using mobile devices on-site or at tradeshows.‍
• A/B Testing & Continuous Optimization – Iterative improvements based on user behavior data.

Enhanced Customer Engagement & Lead Generation

• ‍Optimized Sample Request Process – The new form system made it easier for customers to request product samples, resulting in increased conversions.
• ‍Automated Responses & Follow-ups – Improved customer experience with instant confirmation emails and better tracking of inquiries.
• ‍Increased Newsletter Sign-ups – A more intuitive signup process contributed to higher engagement and audience retention.

Overall Impact

• ‍Higher Engagement: Increased user interaction, leading to more sample requests and inquiries.‍
• Improved Efficiency: Reduced manual tasks for internal teams, allowing them to focus on strategic growth.‍
• Stronger Brand Presence: The new website now truly reflects Roos International’s reputation as a premier destination for architectural materials.

‍

‍

Future Enhancements

• Augmented Reality (AR) visualization to preview materials in real spaces.
• AI-powered recommendations for similar or complementary materials.
• Deeper personalization with saved project folders and collaborative features.

‍

The revamped digital presence successfully positioned Roos International for continued growth, providing both a superior user experience for customers and a more efficient workflow for internal teams. The project not only met the initial objectives but also set the foundation for future expansion and innovation.