It’s been extremely exciting to show these friends the improvements that have been made to the global navigation and home page that launched on June 18th. I’m even more thrilled to tell them that I played a role in designing the refinements on such a well known and much used site.

The Old Global Navigation

The New Global Navigation

A majority of my focus on this project was spent on redesigning the global header and navigation. While most of the dirty work in deciding how to reorganize the site structure was done by the MySpace and Adaptive Path teams before wireframes even arrived on my desk, many challenges remained in designing the ’skin’ of the global header. Some included streamlining the look of the global header bar while adding even more functionality, shoe-horning the new header onto “classic” MySpace pages, accommodating multiple states and making sure drop down menus and Flash did not conflict.

These are the type of challenges that designers really get into. We love simplifying the complex and obsessing over the details. At one point we made the navigation so lean and mean that all the elements fit on one efficient line. In the end this solution didn’t accommodate enough negative space. The ultimate solution made the navigation text links rather than buttons, which was the proposed solution in the wireframes. Visually, this bought us a lot of space. Reducing the size of the logo and search bar, while still meeting the requirement to brand the Google search field, bought us even more.

Why did we need all of this extra space? Three reasons. First, many new features were introduced that needed a spot to live such as a user photo, user status, emoticon, and inline status updates for the logged in user.

Second, the navigation had to work at various heights and widths. MySpace is changing its page width to 960 pixels from 800 pixels, however some “classic” MySpace pages like the user profile are unable to make the shift at this time. On these “classic” pages the height of the navigation also needed to remain the same. Having enough negative space allowed us to reconfigure the header to be various heights and widths without changing the arrangement or crowding anything. This space also helps to accommodate different languages that may contain more characters.

Third, an airy navigation is easier to use. The user needs space to navigate especially when there are drop down menus and hover states. It is annoying when things are tight and you can’t manage to click on what you want to click on. It’s the equivalent of having large thumbs and trying to text message with those tiny little cell phone keys. Argh!

The Old Global Navigation with an Ad Banner

The New Global Navigation with an Ad Banner

Another challenge designing site navigation is maintaining consistency. The previous version experienced the unthinkable—due to the height restriction and banner ad, the MySpace logo was squeezed out and became a text link. One of our objectives was to get the logo back on all pages. Our solution was to place the banner ad on top of the navigation bar and the logo. This kept the integrity and consistency intact. It also avoided any possibility of drop down menus overlaying these banner ads. Advertisers are free to use Flash, and with ads being produced by outside vendors, there’s little control over the way the Flash is programmed, often causing drop down menus to misbehave when trying to hover over the ad. Medium rectangle ads using Flash are also displayed on the MySpace site in the top right slot directly below the navigation, which influenced our decision to keep all drop down menus far enough to the left so they would not conflict.

The last challenge to address was color. We felt the MySpace blue was in need of an update. It was universally agreed that there was equity in this particular shade of blue so the color could not change. In the end, the solution was to create dimension with a little help from our good friends gradients and hairlines. I must say, the new navigation is looking (and working) much, much better. Thanks to the Adaptive Path and MySpace teams for all of their thoughtful guidance along the way and to Scott Borchardt for his ever-strategic feedback.

A brand touchpoint is any facet of how a person interacts with a company, product or service – from an advertising headline to a conversation with a customer service rep to the subtle interaction of a single button on a web site. If we are thoughtful, skillful and lucky, we can orchestrate and align enough of those touchpoints – an experiential tipping point – to create a coherent and meaningful experience for our customers. This is underlying principal of what I like to call “touchpoint branding” (more on this in a future blog post).

So that’s the theory of how it’s supposed to work: brand strategy manifests as touchpoints which create experiences which form perceptions. But in practice, of course, it’s rarely so tidy. Customers are exposed to many touchpoints that are outside the company’s control (word-of-mouth being one of the most potent), and these often form lasting brand associations that marketers have to deal with.

So how does the public define your brand? There’s no substitute for good customer research, but there is a fun little site called Brand Tags that offers a “quick and dirty” approximation of how a given brand is perceived (or at least how it’s perceived by the users of Brand Tags). The site lets people “tag” brands with attributes the same way they would tag web content with keywords. What’s the first word that comes to mind when you think of Volvo? OK, that was an easy one, but things get more interesting as you dig a little deeper.

For example, we’re big fans of Chipotle Mexican Grill – they’re a long-standing client of ours with a great brand. They’re well known as a cool, fun place to get gourmet burritos, and if you ask them how they define their brand, they have a nice short list of inspiring and desirable brand attributes (the kind most companies should have). But on Brand Tags, the three most common tags are “Burrito” (good), “Mexican” (yup), and “McDonalds” (huh?).

What do the Golden Arches have to do with Chipotle? The truth is that McDonalds was once an investor in Chipotle, and even though they have since divested their shares and have nothing to do with each other, it seems the association has stuck. Chipotle’s corporate vision is a sort of manifesto against fast food (to their credit, they are genuinely committed to and passionate about this). Yet there it is, in plain view – the third most common association with the Chipotle brand name is the world’s biggest fast food chain. It’s a reality of their current brand perception and simply wishing it away (or even explaining it as untrue) won’t change it. Because the brand isn’t what you say it is, it’s what they think it is. And changing an entrenched perception (even if it’s a misperception) is even harder than getting them to pay attention in the first place.

Again, the Brand Tags site is no substitute for true brand research, but we’ve found it to be an interesting and often useful first stop on the path to understanding what “they” think you’re all about.

Last weekend I went to see “Birth of the Cool: California Art, Design, and Culture at Midcentury” at the Oakland Museum of California. The exhibition “captures an era in post-war Southern California when exploration in architecture, art, music and design coalesced to form a modern sensibility based on living well.” Good show. Here’s a few related links:

Architectural photographer Julius Shulman (+)

Designer Alvin Lustig

Jazz photographer William Claxton

Painter Karl Benjamin

Designers Charles and Ray Eames (+)

BOTC on Flickr

BOTC on YouTube

BOTC on Amazon

Take Bart. They even made a playlist for you

When you do a search on Google for the following terms, you will see that posts from our blog show up in the results with decent placement. 80% of clicks on a Google or Yahoo results page go to the top 3 results, so that’s where you want to be.

Google query: now indexing flash movies (3rd result)

Google query: evolution of online graphic designers (1st result)

However, for more generic search phrases these pages don’t rank high enough to matter. And as a result we don’t yet get much traffic from these posts. If you conduct a search for Google indexing flash – a much more frequent search phrase on Google right now, our post doesn’t appear above result 200 (and it may appear much lower, I gave up after looking through the no-mans land of page 22 of the Google results).

Filling the page with lots of fresh, interesting and relevant content then making the page readable to Google is only one part of the process of “Search Engine Optimize” or “SEO”. We know we’ve accomplished this because the blog posts ranks high for specific phrases on the page.

To further improve our rankings in the results and reap the traffic rewards, we need to convince Google that our article is better or more authoritative than the 200 or more articles that rank higher in the results. Google’s measure of page and site authority or reputation is called PageRank, and it’s based on HTML links.

Every link on the web is a vote of confidence from the linker to the linkee. The more links pointing at your site or page, the higher your page rank. Ergo, to get our blog post ranked higher in Google, we need more pages on the internet to link to our post. I’ll discuss link-building strategies in a follow up post.

Until today, Google and Yahoo’s web crawling robots couldn’t see or read Flash files so any words written in flash were essentially invisible. If Google’s bots can’t see your page content your chances of being found in a Google search are greatly diminished. One of the most obvious manifestations is that Google has no text to show as a snippet in its search result listings. Given how Google has effectively become the front page of any web experience, not ranking on Google isn’t an option.

So, while the rich user experience afforded by Flash is useful and sometimes necessary to define an brand, designers and product developers have used it very cautiously. “After all, it doesn’t matter how pretty your Website is if nobody can find it,” says Erick Schonfeld of TechCunch.

Google’s announcement last night is the first step towards Flash being a viable technology for serving both user experience and search engine optimization. As explained on Google Webmaster Central:

“[We now index] all of the text that users can see as they interact with your Flash file. If your website contains Flash, the textual content in your Flash files can be used when Google generates a snippet for your website. Also, the words that appear in your Flash files can be used to match query terms in Google searches.

In addition to finding and indexing the textual content in Flash files, we’re also discovering URLs that appear in Flash files, and feeding them into our crawling pipeline—just like we do with URLs that appear in non-Flash webpages. For example, if your Flash application contains links to pages inside your website, Google may now be better able to discover and crawl more of your website.”

Unfortunately, Google still won’t be able to index or extract meaning from images or videos.

The next step for Google and Adobe is to work out how designers and developers should indicate to Google the relative importance of words within the Flash file. With HTML, the method is well understood: the Google bot weighs the content based on how it has been semantically coded for human consumption. For example, words on an HTML page tagged ‘header’ are more significant than body content tagged ‘paragraph’. At the moment, there is no such equivalent in Flash. Ideally, Adobe and Google would further clarify how to optimize semantics of Flash movies.

In the meantime we are running some experiments on Flash indexability and we’ll share with you anything we find. If you have any evidence of how your Flash files are being indexed, we’d love to hear about it.