Sonos
Sonos is a speaker company that sells high-end audio solutions for homes and businesses. I was brought on to redesign their mobile app’s iconography in time for a complete overhaul of their previous experience.
Services
Icon Design • Design Systems • Style Guide
Team
Randall Parrish, Katie Inglis, Ashley Conway
Dates
June 2023 to August 2023 (2 months)
Website
TLDR;
In 2 months, I refined Sonos' icon style and created a set of 264 icons. I provided a detailed style guide that also expanded on unique icon journeys.
Why I was brought on
The Sonos design system team needed an iconographer to quickly create an icon library in time for their product launch in the fall. They wanted a thought partner to help them work through the challenges of complex representations as an equal team member. After they learned about my skills with iconography and automation, they were excited to bring me on for the project.
Pentagram’s Original Icons
Before I started working at Sonos, they had hired the design agency Pentagram to lead their rebranding. Pentagram had also worked on a starting point for the icon system, so I came in to apply some improvements on their foundational work. The icons didn’t have consistent balance and weight, and their choice to use two stroke weights was not sustainable and resulted in the icons being too detailed. So my first step was to redesign the icons they had proposed and present my own version. I applied a consistent 2 px stroke weight, designed all the icons to keylines to maintain balance and weight, and started building some rules regarding corner radiuses. Once the Sonos team saw the adjustments, they were excited to see how the new direction played out across the rest of the library.
Pentagram's original starting point for the icon system.
I took Pentagram's work and ran with it, using consistent line weight, balance, and scale.
Keylines and Organization
Before I built the majority of the icons, I built a set of keylines that allowed me to maintain balance and consistency across the library of icons. This was especially useful for icon concepts that were more or less basic shapes, like a circle or square. The triangle-shaped keylines were inspired from Sonos’ mini portable speaker design, the Roam, and were also useful for “A” or “V” shaped icons.
There's nothing quite as delicious as a perfect keyline pie.
Note that the triangle guideline mostly matches the speaker's shape
Instead of a battle of the bands, it was a battle of the speakers.
Deep Dive into the Speakers
Lots of the icons in the set included speakers as part of the concept. One of the decisions we had to make was whether the speaker would look like a more generic bookshelf style speaker, or one of the speakers that were unique to Sonos. Was this an opportunity to include more brand elements as part of the icon system and make it more ownable? Or would the icon not be as recognizable, and therefore create user friction? This was a big debate between the design team.
The three options that I presented were based on the Sonos product “Move”, the Sonos product “Era 300”, and a generic bookshelf icon. Whichever direction we chose, the final result would need to work well with a variety of modifiers.
For a simple speaker icon, there was a high volume of iterations.
Transparency
In a few of the concepts, multiple states were required. While a simple on/off state could easily be signified with a slash, some states were more complex, such as different wifi states or audio noise cancelling. In those cases, we used transparency to help differentiate them.
It's clear to see why we needed different transparency states.
Trueplay
The development of the Trueplay icon went through more variations than any other icon concept, partly because it acted as the logo for the unique Sonos feature. Trueplay essentially analyzes the space where a speaker is located using the products microphone, then uses the data to fine-tune the audio experience. You can learn more about Trueplay here.
In my earliest explorations, my inspiration included couches (referencing where the user would most likely be sitting), EQ dials, and a 3D volumetric space. We decided to go with the idea of a 3D space, conveying that the technology was adapting to the speaker’s environment. But we would soon learn that the icon needed some critical improvements.
It also conspicuously looked like Codepen's logo, which was a total accident.
After I had already completed the contract, a key member of the Trueplay team that wasn’t present earlier had some warranted concerns with the room metaphor. Portable Sonos speakers with microphones can tune themselves with “Automatic Trueplay™”, automatically adjusting to the environment wherever it is, including outdoors. The 3D space was obviously indoors, so it could mislead users by not telling the whole story.
So Sonos brought me on for a one-week design sprint to redesign the Trueplay icon. Instead of relying on the idea of a physical space, we needed visual metaphors that were more abstract, like magic sparkles, the play icon, and soundwaves. In that one week I created 110 unique iterations and went through two rounds of feedback. We landed on the combination of the play button and the soundwave, as it abstractly represented the idea the best and even referred back to the “play” aspect of the name. Not only that, it was a pretty sweet looking icon if I do say so myself.
Despite wave after wave of feedback, we put the "play" in Trueplay.
Style Guidelines
In my final week, I created a slide deck that explains the reasonings behind the style. The first section was called "Art Rules", which included details about spacing, corner radius, components, modifiers, and many others. I also provided a section called “Deep Dives” where I expanded upon unique journeys that were significant brand moments, and how we landed on the final concepts.
Conclusion
In 2 months of working at Sonos, I updated the icon style to better match their brand, created 264 unique concepts, built a spreadsheet to help developers transition to the new library, and provided a detailed style guide documenting dozens of style attributes and highlighting deep dives on interesting design journeys. I also came in a few months later to work on the Trueplay icon in a one-week design sprint.
If you need to overhaul your own icon library and need someone to redesign it from scratch, please feel free to contact me! Send an email to grifflecuyer@gmail.com, and tell me what you’re looking for. I’d love to hear about your unique problem, and how I can create a custom library for you.
Want to read more?
I like to write about icon design, so if you'd like to learn more about my craft and my process, check out my articles section. If you want to see more of my work, then click on one of my other case studies. If you're interested in working together, then contact me and we'll get started!