React 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 ˅

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.