Branding, Graphic Design

ttv-story-bannerTechTV was a 24-hour cable and satellite channel based in San Francisco featuring news and shows about computers, technology, and the Internet. In 2004, it merged with the G4 gaming channel which ultimately dissolved TechTV programming. At the height of its six-year run, TechTV was broadcast in 70 countries, reached 43 million households, and claimed 1.9 million unique visitors monthly to its website. A focus on personality-driven product reviews and technical support made it a cultural hub for technology information worldwide, still existing today online through its former hosts’ webcasts, most notably the TWiT Network and Revision3. Digg was also started directly out of the ashes of TechTV’s demise; Kevin Rose asked his audience to check out his new website during what was to be the final airing of the Screen Savers.

More about TechTV can be found on Wikipedia

I worked at ZDTV/TechTV from 1998-2004, almost 7 years. I began as a web designer, embedded alongside a team of broadcast designers where, along with my duties as a lead designer for the web, I also contributed to broadcast/on-air projects as an Art Director and Sound Designer/Composer.

This portfolio serves as a partial history of the station as well as a curio for the deceased channel. It also provides an interesting and amusing glimpse into how primitive the web was in those early days, as well as how much design sensibilities of the online world have grown beyond the “tech” aesthetic that was so pervasive at the turn of the millennium.

NOTE: I’ve been told by several of my close friends that this stuff is ugly and I should take it down. But let’s pause for a moment and realize that this was 15 years ago and we were designing for dialup modems! It’s not reasonable to apply today’s design standards to what was then a primitive and emerging medium. I prefer to enjoy and marvel at the contrast between where we are now and honoring my history as a designer. I think it’s important to look back on the awful things you do while you are learning, and since “web design” as a craft has gone through so many radical evolutionary phases while all of us were trying to figure it out, I feel there is a valid reason to leave it here.

As Design Director for Web Creative Services, I managed a team of technical and visual designers and provided mentoring across multiple projects. Reviewed in-coming proposals, project schedules, and budgets. Implemented global strategies for styleguides, intranet, applications, games, and automated image scripting. Collaborated with ad sales/internal promotions departments to create successful and unique web campaigns for clients such as Microsoft, Dice, Circuit City, and others. Wrote creative briefs, design specifications, and styleguides. Provide strategic direction, vision, and scope on web-based projects, guiding definition of sites. Act as lead UI designer and provide functional requirements specification to engineering. Key stakeholder in the Branding and Marketing groups governing the TechTV brand positioning cross-medium. Some of the achievements for this role were:

• Won the ‘Standard of Excellence’ award by the Web Marketing Association (WMA) in 2002 (techtv.com)
• Won AWRT Kudo Award for Best Media Website 2003 (techtv.com)
• Led (Creative Directed) techtv.com’s website redesign to increase TV shows’ branding prominence, support time spent viewing goals, address long range advertising needs, and improve information retrieval for users.
• Continued increase in unique web visitors up to 2 million users a month.
• Drove competitive ad sales by offering bundled design services and securing deals with high profile ad clients.
• Designed automated image scripting process which allowed increase of overall production output and saved the company an estimated $80k annually.
• Designed look & feel and specifications of new templates which became G4.com post merger.

Techtv.com was the companion web site to TechTV, the on-air channel dedicated to the digital lifestyle.  Techtv.com was visited by 2.2 million unique visitors a month and publishes unique companion material to topics covered on the network.

After shifting TechTV’s programming to be younger and edgier, my team was tasked to redesign techtv.com to reflect these new brand attributes. We identified four major areas to improve. First, the show companion sites needed to better embody each show’s on-air brand and personality.  While on-air graphics for TechTV’s shows were beautiful and rich, the sites were predominantly gray with show graphics relegated to a small corner of the header.  Second, the current site relied on a single layout to display the wide range of content covered by TechTV’s shows.  The new site needed to support the different layout needs of these different shows. Third, we would need to address findability issues as past usability testing had identified users’ frustration when looking for information seen on TV. Finally, the new site would need to accommodate larger ad units.

My team gathered to explore high level solutions to these problems. We performed a competitive analysis on other TV companion sites as well as past incarnations of techtv.com. We studied past user research to gain perspective on the specific findability issues facing our viewers. To generate rough ideas for the new site, the teams broke into two smaller groups with a representative from each of our three disciplines – interaction, visual, and technical design. Each team generated ideas about what features would be on their ideal site. Next, the teams came together to share ideas. We knew that any successful features would need to be easily deployable and maintainable while also supporting the larger company goal of increasing viewers’ “time spent viewing.” A list of features were generated that measured against these objectives.

Over several weeks, team members selected from the list of features to flesh them out from their discipline’s perspective.  Interaction designers showed how we might address findability issues.  Visual designers explored solutions for increasing show branding prominence and dealing with ad placements.  Technical designers examined how using the box model and CSS could dramatically reduce the weight of our pages, which could be reinvested into larger show branding and content graphics.

Next, two teams were assembled with a representative from each discipline to create a more detailed vision for key pages of the future site. Each team borrowed freely from the ideas presented earlier by individuals and took a slightly different approach.  Both teams explored different navigation treatments, ideas for show branding, and a variety of interface elements.  Each concept was put in front of users and feedback gathered to inform our final design.

The final design would encompass several key features. First, modularity became the key to achieving our vision.  For rapid deployment and flexibility, our team designed a site composed of modules.  From a centralized catalog, producers could select a generic module that best fit their particular content need, populate it with content, and position it on the page. Similarly, a suite of templates for different page types like reviews, bios, and episode guides would be shared across all shows.  As with modules, producers could select from a centralized catalog of page templates, add modules to it, and then publish it.  No longer would all content be forced to use a single layout.  This gave producers the flexibility they needed for their show’s specialized needs, while allowing us to maintain a consistent layout for all elements.

Final Show Page Design
Using CSS, colors could be easily applied to text, modules and page templates to match the palette of the show’s on-air look and feel.  Tiled background images from the show’s on-air packages would be used to provide a rich, immersive feel to the site’s home page but layered over on pages where heavy reading might occur.

Prominence of the show’s branding and on-air personalities was dramatically increased and unified with the ad units to provide advertisers with a more integrated placement for their message.  By increasing the size and prominence of ads, we would be able to reduce the overall number of ad units on pages.

Once a clickable prototype had been built based on our final design, we tested the new site alongside the current site with target users. Users regarded it as a dramatic improvement on all fronts.  Key tasks such as finding something seen on TV were much easier on the new site than the current one.  Additionally, users rated the new site much higher in terms of satisfaction with overall experience.