Animation projects

Cars and Jobs

I was engaged by GNR8R to completely redesign and rebuild, a Canadian national automotive jobs and education site.

The existing site featured a dated design and unfocused content that was hard to navigate and poorly mobile optimised. In consultation with a marketing expert, I was responsible for overhauling the visual design, structure and layout of the site. Rather than arrange the content from the automotive industry's POV, I divided the site into three main sections - For jobseekers, For students and For employers.

In addition, I was took charge of front-end development and directed an external team of back-end developers. The front-end was initially built against a mock API from which specifications were derived and documented for the back-end developers.

Visit site
11 images


The Canadian International Autoshow is an annual event held in Toronto, Canada. I developed a promotional mobile microsite for GNR8R in conjunction with AutoLife.

Initial visual designs were provided by a dedicated designer. Though lacking a back-end, I built the site to be dynamic, taking into account the user's date/time and timezone to avoid showing past events and ended prize draws while the show was running.

Furthermore, I was solely responsible for the visual and UX design of the map function and shuttle timetables. For the map I designed an clickable floor map in an abstract modern style to blend in with the previous designs, while for the shuttle timetables I used public transport timetables as a reference for communicating times clearly.

6 images


AutoLife is a Canadian automobile and lifestyle site created by GNR8R as an antidote to pre-existing sites which were seen as having a singular focus, being very sales-driven and lacking in transparency.

I was brought in take over front-end development from an offshore team, and to develop the motion design of the site, build new features and maintain existing features. As part of this process, I created functional prototypes of the animation and features and consulted with dedicated designers.

Following the launch of the MVP, I took a greater role in the design of new features, leveraging and extending the existing design language to lay out and build new pages.

Visit site
3 images

Red Rooster

From start to initial release, I was integral to the front-end development of an AngularJavascript adaptive online ordering site for the Australian national fast-food chain, Red Rooster.

In the first phase I took responsibility for the realisation of the tablet/desktop UI, developing a custom touch-driven menu and user-flow, separate from the mobile user-flow.

On the basis of my performance, I took over as primary front-end developer on the second half of the project, being responsible for diagnosing and implementing all front-end fixes and enhancements.

3 images

My second personal website, was inspired in name and visuals by skeleton clocks - these are clocks where the ornamentation is provided by the innards and movements of the clock itself.

I designed the site as a stack of cards which is navigating using static arrow buttons and a set of tabs at the top of the page. Each card slides in or off from the side of the screen and contains a category of my works, which can be scrolled vertically just like any conventional page. I also included separate interstitial pages like plates in a book, as a canvas for interactive animations I had developed.

The whole site was built on the ASP.NET CMS Umbraco, with lots of modular Javascript on the front-end to manage transitions.

3 images

DOT loves data

The design studio EightyOne came to me with the ambition to make an "award-winning" website for their client DOT.

The site would feature advanced interactive animations, page transitions and visual effects, while still being fully responsive and functional on mobile devices and older browsers.

Through the project, I was involved in the design process and made key contributions to the animation design, interactivity and usability.

Implementation was undertaken solely by me using a variety of web animation techniques and technologies including WebGL for 3D animation, CSS animation and Javascript-based SVG animation. The backend of the site is powered by Silverstripe CMS.

3 images


EightyOne is a design and production studio with which I have had a long working relationship.

Due to my expertise in web and UX, I was involved early in the process of creating a website to represent them.

With my design input, they created visual layouts which I was then responsible for turning into a living, fully responsive website.

The final site was built on Silverstripe CMS, using a lot of custom PHP and Javascript code to adapt it to different devices. And to give the site visual dynamism, I incorporated CSS animations to make elements slide or fade in as required.

In the Bag

In conjunction with and Buy NZ, the digital production studio Xequals wanted to build a Facebook game to promote New Zealand brands.

Xequals brought me on to be involved in all aspects of the design and development process.

In addition to contributing to the multiple aspects of the game and interaction design, I was one of the primary developers, using the web game development tool Construct, as well as plenty of custom javascript and PHP to build the game.

The final game forms the basis of an active marketing campaign aimed at driving brand recognition and engagement, with the support of numerous local brands who contributed prizes for top players.

4 images


The production studio Prod required a new website as a point of contact with clients and potential clients. I helped them design and was responsible for implementing this site.

Due to the nature of their working partnerships it is not always possible to publicly present work they have done. So they decided to use the site to convey a sense of taste and open possibilities through the showcasing of interesting imagery. The site also included a secure area for clients to log in and view the progress of jobs for which the studio was performing work. For this I was responsible for both the UI design and implementation.

For this I implemented and laid out the functionality for displaying a different image and text each day of the week. And through the use of dynamic CSS and SVG graphics, I provided the means to coordinate the colour scheme of the site with the imagery, right down to the colour of the company logo.

4 images

Team Sports Australasia

Team Sports Australasia is a Nike sportswear distributor for the Australian and New Zealand markets.

I was responsible for implementing a new website design for them, from provided visuals.

For this I designed and implemented advanced interactivity to enable the browsing of products, display store locations relative to the user's location, amongst other things. Most of this interactivity was built to adapt to a wide range of devices, from desktops to smartphones. All of this was built on the Silverstripe CMS, using much custom Javascript and PHP.

This website build was deployed to form both the Australian and New Zealand websites. The finished Australian site in particular was commended by Nike itself as a model distributor website.

Greedy Grunters

For a startup I was involved in (Spoink Games!), Hungry Piggies was redeveloped as a 2.5D Flash game designed to integrate with Facebook.

In this instance I was responsible for the bulk of the development work, as well as some UI design.

3 images

To develop my web design and development skills, but also to showcase the design projects I have completed, I built my first website.

Through this website I wanted to present the broad range of work I had done to that point, and convey my experience across the whole design-development continuum. I also specifically wanted the site to be fully responsive as is expected from a modern website, and to express some of my aesthetic sensibilities.

The site design went through several iterations, and was built from scratch in ASP.NET, together with HTML5, Javascript, and Sass/CSS for styling.

2 images

For my third personal website (this site), I decided to focus on modern simplicity and good typography, with simple, clean motion design. The idea was to put the focus on my projects rather than distract from them.

I chose to develop it using NextJs (a first for me), to gain the benefits of both server-side rendering and isomorphic React development. In addition, I learned react-spring to implement natural looking animations in a modern way.

For testing and documentation purposes, I created a Storybook. You can view the Storybook for this project here.