Mechanic Spotlight: New Website!

Matt:

Mechanic.dev is our marketing site for the Mechanic Shopify app—a place for merchants and developers to find Mechanic outside of the Shopify app store, in a space that allows more freedom and in-depth exploration. The Mechanic website was an important focus for me when I joined Lightward because it felt like my first opportunity to shine more light onto this tool, Mechanic, that I had fallen in love with. Mechanic is unique for many reasons, but the range of audience we attract is especially unique. In order to reach more technical users, freelancers, and agencies, it was important to have a space to communicate the value of Mechanic as a platform, not just a Shopify app. 

I worked on the project with Julie Bierschenk, an ultra-talented designer who brought my content to life. Working with Julie is amazing—she takes abstract ideas and forms them into beautiful concrete designs with minimal direction required. Once the design was complete we entered an iterative stage, where we worked towards the final design. We produced and launched v1 of the Mechanic website on April 28, 2021. It successfully communicated Mechanic’s value as an enterprise-grade development platform and helped us direct traffic to our partner directory, which matches merchants looking for Mechanic experts. 

Fast forward to 2023 and Lightward has a beautiful new brand guide created by Someoddpilot; we wanted to update Mechanic’s website to reflect our larger organizational branding. Julie and I got the band back together and we worked on Mechanic v2 of the website that we launched on January 24, 2023. Julie talks about the process for v2 of the website below, and I’ve included some screenshots to compare and contrast the old and new sites. I’m thrilled with the visual design of the new website, and everything feels in place with the Lightward and Mechanic branding connected.

Julie:

One of the most interesting challenges as a visual designer is adapting an existing product, in this instance the Mechanic landing page, to a recent re-brand. Lightward's new brilliant visual voice is one that captures the essence of what it stands for but also a variety of expressions of the brand itself. In 2021, Matt and I teamed up to design a landing page that not only communicates all that Mechanic has to offer, but with a visual spin—using icons and abstract illustrations to visually enhance an already amazing tool. We explored a variety of design elements through illustration and iconography to do some of the complex heavy lifting, which we found to be extremely successful and playful. Elements such as gradients and intentional, soft lines were used to create a suite of visual elements.

When the new Lightward branding came along, I spent some quality time with the new style guide, taking in the details and grounding principles of the brand. This sounds silly, but this is one of my favorite aspects of creative problem solving: understanding the colors, the use and execution of visual hierarchy and the reasoning and logic behind that. Matt and I really asked ourselves, "How do we keep some of the specific, special elements that we've grown to love with Mechanic while also respecting and supporting the Lightward brand?" And you know what, sometimes guidelines and rules are meant to be broken. This is exactly what we did. The end product was truly a marriage of what Mechanic once was, but now working hard to visually align with Lightward. We kept some of the iconography that served a true purpose of enhancing the complexities of the product, but using color, line, and the new design element of solid shapes to achieve the same goal. Riding the line of breaking rules, in this case keeping some of the old goodies, is just what was needed to creatively problem-solve. Any solid and thoughtful brand will be strategic and planned, with rules and regulations to stay consistent. But when done well, those same rules and regulations will set any creative mind free to explore but still stay true to the essence of its purpose and brand.

v1:

v2:

Note: v1 website photos are on the left, v2 on the right.