Oh shit
Here we go
Lets go
Chat with Vargas AI
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.
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.
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 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.
Buttons
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
mobile
Ensuring accessibility at all screen sizes was paramount. My mobile-first approach facilitated a seamless user journey, regardless of device.
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.
Pizzaz
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.
