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 trends
We 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 applying
To 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 experience
During 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 language
Although 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.
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 guidelines
The 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.
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.