Nov - Dec 2007, Jul 2009
Alumni Project
www.AlumniProject.net
Role: Concept, Layout/Interaction Design & Graphics, HTML/CSS, Back-End Dev
This is just a simple social-networking site I made because I wanted to keep up with everyone from my high school graduating class. It uses Facebook Connect and leverages their API to pull data from Facebook and allow users to login and answer questions about themselves. Others can then browse for users and see what they're up to and what their post-high school, post-college life is like.
Also includes an iPhone version for faster viewing and updating on the go.
Mar 2009
BigEatSF
www.BigEatSF.com
Role: Concept, Layout/Interaction Design & Graphics, HTML/CSS, Back-End Dev
A very simple implementation of Google Maps makes the popular article from 7x7 more interactive. The online magazine featured a list of the top 100 things to eat in San Francisco, but with only a list of food and restaurant names, it was relatively useless.
BigEatSF displays the list of restaurants, the items to order there as well as the restaurants' address and plots it all on a clickable map. The site also allows users to check off which places they've been to without needing yet another account to manage.
Jul - Oct 2007
FishEye
www.eFishDesign.com
Role: Concept, Layout/Interaction Design & Graphics, HTML/CSS, Back-End Dev
In an effort to speed up my web development process, I developed a few web tools to assist in file- and database-editing. FishEye is an entirely AJAXed version of phpMyAdmin which allows users to easily edit database information in place, without the waiting time of a page refresh per action.
The tool also includes the ability to store multiple databases and switch between them instantly. Additionally, it contains The Indexer, a file-browser-like interface to view all files within the root of a site, allowing file uploads, text editing of all text-based files and previewing of images.
Jan - Jun 2008
FishoftheBay
www.FishoftheBay.com/v1
Role: Concept, Layout/Interaction Design & Graphics, HTML/CSS, Back-End Dev
Rather than sign up for a standard blogging service, I did what I always do: I made my own. FishoftheBay is my personal blog. With a standard PHP/MySQL backend for displaying and adding posts, I additionally added the ability to email myself and automatically post text, images and links on the site. The parsing code automatically determines the type of post (such as if it's a link, a file, text, location, music, TV, etc.).
Jul 2008 - present
FruiTunes
www.FruiTunes.com
Role: Concept, Layout/Interaction Design & Graphics, HTML/CSS, Back-End Dev
There are a few sites out there that let you search for - and play - music online. The problem is in the interface - it's often overcomplicated, poorly designed and hard to use. So, I used a simple public search API to create my own music search site from scratch.
The result is a clean and simple user interface that displays album artwork, song lyrics and allows users to share songs and create playlists. Also includes an iPhone web version for access to songs on the go.
Jan - May 2007
GreekNet
www.GreekNet.org
Role: Concept, Layout/Interaction Design & Graphics, HTML/CSS, Back-End Dev
This site was the product of a small startup of mine that was accepted into the Wharton Venture Initiation program at Penn.
A social networking site modeled after Facebook but aimed specifically at fraternities and sororities, GreekNet enabled you to connect with alumni and current chapter members outside your school and find jobs, friends, mentorships and events. GreekNet contains most of the core features found on Facebook but limits your scope as a user to those people only within your organization. Feature list includes profiles, groups, directory, photos, events, job board, forum and more!
Demo: user: test@greeknet.org, pass: test
Feb - April 2008
MacWeb Toolkit
www.MacWebToolkit.com
Role: Concept, Layout/Interaction Design & Graphics, HTML/CSS, Back-End Dev
This project is essentially a web GUI toolkit that allows you to create elements that mimic the look and feel of Mac OS X and a foundation for developing a web-based operating system. Heavily and generically programmed in a mix of PHP & Javascript, the system allows for module development solely in PHP and translates it to XML and HTML.
The nifty part is twofold: (a) that the interface looks like a Mac and (b) there's an entire underlying framework for module development that makes them really easy to make.
Read More
May 2006 - May 2007
Virtual Gradebook
www.TheVirtualGradebook.com
Role: Concept, Layout/Interaction Design & Graphics, HTML/CSS, Back-End Dev
The Virtual Gradebook allows teachers and students to communicate over projects and grades. It provides a simple interface for teachers to create a class, specify the grading outline and create/manage announcements, projects, homeworks and tests. Teachers can view individual student grades or a table of all the students and grades in the class and email grades to any number of students.
The site will also calculate class grade statistics including average scores, the median, mode, standard deviation and expectation (in case you're a statistics buff). Students can login to view their progress and see their current class grade.
The VGB came in handy for keeping track of grades and students when I worked as a TA for Intro Programming at Penn.
Feb 2009
American Idol for iPhone
iPhone Application Design
Role: Layout/Interaction Design & Graphics
American Idol approached an iPhone development team I was working with asking for a new proposal for their mobile iPhone app. This proposal highlights what I deemed as the core features of a mobile version of the American Idol series: contestant information, news and updates, photos, videos and more.
Each feature is designed to be perfectly consistent with native iPhone app interaction design and, having worked on the evangelism team at Apple, I followed the UI guidelines very closely.
May - Sep 2008
Apple
developer.apple.com/iphone/program
Role: Layout/Interaction Design & Graphics, HTML/CSS
As part of the Evangelism team at Apple, I worked on numerous projects within Apple's Worldwide Developer Relations group, including interface guidelines, WWDC keynotes and components of the Developer Connection website.
I collaborated with members of the web team to put together a new design of the iPhone Program pages which outlines the process by which new developers can get involved with ADC membership and iPhone application development.
For the interface guidelines, I collaborated with evangelists and technical writers to examine the current information architecture and restructure it based on a new conceptual organization surrounding user needs. This included breaking it into three separate sections: (1) understanding the iPhone platform, (2) developing a concept for an iPhone app and (3) learning the UI elements to use. In addition, I proposed creating a better user experience through popup tooltips, interactive videos, more in-depth imagery, shorter paragraphs and more whitespace.
Jan - May 2006
CG@Penn
dmd.upenn.edu
Role: Layout/Interaction Design & Graphics, HTML/CSS, Back-End Dev
The Digital Media Design program at Penn needed a newer, more current branding and website, one that would encompass all of the Computer Graphics @ Penn programs and entice prospective students to apply.
The goal of the redesign was to provide a sleek, attractive and informative website for the program I have a degree from. The original site wasn't terribly pretty or usable and it was difficult to find information about the program.
The result is a super simple interface that unites all graphics programs at Penn and provides an easy-to-read interface for finding information. Additionally, I added backend functionality to allow all the students in the program to create profiles and image galleries. Their personal work is then displayed randomly on other pages throughout the site. Administrators can easily add and remove users as well as update announcements.
March 2009
Custom Ink on iPhone
iPhone Application Design
Role: Layout/Interaction Design & Graphics
A small tattoo company with a large collection of designs and artists approached the iPhone development group I was working with and asked for a proposal for a would-be "tattoo catalog" for its mobile users.
I created this proposal for them which featured a photo-like browsing of artwork, organized by artist, style and location. Users could then drill down to see the background information of each artist or style, bookmark the ones they like and visit one of the many tattoo shops to have them made.
July 2009
Eventbrite
www.Eventbrite.com
Role: Layout/Interaction Design & Graphics, HTML/CSS
Eventbrite helps businesses & organizations of all sizes manage, promote and sell-out their events. Everyday, thousands of people visit the site which hosts tens of thousands of events. But their original homepage wasn't conveying their image as best it could.
They asked me to design a better homepage that would better illustrate their brand proposition. The result focuses on Eventbrite's central positioning for both event-creators and event-seekers. The page highlights local events and companies using the service and provides a better, simpler overview of how it works.
Additionally, I designed an iPhone app for event administrators to keep track of their event information and event attendees which is currently in development.
Feb 2010 - present
www.facebook.com
Role: Concept, Layout/Interaction Design & Graphics, HTML/CSS, Back-End Dev
I work on the product design team at Facebook where each of us own various parts of the site and its properties. Working with UI engineers and product managers, I conceptualize, design and develop new features and interactions as well as help evangelize the platform to third party developers.
In my opinion, much of the interaction that Facebook provides is rather artificial, in terms of relationship building. I'm using this opportunity to really explore how to help people be more open and honest, connect with each other through meaningful things and develop stronger bonds.
Feb - Mar 2009
Gigotron
www.Gigotron.com
Role: Layout/Interaction Design & Graphics, HTML/CSS
Gigotron lets you find live concerts in your area. A companion to a previously developed and popular iPhone app (which I'm now redesigning) the website aims to provide the same gig information as well as a more personalized/customized experience.
Still in alpha stage just in time for SXSW, the site currently features gig listing and filtering but soon will be fully developed to include all sorts of data about gigs, artists and venues.
Gigotron won a Web Award at SXSW 2009 and was a finalist at the Accelerator event! The site design was also featured on Six Revisions through Digg.
Jul 2009 - Jan 2010
www.google.com
Role: Concept, Layout/Interaction Design & Graphics
As a member of the user experience team at Google, I had the opportunity to design a few features enhancing search quality. Working with Google Squared, I devised new interactions including extracting events and highlighting answers in snippets, among other things yet to launch. Additionally, I worked on webmaster tools and collaborated with the search design team on Google's visual design, strategies for search in the future and helping define its design brand.
To me, it seemed that design at Google wasn't so much about the visual presentation as it was about the functionality and getting users to the data as efficiently as possible. Though an interesting field for its scientific approach, I felt aligned with a different philosophy - one that focuses on a design branding and doesn't rely entirely on data.
Nov 2009
LMT Mobile
www.lmtmag.com/m
Role: Concept, Layout/Interaction Design & Graphics, HTML/CSS, Back-End Dev
One of the most important aspects of the business of LMT Magazine is its several annual trade shows. With a new website and backend database in place, it was easier to store and display information about trade show exhibits, speakers and clinics.
The iPhone web version of the site allows event-goers to browse, search for and read about the clinics, speakers, companies and clinic locations while they're at the show.
This was developed using the basic IUI framework and appending additional functionality for a floating tab bar footer.
Jan - Jun 2009
LMT Communications, Inc.
www.lmtmag.com
Role: Layout/Interaction Design & Graphics, HTML/CSS, Back-End Dev
LMT is a business strategies trade magazine for dental laboratory decision-makers. In an effort to promote their online presence, they needed a fresh redesign of their outdated website as well as databases to store article and circulation information.
The design of the new site is based loosely off the magazine's design and features an effective use of whitespace, clean and clear navigation and a more organized layout.
The project also involved the creation of a database and administrative tools to contain information about articles, trade shows, staff and forum topics.
Additionally, an iPhone web version made specifically for trade shows allows event-goers to browse, search for and read about clinics and speakers while they're at the show.
Mar - Jun 2009
Milo
www.Milo.com
Role: Layout/Interaction Design & Graphics, HTML/CSS
Milo combines a breadth of web technology to bring consumers well-rounded information on products available locally, including product specs, customer reviews and nearby locations to buy the products.
Though they were retrieving data, Milo desperately needed a redesign to make the site more efficient and to help build their brand. The redesign provides a much cleaner, more organized layout that makes browsing the site a lot easier.
A restructuring of the information architecture also emphasizes connecting people to their local shopping community and providing them with the best product information. A variety of custom store logo icons were also created for the interactive maps.
There's also a handy iPhone app.
Apr - June 2009
Milo on iPhone
iPhone Application Design
Role: Layout/Interaction Design & Graphics
In order to help gain a better following in the more personal, mobile space, I suggested that Milo, the website made to find locally available products, create an iPhone app too.
The app features the same search functionality as the site, allowing users to find a specific product of interest, and then lets them view all its reviews, product specifications and details.
Additionally the app shows the list of local stores that have the product in stock and offers a map view based on their current location. It also remembers products you've recently viewed for easy access later on.
Nov 2008
Quantcast
www.Quantcast.com
Role: Layout/Interaction Design & Graphics, HTML/CSS
Quantcast is a website based on viewing the statistics of other websites, their prime focus being to analyze sites in order to obtain accurate statistics. With all the data they have to present, they needed a clean and easy-to-use interface that presented information in a consistent style and made use of the browser's space.
I worked as a contract designer to help them rethink the layouts of their main pages. My redesign gave a restructuring to the main pages, yielding more room for data, a more spaced-out layout and a more defined navigation that hightlights the various services Quantcast has to offer.