FutureBrand

FutureBrand image
FutureBrand image FutureBrand image

FutureBrand is a global leader in branding and marketing strategy, but it still has the atmosphere of a youthful start-up. Under the sure handed direction of their creative directors, the design team turned everyday clients into exciting and fun brands. While there I worked on some great accounts such as London & Country, Vizient, and the website for FutureBrand itself.

Made with: Craft CMS, Bootstrap, Yeoman, Lighting Beetle static site generator

futurebrand.com

Living Map transport

Living Map transport image
Living Map transport image Living Map transport image Living Map transport image

For our Living Map London map, we wanted to give the pedestrian user some quick and easy transport information. TFL now provide many open feeds, but in a variety of formats and with limited hit rates. We decided to ingest the various TFL feeds and provide our own API which our map users could hit as many times as they wanted. I built the cycle hire, bus Countdown, and tube line and station status APIs in Node.

Made with: Node.js, Leaflet.js, TFL feeds.

This is Cleveland

This is Cleveland image
This is Cleveland image This is Cleveland image

Cleveland needed a searchable map to highlight its businesses and attractions. We built a great looking map which reflected the city’s vibrant branding, and used Elastic Search on top of our geo-database to manage the search. I was responsible for all the frontend interaction with Elastic Search - sending search terms, receiving results and displaying them; and I also wrote unit tests using Mocha.

Made with: Node.js, Leaflet.js, jQuery, Underscore, Mocha.

map.thisiscleveland.com

Downtown Vancouver

Downtown Vancouver image
Downtown Vancouver image Downtown Vancouver image

At Living Map we created a branded map just for Downtown Vancouver. Designers and GIS developers took the city data and created map tiles specific to each zoom level. I wrote Javascript to display the map and load business information in popups, with a separate design on mobile; and the location finder. I also wrote shell scripts to deploy the latest code to AWS with Git, configured the Nginx server and kept the Node process running with PM2.

Made with: Node.js, Leaflet.js, Jade, Gulp, Nginx, PM2.

downtownvancouver.livingmap.com

World Aluminium

World Aluminium image
World Aluminium image World Aluminium image World Aluminium image

The new site for International Aluminium Institute, including CMS, blog and advanced statistics section. Later additions include an image gallery and embeddable widgets.
I lead the front end build and QA, tested various JS charting libraries and created wireframes.

Made with: Django CMS, Flot.

world-aluminium.org

Skullcandy Supreme Sound Journey

Skullcandy Supreme Sound Journey image
Skullcandy Supreme Sound Journey image Skullcandy Supreme Sound Journey image Skullcandy Supreme Sound Journey image

An HTML5 scroll path journey to tell the brand story of the Skullcandy Supreme Sound range. A looped path follows a headphone cable on a journey through product features, brand ambassadors and hero products. Along the way there are videos, wallpaper and music downloads.

I made a prototype to test for performance, and most of the front end build. I translated the vector path designed in Illustrator to a set of instructions for for the Scroll Path library, and implemented rotations and bezier curve path movements to elevate this HTML5 experience. This website harnessed brand new techniques and was first to market with these. Mouse tracking parallax lens flare elements on the ambassadors add another level of depth to these screens.

  • Lovie Awards 2013 Shortlist - Websites - Best Navigation
  • Webby Awards 2013 Nominee
  • Awwwards 2012 Site Of The Day
  • FWA 2012 Public Shortlist
  • Communication Arts 2012 Web Pick Of The Day

    Made with: ScrollPath.js, HTML5Preloader.js, Plax.js, CSS3 transforms, LESS.

Defected Records

Defected Records image
Defected Records image Defected Records image Defected Records image

I lead the front end build and QA, specifing what frameworks and technologies to use. I created IA diagrams, a functional specification and wireframes. I also specifically built the front end for the slide editor, which was based on Django admin and allowed the content manager to see what the multi-box slides would look like as they were putting them together. Later we built a full e-commerce implementation for them using Django Oscar, an opensource ecom framework for Django.

Made with: Django CMS, Django Oscar.

defected.com