TCR Machining (est. 1996) is a machine shop in Burlington, Ontario that offers the latest in CNC machining and automation technologies. TCR hired me to create a new website for two reasons: the first to generate new business and the second to attract new talent. I worked closely with the client throughout the duration of the project.

The CNC machining business was foreign to me. Even having toured TCR's shop floor this was not an easy business to grasp for someone without an engineering background. Early on in the process the client and I discussed, at a high level, sections for the website. As a means of doing my due diligence, I looked to other websites in the industry, taking note of site navigation, pages, content, and layout.

Drawing on research and analysis of competitor websites and on client discussions, I started wireframing (first using pencil and paper then moving these into Whimsical). At this point, I had yet to receive content and images from the client. However, I did have their existing website as a resource. It was understood that I would be making several assumptions at this stage and that these wireframes were just meant to be a starting point for discussion and feedback.

Webflow's 21 unique design trends for 2021 served as a great resource for interaction design and visual design inspiration. In particular wanted to incorporate video, horizontal scrolling, fullscreen parallax scrolling, geometric grids, and bold typography.

Switched to wireframing for mobile as opposed to desktop. Started with moving hand sketches into Whimsical and then into InVision. In InVision attempt to mimic parallax scrolling of homepage sections, as well as a horizontal scroll within sections.

A mix of steel, CNC machining tools and parts, machining robots, German luxury cars, and German flag colours. Noticed TCR's logo fits with the rings and steel that are present in the logos for BMW, Mercedes and Audi.

Forma DJR, a neo-grotesque sans serif, was selected for headings for its boldness and retro yet modern feel. One of the typeface's most distinguishing features is its aggressively tight letter spacing true to late 1960s, early 1970s fashion. Neuzeit Grotesk, a geometric sans serif, was chosen as the body typeface for its simplicity and legibility. Fun fact, this typeface was once used for Germany's official signage and traffic directional systems.

Red and yellow were challenging colours to work with. Material design guidelines advise using lighter tones on dark themes because saturated colours can visually vibrate against dark surfaces. However, when desaturate TCR's colours become baby pink and baby yellow. So I opted to use red and yellow in full saturation but sparingly.

Applied the style guide to the lo-fi prototype. Full prototype had realistic content. This prompted a pivot on the homepage from single full screen sections to scrollable sections as to not crowd the content. The intent still being for a parallax scroll effect between sections.

Somehow between the lo-fi and hi-fi wireframing, I cut the links to the equipment list (presumably would have been to a pdf file). And the second complication was myself and the client agreed we should show the main specifications per machine on the website. This meant rethinking the capabilities sections, as well as adding a new equipment page. The lesson learnt here is the importance of being proactive in discussions with the client to determine what information must be included.

Having taken a front-end web development course, I had the foundational knowledge of HTML and CSS to get me started in Webflow. In Webflow, although you are not coding per se, you are essentially drag, dropping, and customizing HTML and CSS elements and adding custom code where necessary. There was a lot of trial-and-error, problem solving, and self-learning along the way with the published website showing significant growth in design execution and in the responsiveness of content across breakpoints.

First wireframes were for desktop. Then switched to a mobile-first approach, the thinking being to design for the smallest screen first. However, with the latest changes to the capabilities page (and the move of equipment to its own page) I had an oversight in that this design was not going to adapt well to desktop. The lesson being learnt that it is important to always consider how the content would adapt to various screen sizes.

I was fortunate to be given a lot of creative freedom from the client. However, there were certain design directions that were outside of my control. It was great that we did the wireframing but even so some design decisions were approved early on in the process and then much later changed. Further had to adapt to pushing forward with incomplete information (missing content and images) from client.

Changes to the site that went live on March 18, 2022 were mainly driven by ensuring content was styled consistently across breakpoints and pages. Decided to size content in VW (viewport width) at the largest and smallest breakpoints and used REM in the middle breakpoints. Using REM in the center kept the content from getting outrageously big (tiny) at the larger (smaller) breakpoints. Sizing inVW was driven by optimizing the presentation of grid content.

Talking with my client and seeing their shop my client was very excited about the work they do at TCR. In my client's words, "They are a small machine shop with large capabilities." The modern aspect of the design plays to TCR offering the latest in machining technology, including robotics and automation.

While the retro part of the design speaks to the older yet still relevant machining processes, like CNC turning which has been around for centuries. Retro elements on the website include the typography, the equipment 'polaroid' pictures, the four circles menu icon, and the outlined headings.

The final website for TCR is bold and simple in its design with a few micro interactions for added surprise and engagement. Designed within the limitations of colour contrast accessibility standards. With the final design, there is a focus on styling content consistently across the pages. As well as ensuring consistency across breakpoints so users have a uniform experience no matter the device they are using.

In addition to the website, I also updated TCR's logo. This was actually the first step in the process and once the logo work was completed then we begun on the website. Designing the new logo was was not without its challenges. Initially my contact at TCR and I explored new concepts for the logo before learning the owners (unlike my contact) wanted to keep the existing logo. This miscommunication stalled the process by a least a month.

As a means of moving forward with the project, the directive changed from designing a new logo to update and modernize the existing one. A learning here was it became very apparent how important logos are to clients and going forward it would be wise to have the owners' involvement in any logo work.

Given the move to update and modernize the existing logo, my creative freedom was very much impacted. However, I also came to appreciate the value in maintaining the recognizability of the logo as TCR is already an established , well-respected company. Updating the typeface and dropping the Ltd.made a huge difference. And bringing up the German flag colours helped alleviate colour contrast concerns.