BizMarx

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 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

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 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 (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

doubleTwist

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

Redwood City Electric

October 17, 2008

Redwood City ElectricI 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

Actel Marketing Intranet

September 26, 2007

Actel Marketing IntranetThe goal with this internal site was to keep the design similar enough to Actel.com so that it was easily recognizable as an Actel site, yet distinct enough so that nobody would confuse it for part of the public website.

My role: Design — 100% Code — 100%

View screenshot