Cupcake Invaders: React Version

October 26, 2017

I’ve successfully recreated my Cupcake Invaders game for web using React and Redux. The original was build in Flash with ActionScript (and then converted to an Android native app).

Visit site

HTML Treemapper

October 25, 2017

A treemap is a graphical representation of tree-structured data. The rectangular chart is subdivided into rectangles for each node of the tree, with child nodes nested within it.

My goal with the HTML Treemapper app was to use D3.js to generate svg treemaps given inputted HTML content. The user can choose whether to a treemap that represents the relative size of each DOM element, or one that gives equal weight to each “leaf” node.

HTML often contains elements that have just one child. For example, an <img> nested within an <a> nested within an <li>. I chose to treat such elements as a single leaf node.

Visit site


May 4, 2012

BizMarx MockupBizMarx is a collaboration tool for lawyers and other professionals working with many iterations of documents. This project was a trial by fire for some of my newer UI design and develpment skills. I was responsible for designing the UI (from wireframes to skin) as well as building the HTML, CSS, and most of the JavaScript. This is where I fell in love with jQuery folks. It’s just so perfect for building the beautiful user interactions that you never dared to hope for.

Check out the wireframes.

The Hobart Building

July 26, 2011

Hobart Building websiteFisher Hill Properties, which manages the historic Hobart Building in downtown San Francisco, had a very outdated website in terms of both design and maintenance, so they hired me to do a revamp of not only but also they’re simple company profile website, In addition to a redesign, the project included setting up WordPress on both sites, so that the non-technical could update the site easily.

FHP was looking for a design that was elegant and classy, yet simple. Since their letterhead was done in Bembo, I settled on Times New Roman as the closest/easiest match for a web font. I chose a blend of patterns, soft gradients, and subtle drop shadows to keep the eye moving around the page. In the development phase, my goal was to take advantage of the new capabilities of CSS3 as much as possible. I was very satisfied with the result in the modern browsers, but, of course, even IE9 left me disappointed. Someday.

Go-live was not, of course, without a few hitches. A few words to the wise:

  • Before launching, check your server’s installed PHP version. If it’s less than 5, be prepared to turn off any fancy .htaccess tricks that your theme’s functions.php file contains. Otherwise you’ll get a 500 Internal Server Error.
  • Stay away from Yahoo Small Business hosting if possible. They suck in the following ways:
  • .htaccess file is not supported (no pretty permalinks)
    • Performance is poor
    • Mail can only be sent from the same domain (for Contact Form 7)
    • The MySQL database host is mysql instead of localhost as it appears to be
    • phpMyAdmin has to be installed in a directory within your site’s root. It is s-l-o-w

My role: Design — 100% Code — 100%

Visit site

Dainese D-Store San Francisco

July 5, 2011

The Dainese D-Store San Francisco is the flagship retail location for the Italian Dainese brand of motorcycle protective clothing and gear.

This website echos the look and feel of the Dainese corporate site, but with a greater design emphasis on information and social networking. The site was built with WordPress.

My role: Design — 100% Code — 100%

Visit site

All-Clad Redesign Proposal (school project)

November 12, 2010

All Clad RedesdignThe point of this assignment was to find a website with some major usability and design flaws and fix it up. I chose to redesign the All-Clad Metalcrafters site, which in addition to having clunky and outdated design, was violating some usability principles, such as placement of navigation and search, lack of consistent link style, improper content nesting, and more.

View the before and after

Actel Homepage

November 4, 2010

The purpose of redesigning the Actel homepage was to accommodate for the increasingly numerous and lengthy links, as well as to highlight video content. The video promo box is a smaller, more vertical version of the Coin Slider at The tabs, while having the drawback of only one tab visible at a time, save a lot of valuable homepage real estate and are a well-established web UI convention.

My role: Design — 100% Code — 5% (redesign)

View screenshot

MyTourSF (School project)

August 9, 2010

MyTourSF was a group project I worked on in my usability course. My teammates and I came up with the idea for a San Francisco tour-building application and took it from concept through testing, using the process outlined below.

  • User requirements analysis
  • Functional specifications
  • Information architecture
  • Mockups
  • Paper prototype testing
  • High-fidelity prototype testing

My role: Research, analysis & testing — 20% Design — 5%

View complete report

This piece was selected for the AAU 2011 Spring Show.

doubleTwist Podcast Search

February 21, 2010

doubleTwist Podcast SearchIn this project, I coded the front end for a podcast search page that loads inside the doubleTwist desktop application.

My role: Design — 0% Code — 100% (front-end)

View screenshot


February 27, 2009

doubleTwistThis project was a good old back-to-basics XHTML/CSS template slice-up. Web 2.0 designs are a lot of fun to code for.

My role: Design — 0% Code — 100% (template)

View screenshot