How To: Wake Up and Smell the Bacon with Oscar Mayer's Interactive Site

There's one sound I dread. One short, simple song that just gives me the chills every time I hear it.

Like cringing, uncontrollable fear-inducing chills.

The clock hits 6:00am and there it is. Every. Single. Weekday.

Now I do have to say, alarm clocks have gotten better over the years. No more plain, loud screeching "beep beep beep." You do get to choose your favorite song to wake up to. Then you end up despising that song in two weeks and immediately turn off any radio station it plays on like you're trying to avoid the plague.

But this one, this is different.

There is one thing that gets me, and any non-morning person like me, out of bed. That's the smell of one delicious breakfast hot off the stove. Eggs, toast, coffee, bacon (even though I don't prefer to eat red meat or pork, I can still totally enjoy that bacon smell). So how genius is it that someone actually came up with an alarm clock that emits a bacon scent! MIND. BLOWN.

That someone was Oscar Mayer. And not only have they created this amazing device, but their digital experience meets every expectation you would expect a bacon-scented alarm clock landing page to have—it totally rocks.

Although we would love to brag, we can't take credit for the building of this digital experience. But when we saw it, we said, "Hey, we could definitely build this with ion!" So, let's walk through exactly how you could build something just like this awesome Oscar Mayer experience within the ion interactive platform. Let's break it down...

Sticky Container

A sticky container can be used to house the page header, logo, and navigation bars. On Oscar Mayer's digital experience, the navigation area is always viewable on the page, regardless of how far you scroll down. The ion platform has the same capability, allowing you to add easy, direct access to anywhere your visitor would like to be taken within the digital experience.

Full-Page Flow

By clicking on a button or link, Oscar Mayer's site takes you to each next section of the experience through full-page scrolling. Within the ion platform, flow gives the user the functionality of an image rotator and applies it to an entire page, allowing users to create sections to slide to and from horizontally and vertically.

Sticky Container & Full-Page Flow

Video Embed Widget

First thing on Oscar Mayer's page that you see is an embedded video to show off their product.  It seamlessly blends in with the page, scrolls as you scroll, and plays directly in the page without a pop up lightbox or border around it. Embedding a YouTube video is something that comes baked within the ion platform. Not only can you grab in YouTube videos, but the platform gives you the options to use (but not limited to) Vimeo, Brightcove, and Ooyala as well.

Video Embed Widget

Parallax Background Effects

Parallax scrolling is a very popular trend amongst digital experiences and websites currently. As you view a continuous page layout with Oscar Mayer's digital experience, parallax background effects can be used within the ion platform. Using the ion "Micro-Themes" behaviors, you can select a scroll rate option from "Slower" to "Ludicrous" to give one background element a slower or faster scroll rate from the rest of the experience. Using this effect can add depth to your page... and really... it just looks awesome!

Animations

As you see the smell emit from the bacon rose or the iPhone spin around, animations such as these can be simple within the ion platform. You are able to add animation to any page element. That mean tex, images, links, interactive content! Each element can fade, spin, slide, and move simply by selecting the animation from a drop down. Hover effects for any element (links, buttons, images... just to name a few) can also easily be created.

Parallax Background Effects & Animations

Responsive Design

Oh, that? Yeah, that is no problem with ion interactive!

Responsive Design

So there you have it. Oscar Mayer made something awesome with their bacon-loving site, and it's the exact sort of thing we built the ion platform to do: Make awesome app-like experiences. It's not enough anymore to just have your brand's information on a plain site with no engagement or interactivity. Consumers are looking for exciting, new, game-changing digital experiences like Oscar Mayer's. Amp up your digital touch points with interactive app-like experiences!

Want to learn more about the what, how, and why of marketing apps? Register and take a look at our Marketing Apps Idea Book and the Case for Marketing Apps white paper for some inspiration!