Introduction

Thanks for visiting my IA page, which includes a number of lightly annotated information architecture and UXD samples, as well as a few staged sites and prototypes.

I have directed dozens of information architecture and user experience projects over the past 15 years. This page highlights selected portfolio samples where I was the hands-on IA (as opposed to the outstanding deliverables provided by the many talented IA/UXD professionals who have worked for me over the years).

Today my focus is on helping the struggling news industry develop multi-channel publishing strategies and more effective digital discourse. It is an information architecture challenge that truly puts my skills to the test.

News site UI for The Alameda Sun (graphic design by Oksana Pankeviciene).

Personas

This is the only piece here that is actually someone else’s work, but I wanted to tell this story: in 1998 when I was the information architect for MS2 I had the opportunity to engage Cooper Interaction Design (we shared the same VC firm). While personas are often derided as “consultingware,” the most effective part of the Cooper engagement was the Personas document.I made sure that every one of the 100+ staff at MS2 had a copy of this personas page affixed to their cube wall. In meetings, in the hallways, or at a team lunch we spoke of the users in terms of “Jackie will need this feature” or “Ben won’t have the patience for this.” It was a wonderful tool for getting everyone user-centered.

I have continued to use personas in projects, but they often seem to be ignored after the initial delivery. The persona sample here is from the last set I wrote myself, for CommonTies in 2006. Personas at their best are a high-level summary of a thoughtful demographic analysis, so I now delegate this task to analysts with more patience than I have. I’m more of a wireframe and prototype guy myself, so let’s move on to those.

Wireframes

	iMedia Revenue Aggregation (2012) This is a hybrid specification document; it serves as both a spec for revisions to the aggregation system, as well as the wireframes and discussion around UI issues. I selected this as a portfolio piece because while it isn’t pretty, it documents both information architecture and technical design.
	DNAinfo Newsroom (2010) I conceived and designed the “Newsroom of the Future” for DNAinfo, serving as both IA and CTO. This particular document was created to help the editorial team conceptualize an improved newsroom interface as we went into late beta. The goal was to reduce the number of clicks required to complete the full news story workflow (the “85 to 16 Clicks” in the title was not quite literal, but was based on a comment made by one of the senior editors). Again, not as polished as the client-facing samples below, this typifies the communication style of a hands-on IA who is not “producing deliverables” but is in continuous collaboration with internal stakeholders.
	Cisco MAP Portal (2008) I served as both product manager and as IA for the Marketing Acceleration Planner portal, the jewel of Cisco Partner Central. The project involved the rebuild of an existing system by my company, a globalization initiative as the existing system had only been deployed in North America, and the integration of four other vendors’ systems as part of the total solution.
	Seagate Surveillance (2007) I was the primary IA for Seagate Technologies from 2005 to 2009, contracted through both Specific Impulse and Crimson Consulting. During these four years I managed a number of IAs, but also did hands-on wireframing myself, including this one for Seagate Surveillance.
	VerizonSurround Broadband Portal (2006) I worked as part of an agency team to develop the strategy for a broadband entertainment portal for Verizon’s 5 million DSL customers. The goal was to provide a showcase for the best in broadband content while building an active community. I started out managing the user experience effort, but stepped in as IA when my lead IA went on maternity leave. This wireframe therefore represents a collaboration, but it was such a challenging and sexy project I couldn’t resist including it.
	Brotherhood Mutual Insurance (2005) I served as contract IA for Brotherhood Mutual Insurance, designing their underwriting system interface as they moved from “green screen” to their first graphical interface. Talk about an easy-to-please audience! (Too easy to please in fact, as you’ll discover in the Prototypes section.)

Flow Diagrams

	Cisco MAP Portal (2008) Companion to the wireframes showing task flows for some of the activities performed in the MAP system.
	Seagate Partner Portal (2006) Sample task flows for the Seagate Partner Portal reseller site.
	Brotherhood Mutual Insurance (2005) This is a sample task flow to go with the wireframes for Brotherhood Mutual Insurance.

Site and System Maps

	Cisco MAP Portal (2008) The Cisco Marketing Acceleration Planner system map indicates which vendor is responsible for which components, and where the integration points are.
	Seagate Partner Portal (2006) The Seagate Reseller Partner Portal Site Map not only shows the pages and system flows, each node in the Visio diagram hyperlinks to the detailed wireframe document for that section of the portal.
	Brotherhood Mutual Insurance (2005) Brotherhood Mutual Insurance system map showing how the underwriting application is structured.

Prototypes

In 1999 I started creating what I called “clickable wireframes” because I found that many stakeholders needed a more visceral feel when reviewing interface designs. These HTML-based wireframes typically became incorporated into the early coding effort as prototypes.After 2006 I stopped doing plain HTML prototypes and switched to data-driven prototypes using an application server, embracing an Agile Development model. This came after realizing that clients rarely pin down the full set of requirements until they actually see the system forming (“I’ll know it when I see it…”).The Agile model enabled us to move quickly from wireframing to prototyping in the development environment. The result was faster dev cycles and systems that weren’t as prone to the “obsolete before deployed” syndrome.
	Brotherhood Mutual Insurance (2006) In 2006 I convinced the brass at BMI to switch from Visio wireframes to an actionable prototype, because the stakeholders were so delighted to move off of green screen terminals that they just rubber-stamped all my wireframes. So in order to get meaningful usability feedback (not just “this looks great!”), I moved to this prototype so that users could click things and really provide actionable comments.
	Seagate Usability Testing (2005) We used Veritest from Lionbridge Software to conduct multi-language usability testing in Russian, Chinese, and English for the Seagate Partner Portal. I created the 3-language test site, and users in APAC and EMEA tested the system, using the Veritest product which guides you through the correct path through the prototype. We then used the test results to iterate on the next generation of wireframes.
	Cephren (2000) A dashboard design for civil engineering software (large scale construction project management). This included my first use of pull-drawers (fly-outs) for progressive disclosure. (Note the bug in the display of the current year; it’s probably an old Y2K javascript bug!)
	Informix iAccess (1999) My first major IA job as an independent contractor, for my previous employer, Informix. This is an actionable wireframe (prototype) that was later used by the PSO team as a “starter template” for the Informix iAccess (intranet-in-a-box) product. Features role-based contexts (click the “Edit My Profile” button, select a role, and refresh the page).

Cool Sites

Feeling brave? Email me if you want to log into the sales demo. This is a walk-up interface; you should be able to use it with almost no training.	iMedia Revenue Newsroom (live) I spun off the DNAinfo newsroom technology in 2011 to pursue my vision of the “Newsroom of the Future” (with DNAinfo’s very gracious support) and to develop an integrated companion system that would be focused on the sales revenue side. The new system was reincarnated as a cloud-based, Software-as-a-Service model. It has been extended with interesting aggregation technology and improved interface models that enable even the most technophobic journalists to feel right at home. Sites running on the iMedia Revenue newsroom include http://GalwayIndependent.com and http://AvondhuPress.ie.
	DNAinfo.com “Manhattan Local News” (live) I was the first employee, CTO, and information architect of this news site founded by the billionaire Joe Ricketts (an interesting story in itself). IA highlights: an advanced tagging model where each tag can be promoted to a “knowledge node” with its own metadata, and a transparent collaboration model where stories are folders made up of components (video, images, text, audio, and links, aka “VITALs”). There is some cool stuff behind the scenes here. In May 2012 they expanded to include all 5 boroughs; during my tenure it was Manhattan based, with over 1.2 million visitors/month.
	The Conspirator Official Movie Site (live) Not a huge corporate site (just myself, a graphic designer, and one other developer). I was responsible for the design, a good bit of the coding (including Javascript and Brightcove integration) and all of the SEO work (type “conspirator movie” into Google and we’re the #1 listing, above the Wikipedia entry and IMDb.com). I have attached the wireframes because I thought you might like to see how they compare to the actual site. Fun fact: I was the moderator for Robert Redford’s blog.
	AllEire.ie (moribund) Developed in 2006, this was Ireland’s largest online business directory, and is my own personal experiment in both taxonomy creation and interface coding (I own the site, coded it, and designed the database and taxonomic model). It has a lot of interesting and occasionally brilliant pieces, but I include this not because it was a success (it wasn’t), but because I learned so much from it, especially from its many flaws.
	Perspecta, “The Information Architecture Company” (closed in 1998) I included this in part as a tribute to the late Steve Holtzman, my mentor, who was Perspecta’s president until he passed away from cancer in 1998. It was the second company founded by MIT Media Lab chairman Nicholas Negroponte (his first was Wired), and featured remarkable “fly-through information” interfaces. Among other things, my job was to find a practical use for them.
	Answers OnLine (1996) Firing up the Way-Back Machine, this is a snapshot of my first large-scale enterprise web property. The site included graphically rich branding and the ability to change language (you can flip from French to Japanese on every page!). Thankfully, I updated this to a more conservative yet far more practical design 6 months later.

Teaching

In 1995 I founded the Technical Communication program at UC Berkeley Extension, where I taught Digital Communication and Principles of Information Architecture until 2000. The handouts here are from early 1999.

In 2005 Seagate invited me to teach a two-day IA workshop for their web producers, developers, graphic designers, and web marketing staff. Back then, metadata management, especially controlled vocabularies and database-driven classifications, were hot topics for application success. As I reflect on the materials covered in that course, I am struck by how much has changed: Today even no-nonsense engineers have come to value the lessons of industrial design in the wake of Apple’s great success in delighting users. Cross-platform delivery (desktop, mobile, tablet) is having a great impact on application design: we cannot design for one device any more. Users have become far more social and collaborative, which adds a new dimension to application design as the IA needs to consider not just how a user interacts with the system but how the user might participate with other users.