interface - html/css - data viz - etc

About my work:

My goal is to make humans more comfortable when they use technology. The purpose of a piece of technology is to improve our lives (whether it's a hammer, a computer keyboard, or an iphone app), and it should also be a satisfying experience overall. I'm here to help make those experiences more satisfying.

A responsive web-based wine and spirits inventory system for dealers and importers
I created a set of wireframes for an inventory tracking system to be used by wine importers and salespeople.

In addition to creating all of the interactions and flows, I was also consulting on many product decisions with this app, which started off as an iPad-only app, and we then evolved it into a full, responsive web app to function seamlessly on tablet and mobile too.

This is just a selection of a few of the dozens and dozens of screens I created for the front-end (dealer-facing) version of the product.



Freenters: a free printing service for college students
I created a set of wireframes for all pages in, which provides ad-supported free printing on campus, now active at one university and scheduled for launch at two more. The wireframes created the structure of logged-in & logged-out states for two different types of viewers (users of the free product and advertisers), and included the first release of the self-service product for advertisers, as well as the full product for free users.




iPhone app concept: a self-tracking health app
This is a set of mockups I created of a hypothetical iPhone app that allows the user to any quantifiable input. There are four screens:



New design for a biotech startup's public-facing website
I designed the new website for biotech startup 3Scan. Deliverables included mockups and sitemap, and other design details for programmer's reference.

My process involved discussing with the client what content they wanted to present, who their customerbase and audience is, and brainstorming the site's architecture and layout a few times on my own, and once with the client. Because of the company's diverse customer base and audience, we arrived at



Interactivity and architecture for an iPad app for travelers
I created a set of interfaces for an iPad app that helps travelers discover travel experiences using their social network. The app's content was to include a screen showing a map of the recommendations the user's friends had sent her, and a list of saved businesses and activities to do. The problem I helped solve was allowing the user to navigate from screen to screen, and creating a mechanism for discovering and searching for more businesses and activities. I sketched out a few different designs for a business/activity search screen, and iterated several times on all screens' designs to arrive at a top navigation bar that the user could use to access all parts of the app.

The Topnav contains liks to the app home (logo), San Francisco home (city logo), map view (push-pin icon), favorites/"saved" list (star), and business/activity search page (search bar). The map view shows all recs from friends, and saved items. The detailed popup for a business or experience is shown when the user taps on the name from the search page, the city home page, or recommendations from friends on the map. Users save recommendations/experiences to their "Saved" page by tapping the star in the corner of the business/experience popup.

Rather than showing the user a list of experiences plotted out on a map, we show the user their recommendations and plans on a timeline, or in a ranked list. When you're thinking of all things you're going to do in the next 2 or 3 days, you don't visualize them on a geographical map; you visualize them temporally, or organized by priority, or how excited you are about each of them. When you're deciding where to eat, or go drinking, you'll be happier with your choice if you sort your option by recommendation, or what cuisine you're feeling like. If you browse your options on a map, the only thing you're optimizing by is location, which isn't necessarily correlated to the best experience.



Concept: Google Maps as an educational map
This is an unimplemented idea. This is a conceptual design of an interface for Google Maps that would allow users to turn off the display of Roads, Cities, and States/Provinces, using checkboxes.

It would be great if Google Maps could be a place to learn about where countries and cities are in the world, so I made a mockup of what it would be like if it were possible for the user to declutter the map and remove all the noisy details, using checkboxes for Roads, Cities, and Provinces.

This is a feature that could be built into Google Maps' interface, or could be implemented as a Google Maps API app.


Concept: Yelp homepage, cleaned up for better dining-out decisionmaking.
This is an unimplemented idea. It's a simple, straightforward form where users can ask the question, "Where should I go for dinner tonight?"

I also cleaned up Yelp's homepage overall, to help users decide where to dine out, and more easily explore Yelp's wealth of information on businesses.
I removed some unnecessary elements:
I added addresses next to the businesses under "New Reviews Near You", to show how near to they user they're located.
I turned some clunky lists into tidy drop-down menus (current city, business categories, neighborhoods)
I took out yellow alerts box that says "Todays alerts! Feb 27, 2011", and moved all alerts (messages, compliments, new friends) to the top nav. The top nav is where users look for this kind of personal social news. The body of the page is for them to conduct the business that they set out to do.

Concept: Simple language changes on Facebook
Lady Gaga is not a page; she is a celebrity. Luke doesn't like pages, he likes people and companies and movies. Luke likes things, and the user might decide to Like some things, too, if they're presented as "things" instead of "pages".