Web projects

Marketing design system

An online brokerage underwent a rebranding; as part of this I was engaged to redesign some of their marketing sites, in the process laying some groundwork for a new design system to go with the new branding.

I redesigned two sites, creating common components in the process for reuse across mobile and desktop, with accessible dark and light modes.

6 images
Home page - mobile
 
Browse all jobs - mobile
 
Job detail view - mobile
 
Browse all jobs - desktop
 
Job detail view - desktop
 
Home page - desktop
 
Content page - desktop
 

Cars and Jobs

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

I was responsible for overhauling the design, structure and layout of the site. In addition, I was took charge of front-end development and directed an external team of back-end developers.

7 images

AutoShow

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

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

Bridge

Bridge was a startup developing a web app for tradesmen and contractors to manage their workflow. They contracted me as a front-end developer to help get them to MVP and beyond.

With my background in design, I was able to refine the look-and-feel of the existing codebase to bring it in line with the designers’ vision, while adapting the designs where necessary and providing suggestions and feedback to the designers. In addition I worked with other front-end and back-end developers to fix bugs and build new features for launch.

5 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

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.

Remarkit

On behalf of Xequals, I oversaw the design and development of a responsive web app for Remarkit, an IT equipment recycling company.

Remarkit needed a portal for their clients, including major telecommunications businesses, to manage the reselling of refurbished devices such as smartphones and tablets.

I helped scope the solution and was responsible for wireframing, some visual prototyping and all the front-end development, in liasion with a developer from Remarkit who built the back-end.

Key features of this app include ordering and order tracking, reporting and custom client theming. It is fully responsive, to be accessible both on-site and in the office.

5 images

In the Bag

In conjunction with iLuvNZ.co.nz 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 JS/TS 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
Job tracking page
 

Prod

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 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.

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