STI Firestop
Enhancing features: A friendly guide to professional success
At a glance
STI products and systems offer innovative firestop solutions for all types of new construction and retrofit applications. Since firestopping is our only business, we concentrate all our resources on providing the highest quality, fully tested, innovative firestopping solutions. Developing high-quality, innovative, and environmentally responsible products<span data-metadata="">
<span data-metadata=""><span data-buffer="">In this case study, I discuss enhancing user experience through the implementation of guided selling, advanced search functionality, and industry-specific product customization, alongside a comparative analysis of these features.
MY ROLE
As a UX Designer at Echidna Software, I spearheaded the UX strategy and execution for the STI Firestop project. I collaborated closely with Project Team, gathering insights from client elaboration calls and Business Requirement Documents (BRD). My role was crucial in guiding the project from its initial stages of ambiguity to a successful redesign. A key responsibility was ensuring alignment across cross-functional teams to achieve our common objectives.
I guided a UX strategy that made a significant global impact, ensuring that our design was consistent and cohesive across all platforms. By incorporating new features based on client feedback, I crafted conceptual wireframes and sketches to bring my design ideas to life. I also managed the entire process, from initial concepts to the final design implementation, making sure everything came together smoothly.
Problem
When our team at Echidna tackled the overhaul of the STI Firestop website, we faced several challenges affecting both its technical performance and user experience. The website had been primarily designed for desktop, which led to poor responsiveness on mobile devices and a fragmented user experience. The navigation bar was not seamlessly integrated with the rest of the site, and there were noticeable inconsistencies in the design, with colors used in a disorganized manner. The homepage struggled to clearly communicate the brand’s identity and the services offered, while the search function was problematic, making it difficult for users to differentiate between products, services, and blog content. This resulted in a confusing and inefficient search experience for users.
Let’s Start The Design Process
Research & insights
STI Firestop Survey
- Before diving into the design work, I took some time to research and survey the common stress points faced by the STI Firestop team. I discovered that the user experience on the STI Firestop site might be causing significant stress and discomfort for users.
- Nearly half of the users (48%) feel stressed when navigating the STI Firestop site.
- Many users find it difficult to search for products because there’s no clear categorization.
- The site suffers from noticeable design inconsistencies, making the experience frustrating.
Guided Selling
- Personalized Recommendations: Guided selling provides tailored product recommendations based on user preferences, needs, and behavior, helping customers find the most suitable products more efficiently.
- Simplified Decision-Making: By guiding users through a structured decision-making process, it simplifies complex product choices, making it easier for customers to compare options and select the best fit.
- Enhanced User Experience: The guided selling approach improves the overall user experience by reducing the cognitive load and eliminating the overwhelm of choosing from a vast array of products.
- Increased Conversion Rates: Personalized guidance and support can lead to higher conversion rates as customers are more likely to make a purchase when they receive relevant recommendations and clear information.
- Improved Customer Satisfaction: By offering a more streamlined and supportive buying process, guided selling enhances customer satisfaction, leading to a better overall impression of the brand and increased likelihood of repeat purchases.
Pain Points
While summarising my research, I found the following observations:
- Streamlining User Journeys by Removing Duplicate Navigation Links
- Addressing Search Functionality Challenges for Better User Engagement
- Introducing Product Comparison Functionality for Enhanced User Decision-Making
- Enhancing Homepage Content for Better User Information
Design Principles
Following my research and gap analysis in the competitive landscape, I developed design principles to ensure alignment between research findings and UI design.
- Seamless Integration: The experience should effortlessly integrate into existing workflows without adding complexity.
- Familiarity: The design must be user-friendly and accessible, minimizing any UI disruptions.
<span data-metadata=""><span data-buffer="">Website Foundations
Few screens are displayed here for reference.
Empathy Mapping
Based on the user journey detailed above, I’m exploring how users perceive and emotionally connect with the environment. This involves understanding their initial impressions, how they interact with the space, and how these interactions shape their feelings and overall experience.
Value Proposition Canvas
This will assist in further defining user profiles and visualizing the value created by my proposal.
Proposed Solution (Information Architecture)
The solution addresses the primary user story by exploring duty-free shopping options and facilitating searches by categories such as Products, Stores, Distributors, and Contractors.
Initial Stage - Storyboarding and Wireframing
I began with a detailed storyboard to understand how users might interact with the feature. Based on this, I developed the initial wireframe draft. This approach allowed me to address all aspects of the user experience, ensuring attention to detail and setting the stage for the next UI style. It saved time and effort, enabling me to focus on the specific screens and sections to bring to life in the visual flow.
Final Design
I created the final UI design prototype based on the user research and analysis results. Here are some initial experiments with the visual style. The design focuses on three core principles: simplicity, innovation, and tradition, while incorporating the latest design trends.
Navigation and Tooling Menu
The Navigation and Tooling Menu is designed to provide users with intuitive access to essential features and tools. By organizing options clearly and logically, it enhances usability and ensures users can efficiently find and utilize the tools they need. This streamlined approach improves overall user experience and productivity.
Enhanced Navigation and Tooling Menu - Driven by Usability Scoring for Cross-Platform Consistency and Competitive Advantage
Few screens are displayed here for reference.
Home Page
On the homepage, we introduced engaging features such as brand-specific promotional banners, industry-wise product displays, and highlighted tools and resources. We included support links, case studies showcasing brand value, and updates on upcoming news and events from Firestop and STI.
Our redesign also addressed the fragmentation seen on desktop by implementing a responsive design, which was essential for ensuring usability across various devices.
With Responsive behaviour
Guided Selling
Guided Selling simplifies the shopping experience by offering personalized product recommendations based on user preferences and needs. It helps users navigate through options efficiently, ensuring they find the best products suited to their requirements. This approach enhances decision-making and improves overall satisfaction by making the purchasing process more intuitive and user-friendly.
With Responsive behaviour
Few screens are displayed here for reference.
Learnings
Revamping the STI Firestop website presented a unique set of challenges and learnings across research, strategy, design, and implementation.
With limited historical user data, we relied on qualitative insights to guide our design decisions. We identified the diverse needs and pain points of our merchants, which significantly shaped our UX strategy. This phase highlighted the value of face-to-face interactions and the depth of understanding they bring to product development.
As a designer inclined towards perfectionism, balancing ambition with practicality was often uncomfortable but essential for achieving impactful and feasible outcomes. The key takeaway is that excellence is incremental; each small step contributes to a larger transformation.
This experience underscores the strengths of iterative design and its capacity to deliver user-centered solutions in a resource-constrained environment. It has reinforced the importance of cross-functional collaboration, flexibility, and adaptability in design thinking.