Delivering Value Straight From the Fold for Trunk

Trunk challenged us to bring their developer tools to life online. Inspired by the simplicity of marbles and powered by strategic storytelling, we designed a site that’s visually striking, deeply engaging, and perfectly aligned with their mission.

At basement we value hitting the spot together with our clients. Our recent project involved a deep dive into creating a unique appeal that left both teams in awe. Elevating the essence of what we do, this project illustrates our studio's philosophy that an impactful output stems from a clear strategy and creative processes, not just the technology behind it. After all, that’s the light that comes from downstairs.

The Trunk team approached us with a prolific product strategy that strongly ensures a better developer experience for their users. They envision a holistic toolkit to take care of the tedious process of checking, testing, merging, and monitoring code with top-notch automation.

Comprehending the complexity of this problem was a challenge in itself, and translating the main concepts to their audience was a journey of its own. Our final goal was to find the best way to tell a compelling story that would stick in the audience’s minds straight from the fold. The core concept was already there. All we had to do was walk with Trunk’s team to refine it and make it shine on the web.

The Rough Draft

We delved into the Trunk universe to understand and translate the product's impact into an excelling visual communication. How are their users making a difference? Their tooling brings efficiency and security to developers' code, allowing them to concentrate on building and deploying faster than ever before.

While we were iterating around the “fast lane” concept, we crafted a rough draft based on the idea but with a creative spin. The marble concept was designed to be versatile and capable of encapsulating a range of different concepts across Trunk's offerings. Before long, the marble resonated with everyone at first sight, and these drafts evolved into the global narrative. So, what happened?

Tapping Into Nostalgia

Perhaps you've heard it before, but let’s say it again - we at basement are nostalgic creatives at heart. We often find ourselves drawing inspiration from our memories. From the charm of classic marbles to the thrill of marble runs, the addictive Marble Madness game, intricate mazes, mind-bending puzzles, and the list goes on. Isn't there something incredibly satisfying about watching a marble chart its course? The main concept turned out to be a powerful feature to enhance the ‘scrollytelling’ experience and make a SaaS landing page novel again.

A Multidisciplinary Output

One of the keys to success on Trunk was finding the sweet spot between diverse visual expressions - from polished design and hand-crafted sketches to cutting-edge animations.

First, we didn't rely on individual talents but brought together a medley of skills from our multidisciplinary team. Through a blend of collaboration, we carved out an art direction that didn't just stick to one style. Instead, it pivots between our authentic imagery and the familiarity users typically find in a SaaS product.

Animation was instrumental in weaving together most of the storytelling experience. We spun this in two parallel ways: The landing page would showcase the marble with a classic sprite of 2D handmade animation, while the product features would come alive through custom CSS animations.

As for colors, we needed a deft touch. With the marble's background scene set to steal the scene, we decided to keep the color palette minimal and reserved it only for the essentials. Opting for timeless black and white, we struck a balance between a modern visual aesthetic that echoes tech and security and the hand-drawn sketches that resonate with our innate human sense.

The overall challenge was streamlining the concepts through many pages, from the home to sub-products and even the changelog. The Trunk team was committed to building a cohesive language throughout the whole website.

Building The Path To Success

In a united effort involving our 3D team, developers, and designers, we constructed the path for the marble to traverse as the user scrolls through the page. It needed to be efficient, responsive, and one-of-a-kind.

We made use of SVG to delineate the path for the marble across different website sections. Utilizing the gsap motionpath, we moved it along the course, setting checkpoints at specific sections and guiding the marble to points that made sense with the storytelling.

The subtlest aspect was controlling the speed at which it moved along the timeline across this path, which determined the number of frames we needed to display from the sprite. If the marble moved slower, fewer frames per second were triggered.

From Concept to Conclusion

What began as a project with the potential for typical, trendy, product-oriented aesthetics turned out into a piece of art. This transformation was made possible by creating space to explore the iterative process where innovation truly takes shape.

We've confirmed that the conceptual pillar is vital for communicating a product effectively. It requires steady work in strategic thinking and a commitment to iterate consciously and logically to create something meaningful.