UX/UI Restructuring for a 25+ Year Fuel Infrastructure Company
Valentina Guerrero
Verified
Turning Technical Expertise Into an Interactive B2B Experience — UST Fuel Solutions
Overview
UST Fuel Solutions delivers mission-critical fuel infrastructure for data centers and other demanding environments.
The challenge was to translate highly technical capabilities into a digital experience that felt clear, credible, and easier to explore—while building a more contemporary visual presence and supporting a full migration from WordPress to Webflow.
My role covered UX recommendations, interaction design, UX/UI, visual direction, custom asset production, motion, Webflow development, SEO migration, testing, and launch support.
Phase 1 — UX Review & Strategic Recommendations
I began by reviewing the existing experience and proposing a broader restructuring focused on clarity, content hierarchy, and easier navigation through UST's technical capabilities.
The final scope adopted selected parts of that proposal while retaining more of the existing structure, so the focus evolved toward improving how users experienced and understood the content already being prioritized by the project.
Key considerations included:
Reducing the feeling of information overload.
Making complex service capabilities easier to explore.
Creating clearer pathways toward contact.
Using interaction to reveal information progressively.
Adapting desktop behaviors intentionally for mobile.
Phase 2 — Interaction & Microinteraction Design
Interaction became one of the main tools for simplifying a technically dense B2B experience.
Intent Before Form Fields
Two different inquiry forms needed to coexist on the same page.
Instead of stacking both forms vertically, I designed a tab-based interaction that lets users choose their intent first and only reveals the relevant form.
Less scrolling. Fewer irrelevant fields. Clearer user intent.
Progressive Service Exploration
UST's services cover multiple stages of a complex fuel-system lifecycle.
Rather than presenting every explanation simultaneously, interaction was used to progressively reveal each phase as users moved through the experience, making the process easier to understand without increasing visual density.
Markets Through Progressive Disclosure
Market information was also designed around interaction, using hover states on desktop and adapted tap behavior on mobile to reveal additional context without overcrowding the interface.
Motion With a Purpose
Microinteractions, transitions, animated states, and responsive behaviors were used throughout the website to guide attention and improve comprehension—not simply to add movement.
Phase 3 — Visual Direction & Custom Asset Production
The visual challenge was significant: the client provided real project photography, but much of it was inconsistent, undocumented, and difficult to use directly as a cohesive website system.
I reviewed the available material, identified recognizable stages and environments within UST's work, and built a broader visual direction around process, scale, technical environments, and operational detail.
Instead of relying only on equipment photography, I introduced wider compositions, environmental context, people at work, and more cinematic perspectives to create a stronger sense of the environments in which UST operates.
The final visual system combined:
Client-provided photography.
Retouched and reconstructed images.
AI-assisted custom imagery.
Branded environmental details.
Standardized leadership photography.
Custom motion and video assets.
Authentic details were intentionally preserved whenever possible. A real UST service vehicle became a recurring visual anchor, while logos were subtly integrated into selected shirts, safety vests, and environments to reinforce the brand without making the imagery feel artificially branded.
Phase 4 — Custom Hero Motion
The homepage hero required more than a generic industrial video.
I developed a custom sequence built from seven individual clips, using original client references as the visual foundation.
For each scene, I created or refined the starting composition, cleaned distracting elements, adjusted workers and environments, incorporated brand details, and then transformed the still imagery into motion.
The clips were finally edited together into a continuous sequence designed to make UST's work feel active, technical, and specific to the company rather than relying on generic stock footage.
The same approach was used across supporting visuals so motion and imagery felt like part of one consistent brand environment.
Phase 5 — Webflow Development & Responsive Experience
Once the visual and interaction system was established, I developed the complete responsive experience in Webflow.
The implementation required more than reproducing desktop layouts. Interactive behaviors had to be reconsidered across screen sizes so that experiences based on hover, scroll, tabs, and progressive disclosure remained understandable and usable on touch devices.
Development included:
Responsive page implementation.
Custom interactions and microinteractions.
Tab-based form experiences.
Responsive interaction states.
Reusable content structures.
Form configuration and contact flows.
Final asset and motion integration.
The result preserved the visual impact of the desktop experience without making mobile users navigate an interaction model designed only for a mouse.
Phase 6 — WordPress to Webflow Migration
The project also involved replacing the previous WordPress website without sacrificing the value accumulated by its existing URLs.
A total of 41 legacy URLs were individually reviewed and redirected to their most relevant destinations within the new Webflow structure.
Rather than sending old pages generically to the homepage, redirects were mapped according to the closest equivalent content in the new experience.
This helped preserve search equity, reduce broken entry points, and support a cleaner transition between platforms.
Phase 7 — SEO, QA & Launch
The project continued beyond visual completion and development.
Before and after launch, I reviewed responsive behavior, navigation, forms, links, redirects, accessibility considerations, SEO configuration, and performance.
A documented desktop Lighthouse audit after optimization achieved:
100 — SEO
100 — Accessibility
100 — Best Practices
97 — Performance
The website was then prepared and validated for production launch on UST's live domain.
Outcome
The final experience transformed UST's technical expertise into a website that is easier to explore, more interactive, and visually specific to the company.
Rather than using motion and imagery as decoration, they became tools for explaining process, reinforcing scale, reducing complexity, and making a highly technical B2B organization feel more tangible.
At the same time, the Webflow migration was completed with the SEO, redirects, responsive behavior, and technical validation required to protect the experience beyond launch.
Role: UX Strategy & Recommendations · Interaction Design · Microinteractions · UX/UI Design · Visual Direction · AI-Assisted Asset Production · Motion & Video Editing · Webflow Development · SEO Migration · QA & Launch
FINAL RESULT👉 HERE
Like this project
What the client had to say
Valentina was a joy to work with! She was flexible to our needs and super responsive all the way from project start to post-live.
Danielle Turkovich
Sep 1, 2026, Client
Posted Sep 8, 2026
UX-led Webflow redesign for UST Fuel Solutions, using hierarchy, interaction, and motion to clarify complex B2B capabilities and guide user journeys.
Likes
0
Views
0
Timeline
Jul 24, 2026 - Sep 1, 2026
