Loading ...

Responses by Buzzworthy.

Background: The Outsource Consultants (OCI) site was designed to position the architectural firm as a premium, experienced player in New York while clearly communicating its offering in a way that feels both elevated and accessible. The target audience includes engineers, architects and building developers—an audience that values precision, clarity and technical credibility.

To resonate with this group, we created an experience that draws heavily from architectural and engineering visual language. The layout, structure and design details intentionally mirror the systems and aesthetics familiar to them, signaling that OCI understands their world and speaks their language.

Challenges: One of the biggest challenges was working within a strict duotone system—limiting the entire visual language to just two colors—while still achieving depth and visual interest. This meant removing red from the original brand palette, which required rethinking how the brand could express itself visually. The constraint pushed us to be more intentional with contrast, composition and motion to keep the experience engaging without relying on a broader color range.

On the technical side, the WebGL-driven image interactions introduced another layer of complexity. This was a new technique for us, requiring us to move into unfamiliar territory and create smooth, responsive, mouse-driven effects. Then, we had to ensure those interactions performed seamlessly across all desktop screens, which demanded meticulous optimization and close collaboration between design and development.

New lessons: This project pushed us into new territory. We hadn’t implemented WebGL-driven motion at this level before, so translating what we had envisioned in prototypes into a fully functional, high-performance experience required a ton of exploration and problem-solving.

Also, working within a strict duotone color palette introduced its own set of challenges. Limiting the visual system to two colors meant every design decision—from hierarchy to interaction—had to work. It ultimately reinforced the importance of precision and intentionality, both in design and development.

Technology: The site was built using a modern front-end stack with a strong emphasis on performance, motion and interactivity. We utilized JavaScript frameworks alongside GSAP for animation; WebGL for custom image interactions; and a CMS to allow for flexible, scalable content management.

The WebGL-driven image system is the standout feature of the site. These interactions required a more advanced rendering approach, enabling dynamic distortions and transitions on mouse movement that add depth and tactility to the experience. Implementing this while maintaining performance across devices was a significant technical focus.

Alongside this, we prioritized optimization at every level—leveraging lazy loading, optimized asset delivery and efficient animation handling. The result is a site that feels visually rich and interactive, while still remaining fast, responsive and reliable. We also developed a custom intro animation where the logo transitions directly into the navigation, creating a seamless connection between the brand moment and the functional interface.

oci.madebybuzzworthy.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In