Responsibilities:

• Approach projects with user-centered design methodologies in the execution of high-fidelity mockups and interaction flows
• Participate in ongoing discussion with product, engineering and other design partners to develop new solutions to complex discovery / consumption problems which convey ideas into tangible form
• Incorporate the CNET Visual sensibility in all designs, consistently and efficiently
• Quickly adapt to fast moving timelines and variable project requirements
• A passion for innovation with an attitude that good enough is NEVER good enough

Qualifications

• An amazing portfolio that can be viewed online. Any applicant without a portfolio will not be considered.
• Proven experience on mobile UX design and interaction requirements/specifications for iPhone, iPad and Android
• A strong understanding of modern web/mobile practices to create an efficient user-experience
• Ability to manage time and multiple deadlines effectively
• Ability to quickly execute hi-fidelity comps with a strong attention to pixel-level detail and craftsmanship.
• Awareness of the trends and technology in the mobile space.
• Full knowledge of Adobe Creative Suite.
• 3 years of professional work experience.

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!

We all have limited resources to solve the issue of access for a what is becoming an avalanche of both platforms as well as the size form factors in each. Lets face it, it is not just iOS and Android.

The hope at the most basic level was to create a product framework that is truly device agnostic for content, yet device or platform aware for the user experience. Our users have a relationship with us through these screens of various shapes and sizes. They access us both directly, or indirectly through search and the social graph. Thus, creators of media or utility can not rely on having a product on a single platform. Even content shared from a native experience will always lead to a mobile enabled WAP environment since you can not define what folks on the receiving end will have to view what is being broadcast.

So while this article will specifically walk through the visual design and function of our iPhone app – the most exciting part is that with our new framework, users will have a tough time distinguishing between our native app and the mobile site. The path we have taken is devise navigational paradigms, consumption sequences and touch behaviors based on the size of the form factor rather then to focus specifically on platform specific products. This frees a small team up to think about the best ways to consume a product in a 4″ 6″ and 9″ environment. To determine the features and paths that make best use given the spacial limitations and then develop and optimize the experience for each regardless of whether it is done in HTML or a native environment.

The iPhone app is our 4″ form factor – Similar to the tablet experience, we simplify the experience into 2 simple but distinct views – Discovery with aggregation – Consume with utility or access to a deeper experience. Thus upon opening the app (or the m.cnet.com) users are greeted with lead content curated by editorial. Folks can swipe left and right to see more of what editorial believe are the key stories / products that users may want to see. Below sits a list of the latest news, product reviews, videos and photo galleries based on the day’s publishing. At the base of the page, users can click to load “more” date relevant content.

In the upper left, you can access the main navigational drawer which allows you to distill the latest by a given topic of interest or content type. Once you have chosen, the drawer will close and reload your list view panel with the latest from the given selection

In the example above, I chose to see the latest for Tablets. My discovery view is now populated with the latest tablet content within CNET. However, for users looking for something more specific – you can access the filter function in the upper right.

Doing this will allow you to distill the explore experience further by “type” – reviews, news, photos or video content. Keeping our options to aggregate within these varied drawers allows us to maximize the available space towards surfacing as much viewable content within the explore panel.

A typical news story delivers a fairly standard article type led with large headline, date and author attribution followed by a quick summary of what is found below in the story. Within the article itself resides any specific art, charts and graphics that the editor used in the desktop product to better visualize their narrative. Share options are found in the upper right for folks to distribute or broadcast items of interest to their friends and social graph. (Far more features are planned for additional functions moving forward)

For folks who are looking for content at a more granular level, search sits at the top of the main navigational drawer. Once a user taps the text input, they are prompted with the keyboard to either enter something specific – OR – tap the Scan an item function to access the devise camera. (note: this function is the main functional difference between the m.cnet and native experience.)

For folks searching on a specific – the results deliver the latest available per the given query. However, the results can be refined further by narrowing these down based on the core content available on CNET.

Should you tap the “Scan an item function”, this triggers the iOS camera which then allows you to focus on a product bar code. Hold still as the result will take you directly to the CNET review of the specific product. A pretty nifty feature when you are in the store and hoping to walk out with a given gadget!

Folks familiar with a CNET reviews know the depth of coverage available. Mobile users are greeted by a short but sweet overview of the product. What it is, What it costs followed by our signature Good, Bad & Bottom Line. Much of our catalog has a video review which you can watch on the spot, or can simply swipe left and right to see a gallery of images which illustrate things about the gadget you may be interested to see.

Should you want more then just a summary – The top of each product review provides access to a deep dive of more comprehensive information such as the full CNET technical & editorial review. Each opens a new “panel” that allows you to read more without leaving the main page with it’s access to the other silos of information

In addition to the full CNET review, tech specs and buying information – we also surface the crowd sourced information of what our many users are always willing to share both with ratings and reviews of their own. Thus, you are never far from what either the experts or your peers think of the gadgets that we all love.

For our photo galleries, we reverse out the the content panel for a theater display. This maximizes the contrast to allow the photos the best opportunity to stand out. To get a closer look, tap the photo to bring up to full screen in a landscape view.

So there you have it – version 1 of our next generation mobile experience. However as I mentioned above, our goal was to solve issues of accessibility more broadly. As a result, this first offering is light on features by design. By insuring our ability to distribute more broadly, we hope to have quicker and more incremental launches that will not be limited to a few users – but available to our entire audience regardless of what screen you choose to access it with.

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.