// older work

This page showcases work prior to 2011 (-ish)...What happened to the last five years?!? Guess we've been a bit busy (all to the good!), and our site's been a bit neglected. Never fear, we're still here, plugging away. Here's a few places you can catch us that might be a little more up-to-date. Or check back, we'll be updating things here over the next year.

We love what we do, and we think it shows in the work we produce. Our favorite projects involve the entire project arc, from getting to know your goals and audience to building the most elegant solution that takes into account your scope within business, design and technology. We pride ourselves on having a through understanding of media--keeping up-to-date on best practices and standards.

Please don't hesitate to contact us, if you have any questions, or if you'd like to see anything else. Thanks for stopping by!

miACLU.org

This project started with a simple idea: the ACLU affiliates in California identified a real need for multi- and bilingual resources, and they realized they had information available that could directly impact the lives of people across the state. Building this website would allow the ACLU to extend its reach into communities whose civil rights were imperiled.

From this simple idea came the ACLU's first bilingual website: miACLU.org.

Not surprisingly, by the time the site launched, we had captured the attention of the national office, and several of the other affiliates.

Working closely with their Communications staff, my role evolved from that of UX Designer to de facto Project Manager. We worked strategically to refine audience needs, goals and scope as initiatives were introduced that changed our focus and the tenor of the project.

Strategy, Project Management, UX/UI, IA, Implementation (HTML, CSS, Drupal7).

Weetwoo!

Weetwoo!

Responsible for all aspects of design, branding and illustration for a fun and educational kid-safe video browsing app (now available in the AppStore).

The app was carefully designed to have image-rich, kid-friendly navigation that is simple to understand and easy to use.

Cisco Resource Center

Cisco Resource Centers // PCWorld | Macworld

These custom-built Resource Centers for Cisco were so successful, the client opted to expand the scope of the project, three times, more than doubling their presence on both sites.

Working closely with our CTO and our Design Director, I spearheaded the use of our newest internal toolset, and was the lead designer on this project. Among other things, this project required a combination of fully custom videos, PCworld and Macworld editorial, and advertiser-provided content.

As the main contact for design, development and implementation, I was responsible for managing the process from beginning to end, and served as the liason between Applications Development, Business Development, Sales, Editorial, AdOps, and the client. This was one of the biggest wins of the year for our whole team, and, for this project, I personally received commendation from my peers, supervisors and the CEO himself.

Design, implementation (HTML, CSS, jQuery, Eclipse, Subversion, Photoshop, Illustrator), UX/UI, IA).

Google Empire Mindmap

Google Empire Mindmap

In my role as Interactive Designer at Pcworld | Macworld, this was the first project I worked on that provided real interactivity with user.

Worked with a senior applications developer, an editor and a copy editor to create a JQuery mindmap from our editor's convoluted list of Google products, sites, and services. This project was complex, collaborative and more fun than I expected.

A number of ideas were thrown into the ring, and what resulted was this jQuery version--works on any platform, truly interactive, and conveys the massive behemoth that is Google.

IA, Design, HTML, CSS, and jQuery (adapting the existing code, with assistance from our developers).

IE9 Beautiful Blog

IE9's Beauty of the Web Blog

One of our first custom projects featuring the new custom publishing division of PCWorld | Macworld, Content Works.

Requirements included a custom ad campaign (roadblocks, custom and standard ad units), dynamic custom modules (that surfaced the content for certain browser/OS combinations), hosted blog, and custom content.

In addition to prototyping, designing, producing and implementing the microsite and the custom surfacer module, I was called up to train and document the local and remote team members in the new process workflow.

CES 2011 Program

This multipronged campaign served to increase traffic and inward paths to relevant edit, as well as creating new marketing opportunities for our advertisers.

The program included an editorial dropdown unit (running on news and other pages during CES), prominent placement on the homepage, and a new tag-based index page that would dynamically consolidate all CES content.

My role spanned from the very beginning of the project, with brainstorming meetings with Sales, Business Development and Ad Operations, to the prototyping, design, and implementation of the features.

Storus.com

Storus.com

Design, HTML, CSS, jQuery, Flash for Storus, a multimillion dollar site run by a local startup in the East Bay.

Branding

// NCOCA medal

Development and design of the 2006 NCOCA Championship Medals. Elements within the medal include: the California Poppy, the fish hook (for safety over water, and to indicate the Hawaiian heritage of the sport), and the NCOCA logo.

// OEI and LNS logos

Design and development of identity for two startups. In both cases, the logos needed to be flexible, corporate, and meaningful. Variations of each logo were developed to allow the client to adapt their identity as needed. Both projects started with loose sketches (with lots of input from the client), to become clean, readable shapes that work well in a variety of environments.

AMD Guide to Visual Computing

AMD Guide to Visual Computing

Like the IE9 custom solution, this project was a complex mix of client stakeholders and local and remote teams. With this project, we addressed deeper branding questions, and rolled out iterative changes to existing assets as we built this new site.

Interestingly, the time between builing the mockups for this project and implementation was long enough that our tools had changed considerably, and our client's focus shifted dramatically. After checking in with the client, we provided some quick mockups and iterative prototyping to match their requirements to the pixel. The second round of prototypes were almost identical to the final implementation.

Mockups, Prototyping, IA, Design, Implementation, some editing of Flash files.

Macworld Holiday Gift Guide PCWorld Holiday Gift Guide

Holiday Gift Guide // Macworld | PCWorld

Similar to the CES Program, the Holiday Gift Guides were created to provide users with additional entry-points to topical content and to give our clients additional relevant advertising opportunities.

Once again, we featured a dropdown unit that acted as a mini-index page, dynamically displaying the most recent content. There was also a dynamic tag-driven index page, using tools that allowed our editors to update content manually and dynamically. The homepage treatment was much more subdued, with simple navigation links working with the festive drop down unit.

From the very start, we worked hard to get the input of all stakeholders and scoped the project with user stories and meetings to review the prototypes as they were developed.

Prototyping, IA, UI design, Visual design, and Implementation.


PCW/MW Flash

Flash graphics for PCWorld.com and Macworld.com homepages.

These three examples were part of a value-add program offered to advertisers, allowing us to leverage a variety of print and online assets to amplify the advertiser's reach to our audience. All three ads were paired with print ad campaigns, newsletters, and custom online content.


San Jose Airport Flash Banners

Design and creation of Flash banners for San Jose Airport campaign.

The challenge with these two banners was to balance the need for parity (every airline needed to be fairly represented), while keeping the file size as small as possible and keeping the animation fluid. Used ActionScript 2.0 to implement clickTAG and to control playback looping. This project also included larger flash graphics (1920x1080, 1366x768) for use on LCD displays within the airport.

article graphics article graphics article graphics article graphics article graphics article graphics article graphics article graphics article graphics article graphics article graphics

PCW/MW Graphics

Responsible for a variety of editorial, promotional, and marketing graphics for PCWorld.com and Macworld.com (in addition to Flash graphics seen here).

In every case, these were on a tight turnaround, with no budget to speak of--good fun projects to keep me loose and creative. Over the last two years, I produced hundreds of these, and became the go-to person for edit and sales when they needed graphics.

Macworld Mobile Ad Macworld Mobile Ad

Macworld Mobile Ads

Design, project management, and production of print ads featuring Macworld's mobile offerings.

Managed the project from idea to completion, acting as the liasion between the Edit, Marketing, Business Development and Sales teams.

WorldBench6 Ad WorldBench6 Ad

WorldBench6

Planning, layout, and design of WorldBench6 ad. Managed tight turnaround and acted as liason between the Test Center, Business Development and Edit teams. This project presented the challenge of balancing very different messaging required by different stakeholders in one medium.