The New Breaker
When Leah Culver and Erik Berlin, co-founders of podcast service Breaker, approached me about documenting the launch of the new Breaker brand, I was a bit hesitant. Honestly, I thought, what can we possibly add to this discussion that hasn’t been worn over already? Then, it occurred to me that perhaps that is just the sort of thing we should talk about. How do you brand a young company and product when the opportunity is limitless but the resources scarce?
Breaker makes it easy to discover new podcasts with the help of your friends. Like many of you (you know, product-building folks who read Medium) I listen to podcasts from time to time, and was intrigued when Leah and Erik described their new service that promised to make discovering shows easier. We hit it off, and I was thrilled to have the opportunity to work with them on the new Breaker brand.
Creating a brand and identity system for a young company is a bit of a magical experience, and the fluidity of modern product design presents a unique set of challenges. As a small outfit, you are laying the foundation for the future, identifying the personality and values you aim to build your brand upon, while acknowledging uncertainties are destined to come your way.
Though your resources may be constrained and your timeline limited, it is critical to approach your branding project with foresight and rigor. An exercise like The Three-Hour Brand Sprint can provide just the right amount of structure without being heavy handed. We employed a similar process at Breaker. Three hours is a reasonable amount of time, and the up-front investment can work wonders as you embark on branding your venture.
We used this time to define Breaker’s Goals, Audience, and Values. As the design lead on this project, I served primarily as a moderator and guide, while Leah and Erik did the heavy lifting to identify and articulate the character and vibe of the Breaker product.
I was pleased to discover a high degree of consistency in the feedback I received from both of them. This is not always the case with co-founders, and when conflict arises during research it may be a sign to step back and determine if everyone shares the same vision. Without co-founder alignment up front, your endeavors are likely to go off the rails down the road.
So what did we learn together? Let’s take a look.
Goals, Audience, and Values
Breaker’s long-term goal is to put “Breaker on every speaker,” a bold target that embraces the idea that there is a podcast for everyone, and if the right content is readily available, then people will listen.
Out of this goal flowed understanding of our primary audiences. Of course, Listeners are our most important audience, but we broke this rather large bucket down into four sub-categories:
- Commuters: Talk radio is massive, but many talk radio listeners don’t realize they can listen to their favorite shows on their own schedule. This is a huge market destined to listen to shows in a new way.
- Cord-Cutters: Tech-savvy early adopters are already listening to podcasts. Can we make it easier for them to discover and listen to new shows?
- Self-Improvers: Audio books reach a passionate audience interested in personal growth and compelling stories. Are they aware of the insightful commentary from The Minimalists or fantastic narratives like S-Town?
- Athletes: For active people who already listen to music on the go, can we make “just press play” as easy for podcasts as it is for music?
In order to reach these unique audiences, we needed to identify our core values. We decided on three values to represent our product, and they now drive decision-making for the Breaker brand. They are:
- Resonant: Breaker gets to know listeners and connects them to shows they’ll find informative or entertaining.
- Welcoming: Accessible and inclusive, Breaker has something for everyone.
- Chill: Our product should feel relaxing, calm, and cool.
After identifying our Goals, Audience, and Values, I organized our work into a “Brand Research Kit” that documented our process together and explored how other products were attempting to reach similar audiences. Reviewing this document a week after our initial exercise gave us the opportunity to gut-check our findings and determine our ideal path forward.
With our tentpoles firmly planted, it was time to do the real work.
The Name
An early-stage branding project often includes a naming exercise. Fortunately the founders had already gifted Breaker with a fantastic name consistent with the values we had identified. In fact, Erik tells me an entire post could be written about the process for choosing “Breaker.” It grabs your attention while evoking the energy of rolling waves and the community of Citizen Band radio. We were already off to a great start.
The Logo
In the early days of Breaker (not that long ago) a friend of the company created a charming app icon inspired by The Great Wave off Kanagawa, the famous woodblock print by Japanese artist Hokusai. While not the icon we wanted to stick with, the vibe was attractive, and my initial sketches explored a variety of wave-related concepts, riffs on the letter B, and a handful of Japanese woodcut and textile-inspired designs.
A project like this may often go through several rounds of sketches, but once again there was uniform confidence to pursue one particular variation on the wave. In our chosen variation, an abstract of a tunnel-like breaker wave is constructed with a series of six revolving circles, asymmetrically cropped with each section rolling over the last.
Polishing our final concept, as you might imagine, took significantly longer than arriving at the concept to begin with. Line weights must be explored at various sizes, proportions tested for clarity, and curves massaged to be pleasing to the eye. Our final wave was designed to work as a shaded symbol as well as a simple line-art icon.
The Wordmark
I reviewed dozens of typefaces as base candidates to pair with the logo, and selected a half-dozen or so to present to Leah and Erik. Two stuck out as prime candidates:
- Quatro by Marc Canesco
- Museo Sans by Jos Buivenga
We explored a variety of weights and treatments. Of the two, Quatro had more “personality,” but Museo Sans proved more readable on screen at small text sizes. Since our goal was to ultimately pair the workmark text with a matching UI text family, Museo Sans won the day.
There was only one problem: Quatro has a wicked lowercase k, and I fell in love with it during the conceptualization process. Set in italics, it mimicked the curves of the Breaker logo. We couldn’t just abandon it! So we decided to set the Breaker text in Museo Sans 700 Italic, but rebuild the lowercase k from scratch to crest like the wave. You don’t see many italicized marks these days. We felt it was fun, relaxed, and consistent with our values. Here is the final wordmark.
The Icon
I mentioned earlier that the original Breaker icon would not survive our branding project, but I absolutely loved its character. I admired its determination to stand apart from the growing onslaught of icons that feature a stark logo on a basic, colored background.
Determined to carry the charm of the original into our new app icon, I cropped the logo tightly and placed it atop a sunset backdrop. Amidst a sea of generic logos, may our happy Breaker wave bless your home screen.
The System
As we move beyond our logo, wordmark, and app icon, a basic design system at this stage should include a color palette, the selection of a type family or two, and perhaps some guidance and standards concerning the use of illustration, iconography, or photography.
Color
During our research phase we were surprised to note the colors orange and purple are used heavily by other podcasting and spoken-word brands. Notably, the color blue was underused. It also happens to be a “chill” color — we liked that too.
With blue our working foundation, we explored three different palettes based on Japanese artwork through the centuries: The first palette pulled hues from old Japanese blockprints like The Great Wave; The second explored bold indigos and bright primaries from Tenugui textiles; The final palette was inspired by the cool tones that grace the Studio Ghibli films.
We loved the blue and pink tones of the blockprint images, but the colors were too soft for use in the Breaker product. And while the bold indigo tenugui textiles provided a great range of blues, the primary reds and yellows weren’t very chill. (And we determined the teal-leaning Ghibli colors weren’t the right fit. 😢)
To move forward, we made a compromise and decided to boost the saturation of the Blockprint palette. This gave us the bold indigo we wanted along with a more vivid set of tertiary colors to choose from. Of course we call our primary color Breaker Blue. We also documented a darker navy and a few lighter shades of blue for use as complementary text, background, and highlight colors.
Regardless of how you arrive at a primary brand color, the real importance lies in declaring and documenting it. In other words, you should care less about what particular hue is used, and more that it is used consistently every time.
Now that we had our more saturated complimentary palette, we could not decide between a certain shade of bright pink and a delightful melon-esque orange. So we blended the two together and decided that instead of an accent color we would have an accent gradient. We named it Breaker Fruit. You’ll find this gradient throughout the product whenever the accent color is called for.
We also selected a basic set of “chrome” colors for our UI and a custom range of Breaker Grays. Breaker Gray is tinted with the same base hue as our Breaker Blue. This creates a subtle complementary effect that feels more polished than plain ol’ gray.
Type
During the process of creating our wordmark, we selected Museo Sans as the face of our brand. It‘s a clean, subtly quirky sans-serif that is broadly available, comes in a variety of weights for display and text use, and has reasonably friendly licensing terms.
Font licensing is important to consider as a young company, especially if you plan to use your brand typeface in an iOS or Android application. Font licensing for in-app usage is a fairly new beast, and many type foundries have frankly not figured out licensing strategies that are kind to young products. Be sure to consider your needs across all platforms (mobile, web, and print) before you finalize your selection.
With our colors and typography set, we turned to iconography. There is a plethora of well-made stock icon collections out there, and you may very well find one that suits your needs. If you do, choose one and do your best to stick to it. Mixing and matching icon sets is a quick way to brand yourself as amateur hour.
Iconography
For my part, I’m a fan of thematic, branded interfaces. These have become somewhat passé in recent years as digital design trends toward the minimal and generic. While I appreciate simplicity, I also desired to keep the Breaker aesthetic personable and approachable. Riffing off brand details we had arrived upon, I created the basis for a “Japanese Surfshop”-inspired icon collection, replacing the 20 or so core icons we use in the Breaker app. It’s a small touch that goes a long way.
What’s Next?
Now it’s time to put the new identity system to work. Today Breaker is launching its new brand and incorporating many of its elements into our product.
Breaker’s first full-time designer, Emma Lundin, recently joined the team, and she has begun the process of building out a component library based on our identity system that will define the future of the Breaker product.
The work is far from done, but we’re excited to arrive at this milestone. Give Breaker a listen today, and join us as we work to put Breaker on every speaker.
