Motion design projects

AutoLife

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.

3 images

Red Rooster

From start to initial release, I was integral to the front-end development of an 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
Wireframes
Wireframes
 
Functional development
Functional development
 

State Asset Wars

In partnership with Xequals, I worked a cross-platform mobile game called State Asset Wars. Inspired by the popular trading game Dope Wars, it puts a dark satirical spin on national and international politics.

On this project I spearheaded the UX design, wireframing and prototyping and the screens. Functional prototypes were user tested with friends and acquaintances.

I was also responsible for development of the UI, and providing creative direction on that front.

5 images

skeletonclock.digital

My second personal website, skeletonclock.digital 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 JS/TS 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 JS/TS-based SVG animation. The backend of the site is powered by Silverstripe CMS.

3 images

EightyOne

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 JS/TS 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.

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 JS/TS 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.