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

Visit site
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

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.

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