samizdat drafting co.

Allied Works/architectural portfolio

portfolioalliedworks.com
years2014 / 2017–

Based in Portland and New York, Allied Works is a multi-disciplinary architecture firm whose process is as distinctive as its buildings. Our goal with the portfolio was to let the imagery speak for itself, with a focus on sketches and design explorations as much as the finished products.

Each project tells a full story of abstract ideas and real-world constraints finding their synthesis in a new structure.

The entire catalog can be filtered and sorted through a live-search interface.

Bloomberg/visual data

prototypebillionaires index
years2011–2013

I served as both interaction designer and the development lead for the groundbreaking data journalism initiatives created by Lisa Strausfeld’s award winning Visual Data team at Bloomberg.

Once design lead Hilla Katki had created concept sketches and our team narrowed the datasets, I exhaustively explored the data, refined the visualizations, and designed the fluidly interactive user interfaces before building the final products—both front-end and back.

The Bloomberg Billionaires Index is a continually updated ranking of the world’s richest people. The data can be sorted and filtered based on demographics, industry, and family background. The different chart types give different views of the changes in the index over time."

The site was included in the Nate Silver-edited The Best American Infographics 2014 and can still be viewed at the prototype link above.

The Industry Market Leaders site provides an at-a-glance summary of the different industries in the world economy and the relative positions of the companies that compose them.

Color, scale, and ordering allow for the most salient information to bubble up.

Built in the lead-up to the 2016 election, the State-by-State dashboard showed the United States as a spectrum of fifty isolated states. Selecting a particular metric would reorder all the states, inviting emergent discovery of correlations with other attributes.

Critical Mass
Citibank/account dashboard redesign

year2015

When Citibank wanted to redesign the dashboard seen by credit card customers, I was brought in to explore new ways of visualizing cash flow, savings, and monthly budgets. Working with actual account data—and approaching it as a data-mining challenge—I transformed recurring financial patterns into visual ones and found ways to make the most salient events eye-catching.

These Sankey diagrams show an entire month’s spending at a glance, revealing the remaining balance in one’s budget (top figure) or flagging excess spending (bottom figure).

Making sense of day-to-day transactions requires understanding different categories of spending rather than getting lost among the individual charges.

These sketches group purchases by time and type, making clear both the cycles of recurring costs and ‘outlier’ events that warrant closer inspection.

This view shows the accumulation of debits and partial-payments over the months. New charges layer atop one another and payments cause sharp vertical decreases.

Unpaid purchases at the base are grouped by the time period in which the charges were originally made—using time as another way of understanding how far ‘behind’ on payments one may be.

pentagram
Diller Scofidio + Renfro/Not a desktop metaphor

presspentagram.com
year2008

This portfolio website for the artists and architects at Diller, Scofidio + Renfro was designed in collaboration with Takaaki Okada & Lisa Strausfeld at Pentagram and developed by me in Actionscript. The spatially organized, sortable user interface rides the line between unconventional and highly usable—pulling the viewer into an immersive world of imagery and 3D animations.

Projects can be filtered by category, allowing for simple, spatially memorable queries of the dataset.

Within each project is a navigable slideshow of photos, sketches, and construction details.

Pentagram
Ennead Architects/a reshuffled architecture portfolio

years2010–2014

The Ennead site was created at the end of the Flash era and eschewed the standard multi-page format in favor of a deck-of-cards metaphor. Projects, people, and topics were represented by dedicated cards which could be stacked, sorted, and shuffled as visitors navigated the site.

The entire content of the portfolio is displayed on the landing page. Clicking on a card or stack layers it atop the pile rather than navigating to a new page.

Projects could be filtered by location or type and then sorted chronologically and viewed one at a time.

Pentagram
Lincoln Center/dynamic wayfinding

year2009

The Rubenstein Atrium is a Privately Owned Public Space at the edge of the Lincoln Center canvas. It functions as both the Center’s box office and an event space in its own right. I prototyped the typography and motion graphics for a 40-foot-wide projection screen that runs along its main hallway as part of the signage project designed by Michael Bierut’s team at Pentagram.

When not in use for a film screening or live performance, the main display (in blue) provides a dynamic display of upcoming events.

In addition to cycling through all of the institutions that make up Lincoln Center, the animation loop featured subtle right-to-left animations and a persistent arrow motif to direct visitors toward the hallway leading to the main campus.

Pentagram
Museum of Arts & Design/Signage meets motion graphics

presspentagram.com
year2007

As part of their move to Columbus Circle, the Museum of Arts and Design commissioned Pentagram to create a graphic identity and signage system for the new space. I worked on the design of the video-based wayfinding system, which directs visitors to exhibits spread out over the building’s ten stories.

In addition to prototyping the animated displays next to the elevator on each floor, I contributed a grid-based exploration interface for exploring the full collection using a large-format touchscreen.

The media installations display the building’s layout spatially, focusing on the current floor and likely destinations for visitors deciding where to go next.

Users can tap individual objects to get more information, swipe between them, and filter the items by type or size.

New York Times/patient voices

articlestable of contents
year2016

Patient Voices is a series of interviews capturing the stories and oral histories of individuals living with a variety of chronic conditions. The key design challenge was seamlessly integrating audio recordings and slideshows into the text narrative.

Each page consists of several people telling their stories. The audio player I built smoothly transitions between recordings as the reader scrolls the page, creating a chorus of shared experience among the voices.

The pages are grouped by medical condition, allowing readers to find their own community of fellow travelers and realize they are not alone.

Our World in Data/matters of import

prototypehealth & wealth
redesignblog post
year2023–4

Our World in Data is a research organization within Oxford University dedicated to publishing articles and information graphics explaining the most significant issues facing the world today. My work ranged from creating custom visualizations in collaboration with researchers to designing and implementing new features for Grapher, the software that powers the site’s interactive charts and graphics.

Our redesign of Grapher focused on establishing a rational hierarchy of typographic and interactive elements, making charts easier to read ‘at a glance’ while also enabling deeper exploration.

I designed a consistent visual language for ‘details on demand’ and developed a web component that presents data values in the manner best suited to each of the dozen visualization types grapher supports.

informationart
Yale University/the new bagehot project

prototypewebsite
year2019

The Yale Program on Financial Stability aspires to prevent future financial crises by better understanding history. The website I built for their New Bagehot Project aims to catalog each past crisis and evaluate the policy response in terms of strategy and effectiveness.

Organized both by historical event and intervention type, the case studies in the catalog allow policy makers to view financial crises through either a diagnostic or prescriptive lens. The filter-based sidebar interactively narrows the hundreds of academic papers down to the most relevant subset.

When a single approach has been used in multiple historical episodes, the similarities and differences can be compared in a multi-column view.