WSI Website Design and Framer

WSI Website Design and Framer Development

Project Overview

WSI (Washing Systems) needed a website that could position them as a serious, science-driven player in industrial textile care — not just another chemical supplier, but a company combining chemistry, data and service into one measurable result for their clients. The site had to speak to a technical, B2B audience across multiple industries while still feeling clean, modern and credible at a glance.

The project covered the complete website workflow, from UI/UX design in Figma to full responsive development in Framer, including a results-driven hero section, multi-vertical navigation, and a data-backed brand narrative.

My Role

I worked as the website designer and Framer developer for the project, responsible for the site from initial concept through to final build.

My responsibilities included:

Designing the website UI/UX in Figma Defining the visual direction around WSI's "chemistry, data, and service" positioning Structuring navigation across Solutions, Markets, Products and Company Designing the results-driven stats section Building the complete website in Framer Implementing the hero section with layered imagery and dual calls to action Building the multi-level dropdown navigation Integrating links to WSI's proprietary tools and resources (WASH-EYE, SDS) Testing and refining the site across desktop, tablet and mobile

The Challenge

Industrial chemistry companies often struggle to make technical, B2B offerings feel compelling online. WSI's site needed to immediately communicate credibility and measurable value to plant managers and decision-makers, most of whom care about hard numbers, not marketing language.

At the same time, WSI serves multiple markets and product lines, which meant the navigation had to organize Solutions, Markets, Products and Company sections clearly, alongside dedicated access points for WASH-EYE (their monitoring platform) and SDS (safety data sheets) — both of which technical buyers need to find quickly. The design also had to balance a scientific, data-forward tone with a visual identity clean enough to feel modern rather than clinical.

Design in Figma

The design phase focused on making WSI's core message — chemistry, data and service — felt immediately, not just read.

I designed the hero around a bold, direct headline paired with a macro, liquid-inspired background to visually reinforce the "clean" and "chemistry" positioning. Below it, I designed a results bar to put proof directly beneath the promise: concrete stats on textile life, labor savings and sustainability recognition, so credibility was established before a visitor scrolled any further. I also planned the navigation structure to keep Solutions, Markets, Products and Company clearly separated, while giving WASH-EYE and SDS their own prioritized links for returning technical users.

Framer Development

Once the design was finalized, I built the site fully in Framer.

Hero Section I implemented the full-width hero with a layered background image, bold headline treatment and dual call-to-action buttons — "Request a Plant Assessment" and "View Solutions" — to serve both ready-to-convert visitors and those still researching.

Results Bar I built the "Results That Matter" stats section directly beneath the hero, presenting the 25% textile life improvement, 30 hours per week saved and EPA Safer Choice recognition in a clean, scannable format.

Navigation Structure I developed the multi-level dropdown navigation covering Solutions, Markets, Products and Company, along with dedicated top-level links to WASH-EYE and SDS for fast access to WSI's tools and compliance resources.

Responsive Development and QA Every section was tested and adjusted across desktop, tablet and mobile, with attention paid to how the background imagery, stats bar and navigation dropdowns behaved on smaller screens.

Project Outcome

The finished website gives WSI a digital presence that matches how they want to be seen: a modern, data-driven authority in industrial textile chemistry rather than a generic supplier site.

The final website is:

Fully responsive across desktop, tablet and mobile Built around a clear, proof-first messaging structure Organized for multiple markets and product lines without feeling cluttered Backed by concrete, credibility-building results Designed to route both new and returning technical users efficiently Consistent in tone and visual identity from hero to navigation

Tools and Skills

Figma Framer UI/UX Design Responsive Web Design B2B Website Strategy Information Architecture Cross-Device Testing