How Fitbit Dominates Email Stream Design

Curious about how a single brand tackles its email stream design? We’ll explore and analyze Fitbit, which sends a variety of emails—like product announcements, shipping alerts, and user notifications—to its subscribers.

When it comes to products, the fitness brand often focuses on its activity trackers (like the wristband pictured below), so we’ll take a closer look at the messages to see which elements stay the same or change, and how style and voice are maintained across different designs and email types.

So let’s review Fitbit’s brand identity and then its emails to see what we can learn from the company’s email design philosophy.

fitbit email stream design


A strong visual brand is always maintained

With its bold colors and smooth, rounded shapes, Fitbit’s visual brand identity is modern, fun, and friendly. Fitbit’s primary brand colors are teal and gray, but it also uses bright colors like orange, pink, and lime green. To prevent colors from being overwhelming, ample white space breaks them up and provides a fresh, airy aesthetic. Here’s a look at some of the colors in action in an app screenshot (Alta version):

Fitbit email stream design

Iconography is also simple and clean. Its logo recently underwent an update, making the newer version even simpler and bolder. Plus, Fitbit’s web font is the popular, easy-to-read Proxima Nova.

fitbit logo email stream design


Fun illustrations help user alert emails stand out

Alert emails are automatically sent when users reach certain milestones. The email stream design copy is encouraging and cheerful, with subject lines exclaiming: “Congrats on earning your Marathon badge!” and “Congrats on earning your first Urban Boot badge!”

The intention of these feel-good messages is to acknowledge the user’s accomplishments, without asking the user to do anything more. There’s no big call-to-action button, though Fitbit does include some social sharing buttons.
fitibit email design stream

You can also see the key aesthetic of these emails is simplicity. They’re short and sweet, with a classic inverted pyramid structure to make for easy reading.

The flat, geometric spot illustrations (the badges) are also easy to understand at a glance, and the high contrast of white font against a teal background makes the text pop. Using the email-safe Arial font for the header and support text means the message still shows up even with image-viewing turned off.

fitibit email design stream

Takeaway: Communicate a single, clear message to readers by keeping a simple email structure! Large text, bright colors, and simple illustrations can help communicate cheer.


Simple info makes shipping notifications easy to read

According to Litmus, 64% of consumers consider transaction confirmation emails the most valuable messages in their inbox. But the messages can get frustrating real fast if they’re cluttered or time-consuming to read. Confirmation emails, like the ones from Fitbit’s email stream design, should include an easy-to-spot tracking number, plus some key information (like what you ordered and where it’s being shipped from).

Not only does the brand provide the necessary info, but it does a great job of building excitement with playful messages (“Are you smiling?”) and equally playful product images. No doubt the reader will get excited that a Fitbit order is being processed.

fitibit email design stream

The main message is also clear and easily scanned because Fitbit uses a white background, readable font, line breaks, and three font colors (red, gray, teal) to organize information.

Although the same header from other emails is used, social sharing buttons have been replaced with store icons. These “passive” CTAs (in the upper right) correspond well with the type of email sent, while the footer is almost completely eliminated. By removing extra CTAs, these emails are really user-focused, especially since Fitbit knows the only thing a reader wants to click is the tracking code.

Takeaway: Make transaction emails easy to read by contrasting a white background against a primary brand color (the repeating teal) and using high-contrast text. Focus on the tracking number and order details, and exclude extras (like social sharing buttons or footers). A fun image and clear message convey an engaging brand voice.


Playful GIFs boosts product promotion

We recently pointed out that using GIFs in special announcement emails can signal an out-of-the-ordinary message. Fitbit follows this animation trend by incorporating simple GIFs to highlight its products and features. In a Fitbit Flex welcome email, the lights in the Fitbit GIF flicker:

fitibit gif email design stream

Here’s the full message:

email design stream

In a promotion email for colorful accessory packs, Fitbit’s hero image rotates between color schemes:

fitibit gif email design stream

Here’s the full message:

fitbit email design stream

Fitbit knows it’s better to show than to tell, so product features pop on the screen to help readers see features in action. Both animations are also positioned at the top of the email to grab readers’ attention right away. Plus, the GIFs are simple; with only a few frames, they won’t be slow to download or eat up data plans.

Takeaway: Put your animated GIFs to work—make them show off your product’s features and quickly demonstrate a product’s capabilities or features. Readers will be more engaged!


Fresh photos upgrade product announcements

Beautiful photography used in an email stream design also makes a statement, and the photos in the recent email below enhances Fitbit’s modern and friendly brand identity.

Layering text over the hero image is also a simple design trick that levels-up the email’s look. The photos below are bright and fresh. The goofy selfie face is playful and placing the image within the iPhone really shows readers how the feature works.

fitbit email design stream

Here, Fitbit unveils a product again with beautiful hi-res images. And what better way to show updates to the app dashboard than with screen shots? It’s the quickest, most effective way to convey the redesign.

fitbit email design stream

 

For a product-focused email, we see that Fitbit chose a two column layout with alternating image and text sections. The result is an email that’s easy to digest in a step-by-step fashion. The screenshots are further highlighted by pink circles that point to product updates, which help readers see specific features right away. (Hot tip: you can easily create circles like this in Skitch, and screen grabs can be placed on iPhone stock images through platforms like Placeit. See all our recommended email design tools here.)

Takeaway: Use photos of your product in action for update or announcement emails. Let readers see exactly what you’re talking about with device mockups and image markups (like those pink circles).


Wrap-Up: Tips from Fitbit’s email stream design

From all the emails above, it’s easy to see Fitbit’s brand style in action. Here are some points to follow:

  • Messages need to be simple, short, and clear
  • Minimize text and use web-safe font for easy scanning
  • Don’t be afraid to use a primary brand color more heavily
  • Include bright and fun illustrations and photography
  • Use GIFs and screenshots to show products in action
  • Have simple logos and headers to establish branding
  • Vary the CTAs but make sure they fit the email’s message
  • Keep footers the same (except in transactional emails)

Save

Design Beautiful Emails in the BEE Editor

Give it a try! Design stunning, fully responsive emails in our easy-to-use, drag-n-drop BEE editor. No HTML or CSS coding knowledge required. What more? It's free and online!

Take me to the BEE email editor