Bose Design Language

Bose Design Language. Bringing hardware and software together.

Visual design, prototyping, research and strategy

Bose needed a design language to support their future software experiences.

Although Bose has traditionally been a hardware-based company, they quickly realized software was becoming an increasingly important part of how their products worked. They came to us looking for a flexible design language that they could immediately apply to their software and continue to extend across their future products.

Building a flexible design system

Bose's primary goal was to update their software to match the clean, modern feel of their new hardware. We started the process by identifying competitors and working with Bose's internal teams to determine where our design language could have the biggest impact on their current experience

Identifying competitors and trendsWe started the process by auditing Bose's hero apps and assessing how they compared to their competitors. We not only identified ways that Bose could update the look and feel of their visual design, but how they could also improve the clarity of their UX patterns, make the relationship between their software and hardware more seamless, and improve their hardware capabilities to feel more in-line with their competitors.

Testing by applyingTo get started building a system that would meet their needs, I took the current hero application and began addressing everything from first time use and set-up, to playlists and player controls. I focused on creating a design language that had bold visuals, fluid animations, and layouts that could accommodate a variety of different content.

Creating a hero experienceDuring the design phase, Bose was looking for a visual element that would differentiate them from other music services. To do this, I created a player screen that took advantage of full-screen album artwork and large type and controls. This gave Bose a bold and unexpected playback experience that they could leverage across their software experiences.

Expanding the languageAlthough our visual design language started on mobile, we ensured that it could be expanded across Bose’s various software platforms, from displays that can adapt to light and dark environments, to the larger scale “10-foot experiences” of their home audio displays.

Bose's audio for video experience

Documenting the design system

After establishing the visual design system, I created a detailed set of guidelines that outlined the thinking behind the system and provided documentation for Bose's product teams to use as they continue creating new software.

Defining the tenets Before outlining the specifics of the design elements, I worked on establishing a set of design tenets that inform how Bose's future software experiences should perform. These principles help ensure that Bose's future software not only looks the same, but comes from the same set of ideals and principles.

Creating the visual design guidelinesThe visual design guidelines covered everything from color and typography, to layout hierarchy, navigation paradigms, and animation principles. These guidelines provide Bose’s internal design team an extensive foundation from which to design new software experiences.

Excerpts from the visual design guidelines

A foundation for future experiences

At the end of the project, Bose not only had an updated hero application, but a library of visual components and a detailed set of guidelines that could act as a foundation for their internal design teams as they continue creating their own future software experiences.