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.

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