Oh shit

Here we go

Lets go

Chat with Vargas AI

Visual design
Gestalt principles
Design systems
User experience
User testing
User flow
content strategy

The challenge

Empowering businesses with premium sound and simplicity, Sonos Business revolutionizes the way people experience music in commercial spaces. Through dedicated efforts, this transformation in commercial soundscapes is now a reality.

The website needed to educate visitors, capture leads, and seamlessly transition to a public launch.

Brand ecosystem

Exploration began with integrating the unique Sonos Business identity into the broader Sonos brand ecosystem. There is a balance between the core aesthetics and values of Sonos with a business-oriented approach, ensuring the new website resonated with commercial clients while maintaining the distinct 'Sonos' feel.

Design system

Atomic design

see more

see more

see more

see more


The backbone of the Sonos Business design system is its library of components – an array of responsive sections, powered by Figma variants and variables, meticulously crafted to ensure consistency and functionality throughout the user interface.

Atomic elements

Atomic design principles allowed me to create a hierarchy of visual elements that are both independent and interrelated, ensuring consistency and scalability. By starting with the smallest building blocks and combining them to form templates and pages, I established a design language that is both flexible and systematic, enabling Sonos Business to maintain its visual integrity across a multitude of platforms and contexts.

This button design system is a great example of a meticulously designed element that encapsulates all possible states, from default to hover, active, disabled, and beyond. Taking a similar approach across similar elements allowed me to streamline the design process, reduce redundancy, and ensure a cohesive user experience across the Sonos Business platform, all while significantly cutting down on development time and enhancing design-to-code hand-off efficiency.


Fluid type

I designed with a fluid type and space scale that ensured that typography and elements always appears visually correct and proportionate on any device, automatically adjusting to variations in screen sizes, which enhances user experience and maintains brand consistency without the need for multiple arbitrary breakpoints.

Fluid space


Ensuring accessibility at all screen sizes was paramount. My mobile-first approach facilitated a seamless user journey, regardless of device.

Motion design

It pops

see more

see more

see more

see more

I brought the Sonos Business website to life with various unique animations and interactions. Most notably, I created a 3D animation of the Sonos One speaker in Blender and Cinema4D, creating an immersive and interactive experience that captivates users as they explore the site's offerings.



The Sonos Business project culminated in a resounding success. Efforts in crafting compelling 3D visuals and integrating fluid motion graphics transformed concepts into captivating experiences that retained attention and drove user engagement. The design system's efficacy was mirrored in user feedback and analytics, signifying a substantial leap forward in how Sonos connects with its business clientele.

4.5 minute

Average session duration


In business lead generation revenue





see more

see more

  • Matt Taylor
    Associate Creative Director

    Jon is one of those rare unicorns...a talented designer that can bring it to life in code...very passionate about solving problems...He's a valuable addition to any team...

  • Alyssa Lemon
    Front-end Developer

    I remember meeting Jon...with the depth and breadth of his pure fascination, energy and incredible mastery of the digital space...His portfolio speaks for itself...any company that snags Jon will be propelled above and beyond just for his presence...

  • Rebecca Henderson
    Associate Creative Director

    Jon is an excellent collaborator and coworker...In a very short time, Jon added a uniquely robust UX design approach to our agency...