JS projects

Cars and jobs

I was engaged by GNR8R to completely redesign and rebuild carsandjobs.com, 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
Scroll for more ˅

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.

Scroll for more ˅

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.

Visit site
The quick brown fox jumps over the lazy dog.
Scroll for more ˅

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.

The quick brown fox jumps over the lazy dog.
Scroll for more ˅

Red Rooster

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

Scroll for more ˅

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 on the front-end to manage transitions.

Scroll for more ˅

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.

Scroll for more ˅

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

Scroll for more ˅

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.

As lead developer, I helped scope and was responsible for all front-end development, wireframing and some visual prototyping. The web UI was developed entirely by me using AngularJS, 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.

Scroll for more ˅

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.

Scroll for more ˅

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.

Scroll for more ˅

cottonsoftdesign.com

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.

Scroll for more ˅

bencotton.net

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.