World of Warcraft Website Redesign

World of Warcraft Website Redesign: Homepage
World of Warcraft Website Redesign: Animation
  • Role Development
  • Client Blizzard Entertainment
  • Date Summer 2016

I was one of a handful of front-end developers who worked on a top-to-bottom redesign of the World of Warcraft website, in preparation for the launch of the Legion expansion.

The site follows a lot of modern front-end best practices. It's beautiful at any screen size. It's built with reusable components, designed to function as predictably and independently as possible. We also have a living style guide for an up-to-date inventory of these components.

Visit the live site

Diablo 20th Anniversary Website

Diablo 20th Anniversary Page: Masthead
Diablo 20th Anniversary Page: Diablo
  • Role Development
  • Client Blizzard Entertainment
  • Date Winter 2017

The Diablo franchise turned 20 years old on December 31, 2016, so we launched a retrospective site with lots of great imagery from over the years. I'm a huge fan of the franchise so I'm proud to honor its history.

There aren't any new processes or technologies on display here, but because of this, we were able to use a process and tech that we were very comfortable with to turn out a high-quality page quickly and on time, with a very lean team.

Visit the live site

World of Warcraft: Legion Website

World of Warcraft: Legion Website: Masthead
  • Role Development
  • Client Blizzard Entertainment
  • Date Summer 2015

I'm proud to say that I was given the opportunity to work on the announcement site for World of Warcraft: Legion, an expansion for one of the most successful games of all time. This was a very challenging and fulfilling project, with lush visuals and lots of video.

I worked with four extremely talented designers for the duration of the project, and I was the sole developer up until the last couple weeks when I had some additional help to polish and ship the site. The launch of the site was timed with our announcement of Legion at Gamescom 2015 in Cologne, Germany.

Visit the live site

World of Warcraft: Garrisons Website

World of Warcraft: Garrisons Website: Masthead
World of Warcraft: Garrisons Website: Buildings
  • Role Development
  • Client Blizzard Entertainment
  • Date Fall 2014

This was one of the first full pages that I worked on for the World of Warcraft website: a feature page for Garrisons, a big new feature for the Warlords of Draenor expansion.

The page was published in the lead-up to the expansion launch to build interest, with lots of in-game screenshots and information on all the new things you can do with your garrison.

Visit the live site

Vidcaster Navigation Redesign

Vidcaster admin navigation
Vidcaster admin navigation for in an alternate view when not enough horizontal space is available
  • Role Design
  • Client Vidcaster
  • Date Summer 2013

Vidcaster's navigation structure had remained essentially unchanged since its inception a few years ago and it was long overdue for an update. We started with an audit of all of the pages in the application, then we mapped out on paper a revised structure and where each page might go, and with that I iterated on visual design variations while collecting feedback.

The most common complaint about the previous design was that it took too many steps to move around the app, so with this design the sections can be expanded and collapsed for instant access to any page in one step. We also use a sidebar to optimize screen space for widescreen displays, and when there isn't enough space available we have an alternate layout with navigation across the top.

Vidcaster Theme Editor

Vidcaster Theme Editor: Themes View
Vidcaster Theme Editor: Basic Editor View
Vidcaster Theme Editor: Advanced Editor View
  • Role Design, Development
  • Client Vidcaster
  • Date Spring 2013

The Vidcaster Theme Editor is where you can choose from one of Vidcaster's public themes, customize colors and images, and make changes to any of the templates. All changes are immediately reflected in a full-size preview of the site.

Vidcaster Website

Vidcaster home page
  • Role Design, Development
  • Client Vidcaster
  • Date Spring 2012

The message we wanted to convey with this homepage redesign was not so much “look how great our product is,” but “look how great your video site could be.” So I chose to highlight some of our most impressive customer sites to build excitement and then demonstrate that visitors can build a similar website in minutes, for free, right now. There was a pretty strong uptick in new signups once this went live.

View the archived site

Pixel Art Scrapbook Application

Pixel Art Scrapbook
  • Role Development, Design
  • Client Myself
  • Date Fall 2013

A prototype of a web application for cataloguing pixel art that inspires you, for reference when you make your own. It uses Ember for MVC, Node + Express for a simple RESTful API and MongoDB for the database. The demo here is just of the interface and the back-end functionality has been disabled. You can make changes but nothing is stored. The full version is available on GitHub but you'll need to run a local Node server to use it.

View a demo

Vidcaster Video Player

Sharing functionality in the Vidcaster video player
Vidcaster Default player theme with Resolutions menu open
Interactive transcript and captioning functionality
  • Role Design, Development
  • Client Vidcaster
  • Date Jan. 2010 – Fall 2013

Being a video service provider, Vidcaster needs a world-class video player. To that end we worked with the Brightcove team, started with their excellent open source VideoJS video player as a base, and then extended it with the following new features:

  • Analytics integrations with Google Analytics and Mixpanel
  • Interactivity integrations with HapYak
  • Advertising integrations with LiveRail and Brainient
  • Social media sharing from within the player
  • An interactive transcript

I also designed and developed two custom themes, “Vidcaster Default” and “One Button,” and I've made multiple contributions to the VideoJS core which are in the process of being integrated into the next release. Some of the above customizations are also available as open source on Vidcaster's GitHub page.

Launch Theme for Vidcaster

Launch theme home page
  • Role Design, Development
  • Client Vidcaster
  • Date Summer 2011

This is one of the flashier Vidcaster themes and it was made with the introduction of a new site in mind. It greatly emphasizes one video in particular (perfect for an introduction or product launch) and all other videos are playable on a single page.

View a demo

Obsidian Theme for Vidcaster

Obsidian theme video page
Obsidian theme home page
  • Role Design, Development
  • Client Vidcaster
  • Date Summer 2011

Here's another public theme I did for Vidcaster. The idea for this one was to make something with dark colors by default, and for whatever reason I thought of the central idea “volcanic rock” and went from there.

View a demo

VidSF Website

VidSF home page
VidSF video page
  • Role Design, Development
  • Client VidSF
  • Date Jan. 2008 – Fall 2010

VidSF was an attempt to make local news interesting and relevant again. I was the sole designer and front-end developer, and I co-founded the project with Kieran Farr. We eventually decided to change focus and release the CMS we had built for VidSF as a software-as-a-service product, and that was how Vidcaster began.

The Little School Website

The Little School home page
The Little School's About Us page
  • Role Development
  • Client The Little School
  • Date Fall 2011

The Little School is a local preschool in San Francisco. They had a nice design ready and submitted from a member of their board, and I worked with the Drupal developers at AF83 to write the front-end code for a custom Drupal theme based on that design.

Visit the live site

VIDEOGAME

VIDEOGAME title screen and gameplay screenshots
VIDEOGAME mini-site
  • Role Development, Design
  • Client Myself
  • Date Apr. 2011

Videogames have always been a passion of mine, and once I found out about HTML5's canvas element I finally set out to make one of my own. This being my first game I decided to apply as many constraints as possible in order to ship something, so it's a Space Invaders clone.

While it's nothing special from a game design or visual perspective, it was made from scratch with JavaScript and it utilizes every HTML5 feature I could throw in there, including canvas (of course), audio, cache manifest support for offline play, local storage support for high score storage, and touch controls for mobile devices. It not only continues to work over two years later, it works better thanks to improvements in JavaScript performance.

Visit the live site