Our goal was simple:

We wanted to greatly simplify the exploration and consumption process. This applied to both what is new and published by our editorial team, as well as access to topics and sections sought after by our users. To do this, we insisted on making it feel very iOS specific to take advantage of how users have already learned to interacted with Apple’s tablet device.

What we came up with is a multi panel display that separates browsing from consumptions into 2 simple but distinct views – a list or browse view and a consumption panel.

The experience begins with a list view or river of stories that leads with larger and more prominent features up top. While the grid itself can be controlled by editorial teams based on the importance of a single or multiple stories – the recent or most important content sits in various larger tiles that form a brick pattern up top.

From the lower left of any view, a user can open a section drawer that exposes the numerous ways they can aggregate the list view of content based on a given category, topic or type of CNET special programming such as our Holiday Gift guide or our future CES programming.

As you scroll down through the experience the masonry pattern from above gives way to a simplified list view. The story headline, image, content label and date stamp remain, but are sized down into a streamlined stack for more uniform browsing.

Once a user clicks on a headline, a consumption panel enters from the bottom with the given story. This is the same for all content, however each has elements that allow a user to simply consume, paginate or do a deeper dive. This is the case in the review above where users can tab this view to deep dive into the content subset of the full review, user review, product specs or where to buy.

In the case of an image gallery, we reverse out the experience to provide a theater view. This helps to highlight the featured image as well as the related thumbs to stand out by utilizing higher contrast for this view.

Similar to reviews, news articles open into a single story panel that users can scroll vertically for the full read or to view any related in line content information or author bios that cap each piece of content. From any piece of content, users can either close each individual panel or simply swipe left and right to access the next & previous story.

On the right side of the display (directly where the thumb sits) lives a consumption utility that is accessesd by tapping the right side of any article. From here users can size up the content for increased font readability.

Or a user can tap the share function to access means to pass enjoyed content along to folks in their social graph or by email. As we add more consumption utilities, this feature will likely change or be built upon.

From the lower right of the tool bar, a user can both alter their settings or search the app with the simple magnify icon. Similar to the topical drawer, the keyboard panel also emerges from the bottom of the display / product experience.

Search results display just as they do when making a query on the native device. Once in a story from a result, users can swipe left and right to paginate to next and previous items with in the list.

So there you have it – The richness of CNET’s content in a simpliefied native tablet app to enjoy. This is obviously our v1 release and we will only build on this from here – but given that we consume as well as produce CNET, we are really excited about this new method of getting all of what CNET has to offer in this streamlined form factor. Give it a try and let us know what you think! We really are listening and want your input to make it the best experience possible~

Armed with iPhone’s awesome camera and mobile WordPress – my trip begins by waving goodbye to Mt Diablo as we leave the Bay area headed for a cruising altitude.

My first thought waking up to Gotham is “Holy Crap” – I am on the 20th floor of my hotel, and yet I still feel like everything is up from here. This place is very tall!

Arriving at the 28th street offices to meet with folks from CNET edit and TV – I was greeted by the very familiar orange CBS Interactive eye.

Day 2 was spent at the 57th CBS Broadcast center. James Morris (Art Director for News) was sure to give me a great tour of the facility along with a stop to the set of the CBS News.

I must admit, it was a cool thought to think about the history that has been told from this set – So many iconic figures have sat at this desk and told the story of the day to millions and millions of people across the country.

Be it from my smart phone, laptop or TV – watching the nightly news will never be the same having been able to see what lies behind the curtain.

Day 3 brought me back to the broadcast center for some quick product meetings and more time with James and team walking through plans for an undisclosed project.  By 1 pm I was ready to head back to JFK for my trip back home.

No photo post about NYC would be complete without capturing an image of a Taxi. There is literally an army of these cabs. It is by far the single most ubiquitous fixture on the city streets.

Not to be such a tourist, but I simply could not stop looking up. On route to the airport I was lucky to have not dropped my phone which spent the entire cab right snapping photos out the window.

The timing of my trip was fantastic as it also gave me the opportunity to finally see the east coast colors of fall. The color’s did not disappoint and went great with the high 60′s temperature (apparently unseasonably warm) that I was able to enjoy.

After a quick but fruitful trip, the climb to a cruising altitude provided some really cool lighting and backdrop for my air bus ride back home. Those who know me know that I am not a big fan of flying. However I must admit that it does provide for some really great visuals.

About the Position

This is a “Product Design” role. Thus the ability to work outside of Photoshop is both critical and mandatory. (HTML / CSS based design prototypes) Our properties must look stellar – this is a given. However, the true measure of success will be in building functional design systems that allow for simple and clean access to our content, features and functionality for both the desktop and mobile interactive. You must be a problem solver who is able to use visual communication to solve complex functional issues as well as to support the editorial mission. You will partner with various product, editorial and engineering leads to execute both large-scale projects as well as day-to-day production.

You are an avid user of web tools, applications and shared content online. You have an understanding and interest in emerging web technologies, concepts, and designs and can both mentor and foster this environment in a team. You pay attention to what others are doing with current design, and THRIVE on adding “best of” skills and techniques to your bag of tricks. The perfect candidate will have a solid understanding of user experience, be preoccupied with usability and have a great eye for the small details that make design stand out from the crowd.

The Requirements

• A passion for innovation and an attitude that good enough is not good enough.
• Strong desire to lead, learn, mentor and be a part of a passionate group – whose desire is to do the best work of their career.
• Portfolio of work that indicates a strong understanding of current interactive design trends – AND knocks our socks off!
• Responsible for managing a group of 4 – 6 Senior Designers, Designers, and/or Junior Designers on multiple projects
• Excellent communication and organizational skills. Ability to present and support creative concepts in a professional and engaging manner
• A self-starter who can both produce and lead teams to perform top-quality work on tight deadlines for multiple internal customers and product teams
• Approach design with user-centered design methodologies and practices
• Understand the role of design in creating usable and effective web / digital interfaces
• Able to conceptualize and design innovative user interfaces for consumer- facing websites and web-based applications.
• Advanced knowledge of the full Adobe web Creative Web Suite.
• Experience with valid HTML & CSS – We run a code based design shop.
• Current and review-ready portfolio

Most important – you have to have an online portfolio. I’m not interested in a resume of what you’ve done, and where you have been. Let your work knock my socks off. If you have the chops… you are that person, or know of that person… I want to hear from you!

At first glance, most folks smile at the promise of a free lunch. Today being the first of the Food Truck Fridays was every bit what you would expect. (I know… it is Thursday – the first one was an exception) However, what was more important then the choice between Curry wraps or Vietnamese noodles – was shared experience of all of 235 Second Street coming out to grab their grub and enjoy some sunshine.

Beyond the coolness factor of a free lunch – My take on the biggest wins, were in the conversations I had and overheard among the folks in our soon to be named front plaza. I have been here at CBS for 5.5 years, and I eat my lunch in the plaza nearly every day. (Rain or shine) – but today I met a number of folks for the first time, and sensed that many others also chatted it up with people they had not known prior.

Here in lies the greatest result from this afternoon. It has little to do with what you chose to eat… but in the choice to participate. We have some new leaders here in the building and with that will certainly include some level of change.

The interactive space is one of constant change. The technology and presentation that is used to bring value to the user does NOT (and never will) stand still. For me, this is honestly the most exciting aspect of working with new & interactive media. It is the wild west! We don’t have the benefit to look back in time to see what our predecessors did to be be successful – the coolest stuff has yet to be done.

The first and most noticeable change here at CBS, was in getting folks out of their cubes and offices so that they could wait in a line and talk it up about a free meal. This may seem a bit obvious… but at the end of the day we are a bigger collection of talented folks who spend our day’s trying to solve very similar challenges.

Our industry has an implied urgency to stay ahead of the pack, and to solve yet unknown challenges. This by itself can be a daunting, but is a super cool and awesomely fun challenge. So at the end of the day, many folks may have simply enjoyed a great free lunch (Thanks Mr. Lanzone & Mr. Moonves!) But the value of bringing the larger group together has a bigger pay off – A shared understanding of the challenges and possibilities for the road ahead. But more important, a deeper connection with the with a broader group of passionate folks who are likely just as hell bent on knocking one out of the park!

Knowing that the first release would be light on function, I tried to insure that the design would be visually simple but in context to what a user would expect on either platform. While the product is basically a reader app, CBS MoneyWatch has some additional nifty market data and stock look up functions that you would expect with a personal finance brand.

The bones of all 5 apps share the same tab based organization structure. Each is then given a skin adopting the characteristics specific to each brand. The business & Finance products organize their content with the same topical sections users are familiar with on the desktop site – or by a specific blog.

The Tech News products on the other hand are organized either by the specific blog, author or by popularity. However, at the blog level all of the apps offers the ability to filter by the latest content or popularity.

As users arrive at the article level, a simple but nice function is the ability to swipe left and right as a means to paginate through stories rather then having to click back to the previous list view.

Each app is currently monetized with a standard 320px leader fixed to the base. However, on the article page, the otherwise ubiquitous tab navigation goes away to allow more space for content.  Search is also available from any page by simply swiping down to access a search text input.

While we are eager to make improvements and add such features as video, community and member profiles  – we become that much closer by launching a base platform that we will surely build upon in the coming months ~

About the gig~

This is a full time position – The successful candidate (s) will assist in the creation of design solutions for assigned web projects including: product redesigns, new page layouts, visual interface design systems and functional | interactive elements, e-newsletters, promotions, and other graphical needs. Looking to the not so distant future, it will move beyond the desktop web and explore possibilities with emerging platforms such as mobile & tablets.

We are a tight knit design group that works closely with the Tech Production team to insure quick delivery of cutting edge design solutions to our audience. You are an avid user of web tools, applications and shared content online. You have understanding and interest in emerging web technologies, concepts, and designs. You pay attention to what others are doing with current design, and THRIVE on adding “best of” skills and techniques to your bag of tricks. The perfect candidate will have a solid understanding of user experience, be preoccupied with usability and have a great eye for the small details that make design stand out from the crowd. You will help define new site sections, concepts, and user flow.

The Requirements

• Portfolio of work that indicates an understanding of current web design trends
• Must be a self-starter who can produce top-quality work on tight deadlines for multiple internal customers and product teams
• Approach design with user-centered design methodologies and practices
• Understand the role of design in creating usable and effective web / digital interfaces
• Able to conceptualize and design innovative user interfaces for consumer- facing websites and web-based applications.
• Excellent communication and organizational skills. Ability to present and support creative concepts in a professional and engaging manner
• Strong desire to learn, grow and be a part of a passionate group – whose desire is to do the best work of their career.
• Advanced knowledge of the full Adobe web Creative Web Suite.
• Experience with valid HTML & CSS
• Current and review-ready portfolio

All seems reasonable right? Most important – you have to have an online portfolio. I’m not interested in a resume of what you’ve done, and where you have been. Let your work knock my socks off. If you have the chops… you are that person, or know of that person… I want to hear from you!

Our design framework has many key elements that are intended to deliver this. They are built into the very fabric of our properties with the intent that the very goodness that is able to deliver this presence to our advertisers, can also be used to bring attention to our own good content, features and topics. By using the strong presence of the combined Super Leader Board / Mantle skin, we are able to schedule highly targeted feature promotions that direct users into our own sections.

The ability to do this brings enormous advantages – Example:

• Early in the day, a small group of folks meet to discuss ways to drive traffic to a hot topical image gallery in ZDNet.
• By mid afternoon a creative has been executed
• By the end of the day it has been scheduled into our rotation using unsold ad inventory. Our solution is live and seen in various spots throughout ZDNet -  With NO engineering involvement

The beauty of this is in our ability to deploy at a super fast pace – Thus we are able to either succeed or fail quickly. As as result, we can test what will work in real time and modify as needed to find the ways to best move the needle.

Our recent redesigns can serve multiple combinations of these prominent ad executions – but not all folks in the industry are prepared to do this. This makes for a big challenge. We can not simply tell folks that we see the future of web advertising – We need to show them what is possible and in doing so they will lead the charge to push the envelop with this new world of options. That said, it is critical that we offer folks opportunities to maximize their legacy assets while they catch up to where the industry and our properties will inevitably allow them to go.

This serves 2 very important goals.

• We become a genuine partner to our advertisers – showing them that we are committed as a company to delivering a great experience not only to our users, but to the advertiser as well – In this case, not only are we building sites to provide PORT in the future, but delivering this DURING the transition as well
• Greatly improving our site experience for our users – The very elements that make ad creative feel larger and more prominent, also serve to set more clear boundaries between the host site and ad promotion. The grouping of ad elements are more logical and make the experience more cohesive for both the sponsor message as well as our own editorial narrative.

Take the example below: FedEx

FedEx had sponsored a vendor showcase in the leadership section of the site. The package includes a Leader / skin combination, 300 x 60 companion top clamp, List of contextually related links & a lower MPU. This provides both a brand play, as well as an opportunity to have a shared voice within a section related to the vendor’s message.

The issue: FedEx did not have any skin assets to combine with their older 728 x 90 leader board ad. We have built our new sites to be optimized for a much larger 980 x 150 leader as well as to be combined with a site skin. The 728 is from a bygone era – yet remains a staple of advertisers easily deployed assets. It is an odd size that at best feels out of place in sites optimized for the 1024 x 768 experience.

If a user were to click on any of the drivers on BNET – they are taken to a micro site with the full details of the FedEx Cup campaign. By simply grabbing the background from this site, and sizing to work as one of our Mantle-Skins – we accomplish the criteria mentioned above.

As you can see – the addition of the skin has greatly increased the presence that FedEx has on the site. However, what it has also done, is filled the odd voids on the sides of the small leader board – making what previously felt out of place feel integrated into the larger group. Odd as it may seem, the addition of bigger creative, has removed the scattered nature of these odd sized elements. This leaves the page feeling cleaner with more logical groupings to both the editorial & the sponsorship.

On the surface, one could argue that FedEx was a perfect example that only worked because they had an existing skin at the destination site. However, the same situation can be repeated even when there is no existing assets available to us. In fact, it is easier to integrate .

Example: Charles Schwab

Seen above is an identical “Vendor Solution Center” built for Charles Schwab. Like the FedEx example – it too only has an odd sized 728 x 90 leader board. In this case, we create what we call a “simple skin” which samples colors from either the brand color palette – or colors being used within the existing creative. By using this as a backdrop to the other elements – all the previously odd sized pieces are consolidated into the far stronger unified block with the same effects mentioned above.

In this case, we also added a brand sconce – which places the sponsor’s logo to the sides of the leader with some minor lighting effects for some added depth. Typically we will create 2 versions, one with and another without the addition of the branding. However, we feel that either will work and only provide the two as it seems easier to gain client approval when picking between options.

The summary: These are really easy fixes that require minimal time impacts on even a small creative team – yet the up side to our products and value to our advertisers is significant. I am as eager as all other folks, in wanting to serve newer and better creative on our brands – but am aware that this will not happen overnight. In the meantime, these tricks can turn lemons into lemonade improving our products and making CBSi a “must buy” with our advertisers.

Now that ZDNet has been out for a bit, we are starting to see more of these bigger premium implementation being delivered on the site. What has been interesting to watch, is that with each new campaign, the execution of the ad creative is getting better. As the client agencies as well as our internal central design team see these in action – we benefit from THEIR progress in learning new ways to push the envelope within the realm of possibility for these.

I would argue that everybody wins

• Our pages look cleaner with more premium Advertisements
• The Advertisers / Content sponsors get better visibility – and or shared voice via the larger presence on our brands
• The larger the creative – the EASIER it is for the end user to separate what is Host content – vs Ad Promotion

A look at the creative below – shows this PORT in action. Google is running a campaign to promote the benefits of Google Apps. In this case, they have also built it as a Cross Talk – meaning that the animation from the upper leader board art seamlessly and sequentially works with the corresponding Double tall MPU below.

All elements tied together with a matching site skin brings a very cohesive look to the entire experience. I would suggest that it is the strength of this creative that grabs the users attention which increase the likelihood for an end user to engage by clicking the Learn About Apps at Work. When the user engages the unit expands the “push down” to display the deeper body of content / vendor messaging. In this case the user is greeted by multiple video case studies of credible folks explaining the what and how they have depended on the Google app suite.

This is PORT in action. Now granted – this is also very strong ad creative, but it is the combination of these varied pieces that when grouped together become quite cohesive and create an environment where our advertisers can impress us all. While they have done this – our native site branding, navigational infrastructure and content narrative are left intact by blocking out real estate that is intended on being populated by these strong placements. (though I must admit a bit of ironic humor that it has been purchased on Mary-Jo Foley’s Microsoft blog!)

The details of how this is achieved could become many posts – However, my hope with this article, is to provide a case study on how this streamlined focus has been applied in a desktop or browser based interactive experience. Most folks have found themselves on a site where it is difficult to determine the flow of content – or often what to do next after having read something on a typical media site. These sites go to great lengths to be everything to every possible use case. In addition, they have also bombarded pages full of what they believe will make their pages appeal to the search engines as well as the user.

The result: Pages with countless items of varying use, stacked beside or on top of one another – all screaming for the users attention. The problem is, when everything is important and screaming – nothing wins. Sites go through numerous redesign in an effort to clean things up, but seldom do folks really apply the serious discipline to focus only on what is needed – thus, many redesigns are a case of sweeping a mess from one side to another, or under the proverbial interactive rug!

Case Study: The New msnbc.com – specifically it’s Article page

Most folks who know me, have heard me reference the Product or Design done by the folks at msnbc.com. Their last major redesign from over 4 years ago, proved to be ahead of the curve for many things – It greatly simplified their section door river feeds, as well how they present and monetize video content.

That said, I find many elements of their latest design to be in flux – caught between where they were, and where they perhaps want to go. However, the Article page has taken a distinctive new turn – One that is attempting to really adopt some core elements of an “Application focus” to it’s user. The page itself displays quite different from a typical article page – in some instances, the execution fall’s short. However, the ideas built into this are uniquely new… they will be fine tuned… and I suspect that over time, both user’s and the search engines will really dig this.

The icons above represent the “Key Zones” that msnbc believes will respond to a user’s intent – To me, this is both the most important and radically new design element – as well as the one where the execution falls sadly short. Currently, I see these as too small, thus their importance is not fully or quickly realized. This as an easy fix – I would size & treat them more consistent with the icons you see on the welcome screen of a typical smart phone.

Which brings me to why I think these are so critical. They serve to illustrate what options a user has with any given piece of content. The corresponding icons only exist when the particular consumption layer exists within a given story / topic. That said, this also assumes that the users intent is to either, Explore, Read, Interact, View, Watch or Discuss. The icons function as fixed anchor points attached to the right side of all articles that link users to the important “Zones” needed to tell a specific story, or elaborate deeper into a given topic. The page has then been broken up into series of stacks that focus on that particular layer’s intent – Often, it then provides a deeper level of function within. Rather then force a user to link out to different pages – everything that has to do with their stories can be accessed from this constant point of entry.

The screens below illustrate the various consumption options that I found by visiting the key zones with in the single article: The Blagojevich Trial: Now What

Example: Read the Story…

The page on arrival has been ultra simplified. The headline element uses a super-sized font, as well as seemingly print style use of negative space around it. I have heard many folks comment that it is a great waste of space. However, it is quite clear where you are – both on the grand scheme as well as relative.

Example: Watch a video Segment…

A simple clutter free display – however, users can consume in a variety of ways. Simply watch the embedded segment or…

• Access more on the Specific topic via the play list to the right of the video
• Access more from the “Today Show” series or a parent level topic via a tabbed drawer below
• Access a full text transcript of the show via a tabbed drawer below

Example: Dive deeper to watch more from a given topic

As suggested above – below illustrates the simplicity of how you dig beyond the Blagojevich trial. By clicking “show more” – the drawer opens to expose more segments in the parent category of Crime & Courts. Also available is short list of the Most popular segments – An even more general way to find other pieces that may be of interest. What is key, is with it’s direct focus on Video as a consumption choice, it allows the design to build in multiple layers to be accessed from a finite choice of options.

Example: Walk through an interactive time line of events or info graphics

This can be as simple as an inline gallery of large photographs – or a tabbed body of various image based storytelling. Each serve to bring you closer to the story / topic of interest.

• A chronological photo essay
• A local news video of Blagojevich’s reaction to the verdict
• A Cast of important characters, with photo reference & bio to each

Example: Discuss with others – or simply read what others had to say

A simple display allows a user to scan a short list of the type of responses the story has seen. From here you can drill deeper into a specific comment, see the list of all, or voice your own thoughts to the story in general or as a reply to a specific comment. Nothing here is revolutionary – but it follows the consistent theme of multiple layers accessed via direct paths.

Example: Explore more on msnbc

A new and interesting data visualization that provides a dense dashboard of possible links. By mousing over any of the far left base level categories, the users see’s a list of topics based on the total number of stories published in the past 24 hours. Then each topic is distilled down further to reveal the latest headline per topic with a corresponding bar chart to illustrate how it has trended throughout the past week.

This not only houses a great deal of content, but it also serves to allow users to visually see the high level topics as well as key stories in each section providing a quick overview, or “getting caught up at a glance”.

An interesting Easter egg: The homepage in every page

On load, each article displays the standard masthead. However this is done by loading the page at a fixed vertical point lower on the page. Thus in addition to scrolling down, you can also scroll up. This can be a wonderful surprise to find having scrolled back up the page to reveal more key stories or to dive deeper into the main sections of the site.

Further, when a user mouses over any of the same base level categories – this reveals a deep dashboard for all sections, consisting of a lead item, list of top stories, 2 multimedia options & more topics on msn. This is in essence, the entire front door of the site accessed from any page in the user experience. Thus, in addition to the wealth of information already found on the specific story / topic – a user can also go from a narrow focus to a broad based one. These pages not only provide focus to the user – but also to the search crawlers.

For many, the verdict seems still out on whether they like this new design or not. My personal reaction is mixed on a number of points. However, most have to do with the specifics of how details have been executed – ALL solvable things.

What I really admire, and bow my head to – is the fundamental shift in approach. These pages at face value do not try to be everything to everyone. However, it’s effort to zone the page based on core areas of user intent, reveals a more focused, far richer & more enjoyable experience One that empowers the user to access what they need, based on how they want to consume it.