XSF

Description

XSF united three companies with distinct brands in a service proposition built around their combined strengths. The challenge was creating a cohesive digital experience without allowing one identity to dominate. Its neutral visual system balanced clarity and restraint with enough character to establish XSF as a credible proposition.

The existing XSF site required a substantial redesign to better reflect the caliber of the companies behind the offering. With the content strategy and CMS structure largely established, the design challenge centered on creating a stronger visual and interaction language. We developed the concept of “stacking” services as a core design principle, using it to give the experience greater character while establishing a clear diagrammatic system for communicating complex service relationships and interconnected capabilities.

The Design Process

The redesign worked within a live website (B)*, established content structure and limited CMS. Because text and styles could change more readily than the platform, the team focused on changes with the greatest visual and communicative leverage. Collaboration between visual design and 3D production turned the “stacking” concept into a practical direction for layouts, diagrams and refractive assets (E)*(F)*, while keeping the work feasible for implementation and handoff (B)*.

One continuous responsive service narrative

The final experience organized a complex service offering into one continuous scroll across desktop, tablet and mobile. Clear hierarchy, restrained typography and modular sections guided users from a high-level proposition toward detailed capabilities, allowing the site to remain approachable without flattening the complexity of the offer.

Refractive forms as a visual signal

Three-dimensional prisms introduced refraction, depth and atmosphere into an otherwise restrained interface.

Used alongside precise diagrams, they gave XSF a distinctive visual signature that could represent the combined offering without borrowing too heavily from any partner brand.

Credits and Resources

Teams

Huge

Bryan Lee (Creative Director), Julian Betancourt (Motion and Visual Designer).

Resources and Tools

Fonts

Montserrat, Google Fonts. Designed by Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, Jacques Le Bailly. https://fonts.google.com/specimen/Montserrat
DM Sans, Google Fonts. Designed by Colophon Foundry, Jonny Pinhorn, Indian Type Foundry. https://fonts.google.com/specimen/DM+Sans
DM Mono, Google Fonts. Designed by Colophon Foundry. https://fonts.google.com/specimen/DM+Mono

Tools

Figma. https://www.figma.com
Cinema 4D. https://www.maxon.net
Adobe Illustrator. https://www.adobe.com
Adobe Photoshop. https://www.adobe.com

Lessons Learned

Technical Feasibility

Engage with the platform before committing to a design direction.

Relying solely on engineering partners to validate feasibility introduces unnecessary risk. As a design leader, investing time to understand the CMS or technical platform — its constraints, capabilities, and trade-offs — before fully committing to a design direction ensures that proposals are grounded in reality rather than assumption.

Made with Semplice

Contact

If you want to get in touch, just reach out on any of the following: