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'.