Growing up as a Yankee the south was a far away place where the pace of life was slower, the weather was hotter, the guns -- more liberal than people and a place where everyone praised Jesus (hallelujia). Quite frankly if it weren't for my grandfather (a card carrying member of the NRA), moderately conservative father and the non-judgmental values I was raised with I might have grown up to either dislike or be completely indifferent to the idea of the south. Instead for me...the south...the DEEP south has always had a certain mythology wrapped up in it's existence. I'm not sure why this is. It could have been reading books like Midnight in the Garden of Good and Evil by John Berendt, watching Gone with the Wind, the French classes where we learned about New Orleans, A Streetcar Named Desire, or any number of occasions I (with my limited geographical experience in America) was exposed to the plethora of stories about the American South.

As of today I still have not traveled farther south than Washington D.C. (a city I would not consider southern) in this country, and like all things which are unknown the south remains a mysterious place for me. I, of course, sometimes choose to feed my curiosity with television. I started watching True Blood when the pilot first aired, knowing it took place in Louisiana and when the pilot for FX's series Justified (a show about a US Marshall in Kentucky) aired I watched that too.

The first thing anyone sees when they watch a TV show is the opening title sequence, these sequences set the tone for the show -- it's an opportunity to set expectations in the minds of the audience. Having now watched opening sequences for both Justified and True Blood...I am lead to believe that the south either has a certain aesthetic. An aesthetic which storytellers and designers are possibly intent to maintain.

True Blood

CREATED BY: Digital Kitchen

Justified

CREATED BY: Elastic

The Similarities

The similarities between these two titles are both obvious and extreme...both are beautiful pieces employing rustic type, high contrast, colorful, mildly polaroid-esque photograpy coupled with some jerky cuts.

Justified stills on left, True Blood stills on the right:

Why True Blood Does it Better...

As far as aesthetic quality goes, for me both title sequences are beautiful. The typography is thoughtful, the imagery is well executed, and the editing/pacing of these pieces seems to work nicely with well chosen music. While I have a preference for the visuals used in the True Blood sequence as I think the attention to detail in that sequence is better -- from a purely technical standpoint for me they stand on fairly equal ground.

Where the True Blood sequence really leaps in front of the Justified sequence is on a thematic and story-telling level. While the Justified sequence alludes to the idea that the show will be about a cowboy in a small town who works to fight crime the story told and mood created does not even come close to approaching the depth of the True Blood sequence.

The True Blood sequence can essentially serve as an establishing shot for each episode. It establishes not only the setting of the show (a fictional town in Louisiana called Bon Temps¹ ) but also the themes and moods worked into each episode. Digital Kitchen did this by drawing on the issues and dichotomies upon which the show is built. Pulling from these dichotomies allows the sequence thematic contrast and tension (ex: life/death, carnality/piety, light/dark, day/night, intimate/public) which, served up with some gorgeous visuals, smart motion and well chosen music creates one seriously kick ass title sequence.

The Origin?

The True Blood sequence was created a full 2 years before the Justified sequence. This simple fact leads me to believe that Elastic was likely inspired by Digital Kitchen's work on True Blood. I'm not sure I would call the sequence a rip off as some have suggested. Good work always inspires derivatives, this is a simple fact of life in the advertising and design community. We can't all be original all the time and at the end of the day...original ideas and executions are rare. There's always some sort of origin or source of inspiration even if it's subliminal.²

Of course Digital Kitchen had to gain their inspiration from somewhere right? They did. In fact the first nine seconds of the sequence are seemingly based directly on a movie called Searching for a Wrong-Eyed Jesus. Digital Kitchen talks in their case study for the sequence about the effect the film had on their creative process.

We also give big thanks to the wonderful film Searching for a Wrong-Eyed Jesus. It gave us the courage to dig deeper into the swamps and back alleys where the real color can be found.³

Searching for a Wrong-Eyed Jesus stills on left, True Blood stills on the right:

Moral of the Story?

Great works inspire good work. The question is....do you want to be good (inspired by the derivative) or great (inspired by the origin)?

I recently spent a whopping 4 hours in an airport waiting for a plane to arrive. While waiting I decided to catch up on some of my favorite shows using NBC's mobile website which allows you to view full episodes on your phone. Before I go any further let me first say that I think NBC is an innovator for putting full episodes on a mobile site, they should be commended for that. The mobile website as a whole is easy to navigate and not run down with functionality no one cares about. Also during my 4 hour wait, it was an awesome way to occupy my time.

Episodes play in parts on the mobile website, in other words: each episode is broken up into about 4-8 Quicktime videos with a commercial baked into the front of each part. Since an episode is not one large video file, there is naturally time between the end of one part and the beginning of the next. When this happens there is a screen letting the user know the next part of the episode will begin soon. This is the trouble spot.

Before

Epic problems are bound to occur when you have a design, UX and development team who don't communicate -- I expect this was what lead to the following screen being implemented.  UX and design probably thought the developer would use the iPhone's native GUI, when really this was not the case at all. Instead of a developer pushing back and asking his/her design/UX team to re-think the approach to this screen or better yet suggesting solutions for the screen, they said nothing or worse yet...perhaps they weren't involved in the design/UX process at all. The screen below is the result  (Below image each problem is addressed individually)

1. In case you thought that because the image above is a JPG and that in the actual screen grab the spinner was actually spinning, you would be wrong. Under no circumstance does that spinner spin. Nope, instead it just sits there, dead, teasing us with its' spinner like appearance. WTF NBC, if you have a spinner on a page....well then make sure it spins! I have no interest in looking at a static picture of something that is suppose to move -- that's like sitting in a car that's not on: completely pointless.
2. Do you see a mouse on this screen? NO! Under no circumstances would you need to click on anything. On an iPhone (or any touch screen device really) you TAP not click. Copywriters take note.
3. Episode Part? Really?....really? Could you not have found a better way to say that?
4. Why is this in a box, I don't get it....it's not iPhone UI, it looks like crap...get rid of it.
5. Again...using native iPhone UI elements as an image in the hopes of providing a seamless experience doesn't work here, so don't do it.

Beyond using a single image static image, a multitude of copy flubs and implementation faux-pas, the image used is pixelated...the kind of pixelated that is like nails on a chalkboard to a designer's eyes. I'm going to file the pixelation under the 'lazy developer' files for now and move on.

After

In my re-design I had a couple of goals.

1. Make sure the user knows something is happening and that their content is being queued up
2. Correct the epic copy failures of the previous screen
3. Remind users they're being afforded the luxury of viewing TV shows on their mobile device because of NBC
4. Keep the file size reasonable, we are on mobile -- no one wants to wait for a loader to load
5. Use the peacock: NBC you have a fucking peacock as your logo...embrace the peacock! If I was NBC that peacock would load EVERYTHING. It's one of the most recognized logos in America, use it, remix it, animate it, love it.¹

By embracing the peacock (5) I am able to inform the user their content is being queued up with the animated NBC logo (1). This logo is also a way of reminding the user where they are, and that what they are watching is NBC programming (3). I adjusted the copy and hierarchy of the type to more accurately inform the user of what is going on (2). The final file size of the GIF NBC would use in their HTML is nearly half the size of the image they are currently using: NBC's image is 20KB compared to mine which is 12KB (4). That's right NBC, I pimped out your loading screen and brought the file size down.....what now?!

Taking it a step farther

While the design above reflects a change to the current DESIGN of that screen I actually feel that this screen is a missed opportunity for earning some advertising dollars. NBC could easily place a small advertisement on this page to generate additional revenue, the user is waiting anyways, popping an ad on the screen isn't going to hurt.

How to not make a user's eye's bleed and an advertiser's heart break

1. Don't assume that just because something is on screen for only 5 seconds that it can be dismissed. Five seconds is a LONG time online and it seems even longer when you're on a mobile phone because you don't have other windows open to browse while waiting.
2. Since 5 seconds is a long time, don't let your user think that nothing is happening. Inform them or entertain them with an animation or piece of trivia. Waiting is no fun, would you want to stand in a waiting room instead of sit in a comfortable chair?...I didn't think so. Don't be a douche bag to your user, if they have to wait anyways make the experience less unbearable.
3. If you have a screen that requires a user to wait anyways, why not earn some additional revenue from that time by showing them an ad. Advertising sucks, but since NBC is providing free quality content with probably 70% less advertising than a viewer watching on TV, they are well within their rights to collect ad dollars here.
4. Be careful writing copy for mobile. Many mobile devices no longer allow a user to click...instead user's tap. Also make sure you're writing copy that will makes sense to a user and if you can, don't be afraid to spice it up a bit.
5. Rub some 'Make my logo bigger cream' on it (kidding!). Don't make your logo huge, but make sure the experience is tastefully branded throughout.

A Message to NBC

Like all broadcasting companies, you too have your moments of weakness and this was clearly one of them. Since I enjoyed using your mobile website so much I'd like to provide the animated GIF I created (re-designed) to you (see 12KB animated GIF here), should you require source files as well simply contact me and I'll send them over as well. More importantly, take some pride in your work and embrace the gritty details as an opportunity to shine. While I was at the airport I probably spent about one whole minute looking at that ugly screen ya'll implemented, now you go look at that screen for a minute. Was it enjoyable? No, of course not. Now in the words of Tim Gun 'make it work'.

I am not a huge sports fan, but I love the Olympics. They represent an opportunity not only for athletes, but for designers and artists as well. The branding of the games must represent the host city, but be accessible and understood by billions of people from all over the world. This is no small task. Perhaps my favorite part of the artistry and design of the Games is the artistic innovation that is presented. You have seen it before in Beijing's architectural Bird's Nest for their 2008 Games,¹ London's 2012 Olympic logo (I know most people hate it, but I think its brilliant),² and now in the Vancouver 2010 Olympic metals.

Why these metals are innovative

Obviously the fact that these metals break the standard form factor for Olympic metals with their sexy, modern, wavy shape, but that was not the piece of innovation I was impressed by; instead I was impressed by where the raw metal to make these awards came from. Rather than mine for the ridiculous amount of metal required to make 1,014 Olympic metals,³ the Olympic committee opted to recycle 6.8 metric tons of metal from landfill bound circuit boards. According to my math that means that over half of the metal used for the Olympic metals was recycled.⁴ It's good to see an organization finding a way to recycle at least some of the incredible amount of e-waste produced world wide each year.⁵ For more on these metals visit the Vancouver 2010's page about the metals.

Starbucks's first foray into the world of iPhone applications showed up in the App Store a few weeks ago. No now all of us advertising people can walk to Starbucks (SBUX) in our Nike (NKE) kicks then customize our morning cup-o-joe with our Apple (AAPL) iPhones and single-handedly bring back the economy.

I've taken a pretty close look at the app, and I think for a first version the app stands on solid ground. The design of the app is absolutely beautiful and maintains the Starbucks brand while remaining true to the fact that it is an iPhone application. The base level functionality is solid, it provides some great information to the user as well as including some standards we're used to seeing in branded applications such as a store locator. There are some areas however I feel the application stops short of living up to its true potential. I expect the intent of Starbucks was to launch with ground level functionality and then level up based on demands from the App Store reviews and ratings, customer feedback and (hopefully) metrics.

Design

About 80% of designs for branded applications out there are really disappointing, and of the ones that aren't disappointing, few of them truly excel -- this is a design that excels. The design of this app is a great example of how to do non-glossy, earthy designs for the iPhone. There is an attention to detail and craftsmanship that makes this app feel special. Despite a heavy feature set and multiple views there is a consistency to the style of the app. Further more the design uses unique (non-standard) functionality only to break up monotony (ie.) the Coffees Explore view -- details like this set this application apart.

Key Features

Store Locator & Invite a Friend

Sometimes I question whether early humans were actually nomadic or if they were just lost. As with most well done branded apps today, this app includes a store locator and its one of the best store locators I've seen to date. The app also allows you to easily invite a friend to coffee with you from within a store view, via your preferred method of communication. If you like calling, the app dials their number for you. Selecting email will populate a pre-written email appears for easy customization and sending within the app. Texting brings up an alert view notifying you that it has copied text to your clipboard, so in your Messages app all you need to do is paste and fill in a time. Your lazy bum doesn't need to do much, so you really have no excuse to sit in the corner acting profoundly emo while drinking your chai tea writing poetry.

Drink Customization

For those of us who aren't baristas or never will be baristas this app takes the complication out of the foreign language that is the menu at Starbucks or any other coffee shop for that matter. A menu should not be another version of the Rosetta Stone and I shouldn't need a translator to order in English in an English speaking country. Luckily the application simplifies the task to decoding the menu. The app allows you to easily customize any drink of your choosing. This is an enormous design challenge simply because of all the variables involved but it's was easy to use and well executed. Once you've customized your drink you can save it to your favorites, assign it to a friend (to remember their favorite drink, because you're a good friend) or send it to a friend via Bluetooth.

Bookmarking & myStarbucks

Because this application is information rich and the drill down to that data can be pretty deep having some type of bookmarking system is pretty much mandatory if Starbucks wants people to use their app. Luckily they realized this and provided their users with myStarbucks, you can bookmark just about anything in the app and it will save it here. It's also the first tab, so every time I open the app my preferences are there waiting for me.

Exploring Coffee

The Coffees tab allows you to browse a list of all Starbucks coffees this is great, but Starbucks has a lot of coffees. God forbid you're indecisive, on the run, and need a caffeine fix. Don't worry, Starbucks comes to the rescue allowing the user to select a type of flavor from the explore section in Coffees and it will provide a narrowed down list of coffees matching your preference.

Food Menu

This menu was a surprise to me as I don't think I've ever actually seen this much food in any Starbucks, but its good to see the possibilities I suppose. More important than seeing the possibilities is seeing what that food would pair well with and the nutritional information.

Common Themes

Starbucks is a meeting place

Coffee shops have historically been places that fostered conversation among people dating back to 16th century Mecca.¹ Starbucks realizes this. By implementing functionality that allows you to easily invite your friends, check if the store you visit has WiFi so you can work for a couple of hours, send a drink to a friend via Bluetooth, or save a friends favorite drink so that you can order it and have it waiting when they arrive Starbucks stays true to it's tradition -- not by ignoring newness and technology but by embracing it. And unlike other social technologies (ahem Facebook, Twitter and MySpace) this actually brings people together in a physical space rather than just a virtual one -- there's something nice about that.

Starbucks keeps you informed

You're busy creatures with a complicated life, we don't have time to dig for information about what Starbucks is trying to sell us. Starbucks doesn't know you're on a diet, and they won't open their doors at odd hours just because that's when its convenient for you (don't worry I think you're important). Starbucks at least gives you a tool to build your day around the stuff Starbucks provides for you. Whether it be nutritional information, store hours, menu items, coffee types or in-house amenities, Starbucks wants you to know what you need to when you need to -- they want to make your life easier, not complicate matters. That's what your job, your family, your friends and your lovers are for -- coffee is simple.

Starbucks as a coffee expert

I am not a coffee person, but I think it's really cool that Starbucks breaks down flavor options when selecting your coffee. I love wine and I know how daunting selecting a bottle is -- I imagine a coffee lover selecting their morning cup of joe could be equally as overwhelming. Furthermore allowing you to easily pair a drink to the food you ordered not only provides the customer with information, but should they choose to act on that information it could give them a better experience as well.

Starbucks knows you

Let's face it, Starbucks at the end of the day is a corporate titan. So for those of us who grew up in towns where coffee shops are run by the guy next door, with local art on the wall, live music and lots of couches -- going to Starbucks feels just a little bit like selling out. But at the end of the day the people who work at your local Starbucks are the people you live next door to, and they might very well know what you normally get every morning without you having to say anything. But if you live in a big city like New York, it is easy to feel like the intimacy gets lost with all the people, having a little pocket barista to consult before ordering, who remembers the last drink you customized or what kind of milk your co-worker likes in their coffee is nice.

What I expect from the next version

Facebook Connect

This is an app that is begging to be integrated with Facebook. Imagine if you had all of your friends favorite drinks right at your fingertips without having to manually collect them one by one on the app. One of your BFFs having a bad day? You could be the person who makes it better by getting them their favorite type of lattè customized to perfection.

Contextual Customization

When you add that extra 2 shots of caramel to your macchiato and switch from 2% milk to whole milk it would be great to see how many extra calories you're going to need to burn off at the gym that night, or how much healthier you'll need to eat at lunch to not go over your Weight Watchers points. Or what if you're a teenager and going through the "I'm a non-conformist hipster" stage (though I highly doubt your non-conformist ass would ever be caught dead in Starbucks, but whatever) and you want to be unique and you see via your iPhone that 5 other people at Starbucks while you're ordering are drinking the Caffè Verona but no one's drinking the Komodo Dragon Blend, hell yeah you're going to order that Komodo Dragon Blend. Contextual customization gives you the tools you need to make better decisions with the plethora of choices you're presented with so you can get on with being your bad ass self even if you're still figuring some stuff out.

Some kind of barcoding system

Yeah, that's right, I said barcoding. I'm unsure of why Starbucks would create an app to customize a coffee to the nth degree without at least contemplating the possibility that scanning a barcode would effectively speed up the ordering process exponentially by allowing the customer to do it on their mobile device.

Integration of the Starbucks Mobile Card app

Having the mobile card separate only makes sense now for three reasons:

1. its still in beta, and beta means potentially messy...like powdered sugar doughnut messy
2. there's no barcoding system within the current main application
3. divide and conqure - both apps have their separate challenges development wise, by building these applications separately, it avoids complications, possibly additional bugs and places both applications on a separate timeline.

I would hope once they get their system up and running smoothly they would opt to integrate the two applications.

Rewards program

Your mobile device is probably the coolest punch card you've ever had and yet few are using it that way. By doing the Starbucks Mobile Card, barcoding and ordering all within the same application not only are they are gathering valuable information, but they could be potentially building loyalty. A rewards program might give a person the extra incentive they need to buy what some might consider that extra cup of over priced coffee.

What the future might hold

Paging system for when you've ordered drinks

Okay, I know what you're thinking...a cup of coffee doesn't take that long to make...but a frappuccino on a busy Monday morning with unmotivated workers behind the counter does. When that happens, it would be nice to have a seat rather than standing their in the way or thinking hey that's my frappuccino when really its someone elses. Efficiency is an awesome thing.

Order ahead

While I've never actually worked at a place where I have had to get a metric ton of coffee for co-workers in the morning, I imagine its probably a terrible experience. And it sucks for everyone behind you in line too, because you actually order more drinks than their are people in line, and that pisses people off and its not actually your fault - its Starbucks fault. We have the internet, we have mobile devices, and information gets transferred at light speed. The designated office coffee person should be able to order via mobile phone, select a time they will pick it up at and submit the order so Starbucks employees can pace themselves and other waiting customers don't have to wait so long. Let's face it, if we've sent a man to the moon we most definitely can figure out a way to make this process easier.

Drink gifting

Let's say you make a bet with a co-worker and that bet involved a cup of coffee for the winner...let's say you're a busy bee who really shouldn't be making bets to begin with because you don't have time to go buy a cup of coffee for the winner, let's say you lose that bet? Well what if you could Bluetooth your co-worker their winnings via your iPhone. I bet that would make your life a whole lot easier wouldn't it loser?