Steve Cochrane

Hello! I’m Steve Cochrane, a web software engineer with a passion for design. I currently make websites for Blizzard Entertainment in Austin, Texas. Here is some of my recent work.

BlizzCon 2018 Virtual Ticket Website

BlizzCon 2018 Virtual Ticket: Video Player
BlizzCon 2018 Virtual Ticket: Video Browser
  • Role Engineering
  • Client Blizzard Entertainment
  • Date Fall 2018

BlizzCon Virtual Ticket is a premium online video product that provides access to live and archived video of all of the BlizzCon convention, to Blizzard fans around the world.

We wanted to make some big technical upgrades to the Virtual Ticket experience in 2018. Everything had been rendering server-side, with front-end asynchronous requests receiving large blocks of server-side-rendered HTML. This caused server load issues when there were traffic spikes, and it incurred costs as it required us to run more servers than necessary. We decided to offload a lot of rendering to the client.

I was charged with overseeing our React implementation for a team of five engineers. I started by researching to determine if reimplementing large portions of the Virtual Ticket experience with React was feasible with our resources, and it was. We then made a library of React components, all of them connected to a Redux state container. This workflow not only made for a more responsive interface for the user, but the component-based approach also made it easier for several engineers to work in parallel.

Diablo III: Rise of the Necromancer Website

Rise of the Necromancer: Book Cover
Rise of the Necromancer: Foreword
  • Role Engineering
  • Client Blizzard Entertainment
  • Date Summer 2017

This is the announcement site for Rise of the Necromancer, an expansion for Diablo III. I’m very proud of this one because it’s much more than just a brochure, it’s an interactive experience that really ties into the world of the game.

It also makes heavy use of CSS3 animation for a page-turning effect, and despite being heavily textured, it is (mostly) optimized for high-resolution screens and it scales to fit screens of any size.

World of Warcraft Website Redesign

World of Warcraft Website Redesign: Homepage
World of Warcraft Website Redesign: New Player’s Guide
  • Role Engineering
  • Client Blizzard Entertainment
  • Date Summer 2016

I was one of a handful of front-end engineers 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, and it’s built with reusable components, designed to function as predictably and independently as possible.

For the previous iteration of the site, there was a lot of repetition in code throughout, and a lot of minor variations on things, resulting in a lack of consistency and maintenance issues. We also had style guides in the past, but they never lasted long. So when we started, I identified living style guides as a way to solve these issues, researched best practices, and made our living style guide, along with establishing CSS and Less coding conventions for our team. It was the first living style guide at Blizzard Web & Mobile, and now all of our sites have one.

Diablo 20th Anniversary Website

Diablo 20th Anniversary Page: Masthead
Diablo 20th Anniversary Page: Diablo
  • Role Engineering
  • 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 technology that we were very comfortable with to turn out a high-quality page quickly and on schedule, with a very lean team.

HTML Reference API & Web Application

HTML Reference Web Application index view
HTML Reference API list results
  • Role Engineering, Design
  • Client Myself
  • Date Spring 2016

For personal development, I decided to get out of my front-end engineering comfort zone a little bit and build a REST API, for a theoretical HTML reference site. The API runs on Node and Express with a MongoDB database, and it has the standard CRUD (Create, Read, Update, Delete) operations available. There’s also a Mocha test suite, and API requests are cached for better performance.

I then made a simple companion web application for interfacing with the API, also with Node and Express. It has a central list for viewing all elements and form pages for adding, editing, and deleting elements, with error handling.

World of Warcraft: Legion Website

World of Warcraft: Legion Website: Masthead
  • Role Engineering
  • 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 engineer 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.

Andy Wowhol Website

Andy WoWhol form
Andy WoWhol display
  • Role Engineering, Design
  • Client Myself
  • Date Spring 2016

Andy Wowhol is a silly website that I made to get more familiar with Blizzard’s Game Data APIs, which provide game data for building World of Warcraft and Diablo III community sites. This was one of my first projects to use Node and Express.

The site is about as simple as it gets: you input your WoW character’s name and realm, it fetches the character’s avatar image from the API, and then displays it in four different color variations using CSS filters.

World of Warcraft: Garrisons Website

World of Warcraft: Garrisons Website: Masthead
World of Warcraft: Garrisons Website: Buildings
  • Role Engineering
  • 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.

Pixel Art Scrapbook Web Application

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

When I was looking to apply for my current position at Blizzard, their job listing mentioned experience with JavaScript MVC frameworks such as Angular, Ember, etc. as a nice-to-have, and I hadn’t used any of those before, so before applying I decided to improve my chances and quickly made this.

Pixel Art Scrapbook is 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.

Vidcaster Theme Editor

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

Vidcaster was a platform for building custom video websites, sort of like YouTube channels but much more personalized, with full control over site layout and with business-oriented features like pay-per-view. Some of our more famous clients included Airbnb and VMware.

Probably the coolest part of our platform was the Theme Editor, which was where you could choose from one of Vidcaster’s themes, customize colors and images, and make changes to any of the templates. All of these changes were immediately reflected in a full-size preview of the site.

Vidcaster Website

Vidcaster home page
  • Role Design, Engineering
  • 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 more impressive customer sites to build excitement and then demonstrate that visitors can build a similar website in minutes, for free, right away. There was a pretty strong uptick in new signups once this went live.

Vidcaster Video Player

Vidcaster Default player theme with Resolutions menu open
Vidcaster One Button player theme
Sharing functionality in the Vidcaster video player
Interactive transcript and captioning functionality
  • Role Design, Engineering
  • Client Vidcaster
  • Date Winter 2010 – Fall 2013

Being a video service provider, Vidcaster needed 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
  • Interactive transcripts

I also designed and built two custom themes, “Vidcaster Default” and “One Button,” and I made multiple contributions to the VideoJS core.

Vidcaster Webite Themes

Launch theme home page
Obsidian theme video page
Carbon theme home page
  • Role Design, Engineering
  • Client Vidcaster
  • Date Fall 2011 – Fall 2013

As a platform for building video sites, Vidcaster needed a large library of quality site themes that served a variety of different needs. I designed and built several of these myself while also being a resource for our network of theme design contractors.

Launch was one of the flashier Vidcaster themes and it was made with the introduction of a new product 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.

Obsidian was another public theme I made for Vidcaster. The idea for this one was to make something with dark colors by default, since all of our themes to that point had light color schemes, so I went with a central idea of “volcanic rock” and went from there.

Carbon was the last theme I made, designed for businesses with large video libraries. We went beyond our usual sorted-by-recency list and added ways to browse by show and category. There was also a focus on the content itself, with large promotional images and minimal design ornamentation.

Thanks for visiting!