BitBox by Bit Parts | Framer E-Commerce Site + Landing Pages

The Bit Part team reached out to me about redesigning their company website with the goal of launching 2 new landing pages and integrated Shopify shop using Framer. The project timeline coincided with preparing to be live for an upcoming trade show and the imminent launch of the bitbox mini a smaller version of their flagship product bitbox.

Their team is 100% remote and throughout the project I collaborated with a handful of folks in timezones around the world--primarily via Slack as well as Figma comments and Slack huddles (video meetings).

Being a team of creative professionals --film and industrial design--they had a clear vision for the design principles and aesthetics of the site and deep insights into their target audience.

We began with extensive moodboard exploration of their favorite websites, hardware product shop designs, and contrasted with their pre-existing site.

Throughout the exploration I meticulously tested and recorded the PageSpeed Insights for each reference website to map not only their design preference, but also potential performance tradeoffs of different design & development options.

From there we triangulated the typography pairings before moving on to the best ways to incorporate the variety of visual assets they had on hand:

Bit Part's branding was already established and includes bright colors and a bit art style logo and retro early-internet aesthetics. Their product and brand embodies a strong sense of minimalism and intentionality in all forms of product and design.

To infuse the two product landing pages with a touch of color, motion, and personality I used a series of color blocks that scroll at different speeds to playfully create a sense of dynamism and visually allude to an elemental "bit". For the mini the color blocks were scaled down to convey a relationship based on size and maintain continuity of the visual metaphor.

To best present their flagship camera remotes (bitbox and bitbox mini) I wanted to create a scrolling 360° view of each. I coordinated with their 3D modeling artist to prepare a sequence of images that I could turn into scrollable feature and included one for each of the main product landing pages.

Right away the concept for the bitbox landing page jumped out at me as I started framing the hero section. Being a film enthusiast myself, I was drawn to the transformative nature of tool use and the iconic way it was depicted in Stanley Kubrick's 2001: A Space Odyssey. In particular, the match cut at the end of the first act where a bone (used as a tool of deadly proportions) gets flung into the air and transforms into the space satellite completing the symbolic narrative arc of mankind's evolution from apes to an intrepid spacefaring species.

The team liked the concept and I went to work translating it into a workable web design. Using a product image of the remote, I employed scrolling transformations in a sticky position which rotated and scaled the image. The background color blocks and scrolling upward text gave it the impression of the remote twirling through the air.

The site would not have been complete (or possible) without the integration of Shopify which I accomplished using the Framer Commerce plugin.

Overall, the Bit Part site serves as a colorful expression of the Bit Part brand and a clear presentation of their products and team.

Thanks to rapid prototyping and iteration in Framer we were able to get a beautiful and performant site launched in time to receive enthusiastic feedback from fellow industry professionals at the trade show where the bitbox mini made its debut.