Fisher 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 hobartbuilding.com but also they’re simple company profile website, fisherhillproperties.com. 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

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

The 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

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 Workshop.rs. 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 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.

In 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

This 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

I designed and created the Redwood City Electric website with a CSS layout and a Flash slideshow displaying the company’s work as the centerpiece. In the Projects section of the site, a variable in the HTML code tells the Flash movie which frame to show.

My role: Design — 100% Code — 100%

Visit site

This site was my first in-depth work with the WordPress platform. I explored the many ways that wordpress can be customized to fit the needs of the client, both through the use of plugins and through PHP code modifications.

My role: Design — 100% Code — 100%

View screenshot

Working on the atalanta site was my first experience doing front-end for an ecommerce application.

My role: Design — 50% Code — 50%

View screenshot