Strategy

Background

Cisco's User Experience Standards team publishes interaction design and visual design specifications for use within over 50 Cisco applications and products, and provides reusable components that are implemented to this specification. Cisco is introducing a new unified cross-device/cross-platform look and feel. I was brought in to help update the specification and component library to reflect the improved direction.

Design

• Contributed to a 800+ page specification detailing the interaction and visual design of over 90 reusable components.
• Art directed the production of several hundred icons for the Cisco User Experience Icon Library.
• Created a complete Omnigraffle stencil toolkit to assist UE designers across Cisco with the task of creating high fidelity wireframes.

Build

• Provided research and guidance to Cisco application developers as they standardized on a common open source JavaScript library. A common JavaScript library assists with the implementation of increasingly complex Rich Internet Application interactions as required by product management. I advised Cisco on how to meet both the functional requirements, as well as non-functional requirements including maintainability, reusability, performance, compatibility with pre-existing toolkits, and other technical and aesthetic considerations and requirements.

Strategy

Background

Cisco's Executive Thought Leadership (ETL) site is used to showcase high value content published by Cisco's executive team. The interactive multimedia, research and white papers provided by the site are valuable to executive decision makers trying to determine how to use internet technology to transform their businesses. The ETL website suffered from a lack of coherent information architecture and visual hierarchy.

Design

• Created a site architecture that reduces the number of clicks required to reach high value content.
• Created a structured vocabulary that allows new content to be utilized throughout the site in new ways as the site architecture adapts to changing requirements.
• Collaborated with the UED team to establish and evolve and adhere to design patterns that will be reused throughout the company.

Build

• ETL is built with a custom content management system written in-house using Perl. I built the component templates used in the ETL redesign. These component templates were used by a three person development team throughout the redesign implementation.
• The structured taxonomy developed during the design phase was leveraged to create DHTML navigation components that allow users to filter content based on their interests.
• Designed, implemented and maintained a variety of intranet Web sites and tools, including the Office of the President intranet site, a graphical reporting tool, and RSS news feeds and archives.

Strategy

Background

The Google Maps UED team had acknowledged that the existing framework was beginning to see the strain of an expanding feature set that was unplanned for in the initial interaction design. New directions needed to be iteratively explored and tested in the usability lab.

Design

• Created multiple DHTML prototypes for usability testing of hover/click interaction of Google Maps information bubbles.
• Created many wireframes used to explore future interaction design direction.

Strategy

Background

AGIS was transitioning from a network of small regional web sites to a nationwide portal providing comprehensive eldercare information.

Design

• Working from sketches provided by the Creative Director, created multiple iterations of wireframes used for soliciting stakeholder feedback and refining the site design.
• Created wireframes that express the visual hierarchy and organization of navigation and content within each of the sites' page types.
• Prototyped the interaction design for search flows within the site for use in usability tests.
• Created redlines that document the visual design to assist developers in their goal of achieving a visually consistent implementation.

Strategy

Background

Seagate had recently redesigned and restructured their public web site, focusing primarily on delivering product related information. It was identified that there was increasingly a need to publish content that supports feature marketing.

Design

• Adapted the Seagate.com information architecture to create a scalable content framework for the purpose of publishing feature marketing content.
• Created a sitemap showing how feature marketing content would be integrated into Seagate.com.
• Created a series of wireframes used to solicit stakeholder feedback and as a reference for implementation efforts.

Strategy

Background

Citrix Advanced Solutions Group is charged with integrating technology from new Citrix acquisitions, while tying together existing Citrix technology to create new product offerings. Emergency Workplace creates a shared workspace that employees can access from any computer.

Design

• Created multiple mocks for exploration of potential visual design direction for Citrix desktop sidebar applications.
• Created the final production visual design for a desktop sidebar application that surfaces the most important information, resources and tools necessary for working through an emergency.
• Created the visual design for the web-based emergency management application that allowed for the administration of resources associated with emergency scenarios.

Strategy

Background

Previous data-driven marketing experiments had proven that marketing efforts intended to drive engagement by educating users about new or improved product features were significantly more successful when the message was seen as contextual and relevant to the users' task.

Objectives

• Create a standard promotional unit that can be used to educate users about new or improved features of any Yahoo! product.
• Feature Cues must not be perceived as advertisement.
• Feature Cues must be perceived as contextual and relevant to the user's task.
• Feature Cues must allow users to opt-out of repeated messaging. Must support additional business rules as requirements are identified.
• Must require minimal product and engineering team involvement to implement new Feature Cues on a Yahoo! property.

Design

• A strong drop shadow "lifts" the overlay content above the page content, giving the Feature Cue visibility in often crowded contexts.
• A consistent gradient and border treatment reinforce the feeling that the message is "official" and "from Yahoo!", and assists with avoiding advertising connotations.
• Feature Cues can be specified with precise position, dimensions and pointer orientation and offset, allowing the message to be placed in context without interfering with primary page content.

Build

• Targeting and user preference requirements were met by leveraging Yahoo!'s ad serving technology.
• To meet the visual design requirements, the YUI Overlay object was adapted for Scott Schiller's "Even More Rounded Corners" CSS. YUI's Overlay provides the contextual positioning support.
• Wrote additional code that allows the content and specifications for individual deployments to be expressed in a lightweight Javascript stub. This stub is inserted into product pages by Yahoo! ad servers.

Strategy

Background

Over the years, Yahoo!'s marketing managers have developed various ad-hoc link trading systems. Customer Contract Strategy created the Network Integration program to standardize and manage these systems.

Objectives

• Create an asset management system to support the Network Integration program.
• Create and implement a process that enforces high editorial and creative standards for promoting Yahoo!'s products, without requiring large amounts of training.
• Allow marketing managers to create, save, and edit new assets, and request approval for publishing.
• Allow reviewers to approve or deny assets.
• Allow ad operations staff to access approved assets in order to schedule them for delivery on the network.
• Enable the ability to quickly add templates and specs for new promotional positions across the network. Must be able to accommodate wide variations in style and markup.

Build

• The EDNA Asset Management System leverages AJAX to allow for real-time previewing of assets as they are created. Specifically, JavaScript Templates from TrimPath were used for live updates to the DOM. JavaScript Templates are variable substitution templates in the style of FreeMarker or Smarty*.
• I wrote all HTML, CSS, JavaScript, PHP and MySQL code for this system.

Success

• The EDNA asset management system currently has over 100 users.
• Soon after release, EDNA was used to create assets for an A/B test that contributed a 250% revenue lift for a Yahoo! property.
• EDNA has been instrumental in creating the Network Integration channel and in identifying pain points in the process and education opportunities within the business unit marketing departments.

Strategy

Background

As a result of log analysis, the Toolbar team had learned that although they have been successful driving new installs of the Toolbar, many users were going "inactive", and not using their Toolbar after it had been installed. Also, marketing resources were challenged to communicate the convenience with which Toolbar allows for navigating to Yahoo! properties.

Objectives

• Create a new Yahoo! Toolbar microsite focused on user engagement.
• Create a microsite flexible enough to adapt to shifting priorities and targeted campaigns.
• Establish baseline metrics for Toolbar engagement marketing campaigns.

Design

• Worked with Toolbar team to document content requirements.
• Created and revised a set of wireframes used to facilitate multiple rounds of feedback from a large distributed team.

Build

• Wrote all HTML, CSS and JavaScript used in this site.

Strategy

Background

Market research had determined that users would be highly interested in being notified about new Yahoo! products if the information was relevant and not overly intrusive. Our group decided to more thoroughly prototype several concepts that came from this research. These prototypes were then tested in the usability lab.

Objectives

• Create prototypes exploring implementations of a standard "What's New at Yahoo!?" widget that would be used for high profile official announcements of new Yahoo! properties or functionality.
• Create landing page and in-product prototypes to explore ways of introducing new products and functionality to users.
• Test the prototypes for usability and discoverability in the lab.

Design

• Created several prototypes for marketing vehicles that would be used for introducing new Yahoo! products.

Strategy

Background

A previous pilot project for new Yahoo! users had demonstrated that acquisition messages were being sent to new Yahoo! users for several weeks after they were likely to become engaged in new products. Specifically, high conversion rates were only seen during the first two weeks after registering with Yahoo!.

Objective

• The New User Program will attempt to engage users in the broadest set of properties possible within the first two weeks after registration.
• The program will emphasize the use of low or no cost ad inventory to drive the campaign.
• Themed ads will allow users to select categories of Yahoo! properties they are interested in.
• Landing page experiences should adapt to the users' self selected interests.

Build

• Built over a dozen landing pages that adapt to user interests using HTML, CSS, JavaScript and PHP.

Strategy

Background

Yahoo! Small Business had engaged Optimost for optimizing landing pages for search engine marketing (SEM) drivers.

Objectives

• Create a modular landing page template that can accommodate numerous minute variations to page assets.
• Identify Small Business customer segments and produce assets optimized for those targets.

Design

• Created the visual design for various assets used within the campaign.

Strategy

White Horse is an interactive agency based in Portland Oregon. I was hired by White Horse to represent the agency onsite at Cisco. I was instrumental in working with White Horse to propose and scope Cisco projects. I was responsible for ensuring White Horse designers and engineers were fully trained on Cisco's web guidelines and UED process.

Build

Designed and implemented Web sites (using HTML, CSS, JavaScript and PHP), email blasts and Flash presentations. Klein Design is a highly productive and creative small graphic design shop in Los Gatos, CA.

Strategy

Background

The DeAnza College website is created by a large number of authors. When I joined De Anza there were no processes or systems in place to organize this information and present it in a way that is relevant to the students, faculty and other users of the website.

Design

• Redesigned the DeAnza College website in accordance with Section 508 accessibility requirements.
• Created a site architecture that organizes the information published by the various departments throughout the school.
• Established guidelines and processes for the web team regarding maintenance of the De Anza College web presence.
• Created a site architecture that reflected the needs of the user segments that use the De Anza College website. Designed global navigation and audience specific landing pages.

Build

• Created reusable templates that allowed non-technical authors to publish content that complied with design and accessibility requirements.
• Improved website reliability and testing capability by separating development and production web server environments and implementing consistent push procedures.
• Deployed an email server, web based mailing list manager, online discussion forums and a search engine.
• Coordinated usability testing of redesigned De Anza College website.

Strategy

Social Venture Partners is an international network of non-profit fundraising organizations.

• Provided research regarding comprehensive web-based knowledge management and customer relationship management systems.

Build

• Implemented custom PHP/MySQL content management system for Cleveland Social Venture Partners.

Background

Lutris, Inc. was a startup interactive agency in Santa Cruz, California that built customized web applications using their open source Java/XML application server product known as Enhydra.

The primary innovation brought to web application development by Enhydra was a clean separation of presentation layer from the other layers of the application. This is what made cutting edge interactivity that Lutris was known for possible.

Build

• Defined Lutris' HTML, CSS and XMLC web development guidelines for dynamic Web applications using Enhydra.
• Collaborated with management and engineering staff to optimize web development workflow.
• Hired and trained web developers.

Background

Customatix was a group of inspired shoe guys out on the cutting edge of made-to-order mass customization of athletic shoes. Their collaboration with Lutris to create Customatix.com resulted in an exciting web application that was a crucial progenitor to wildly successful products such as Nike iD.

Every aspect of nine styles of shoes was customizable, allowing for literally billions of trillions of combinations of unique shoes created by the customer.

Build

• I collaborated on the design for the Shoe Designer Java applet and produced all HTML/XMLC code for the site.

Design

• Merged content from diverse sources to create a coherent partner portal.

Build

• HTML production for 1999 Adobe.com redesign.
• Implemented a forum that facilitates the exchange of technical information between Adobe InDesign developers.
• HTML production for partners.adobe.com