Mechanics’ REBRANDING
The Rebrand of Braeside Motors in Brighton.
Client:
Braeside Motors
Skills:
Brand Identity + Website Design
Carl from Braeside Motors approached me to help him move away from an existing company, who he felt were not running his website and marketing very well. I was happy to help reinvigorate his online presence and ensure that it all had an up to date and consistent feel throughout all his marketing and online presences.
After assessing his existing marketing channels, I suggested that it was all updated so that I could create some consistency through the rebranding his business. There were different logos and styles used on his website, social media and other marketing, so they all needed to be unified.
As I’d worked with Carl before, he pretty much gave me free rein to do what I thought was best. It was an absolute pleasure to work this way. Have the creative freedom with the rebrand designs, meant I could get stuck in and immersed in the process. :)
Eyetooth-Art are in my opinion the market leaders in graphic and web design. Steve built my website from scratch and reworked my Facebook page and all my online presence. Excellent value and faultless work.
Carl Roper – Braeside Motors
The Mechanics Rebrand
Since there seemed to be multiple logos and a distinct lack of branding used in Braeside Motor’s marketing, I suggested that we redo everything from the ground up. So the first stage to the mechanics rebrand was redesigning the logo, this served two purposes; uniting the brand under one distinct logo and also modernising the identity with a fresh lick of paint. As I received relatively free rein with the designs, I worked out a few different concepts and settled on a final design that I felt worked well for all the different purposes. Luckily it was approved so I could get started with the other design work immediately.
While working on the logo, I also tried out several colour schemes for the different elements. It is always a good idea to find a small range of colours that can work for different brand elements. When choosing colour schemes, it’s vital to bear in mind that the logo is likely to be used on different colour backgrounds, so both light and dark versions will be needed.
The brand redesign
I put careful consideration into the different elements for the Braeside Motors brand redesign.
I planned everything from colour schemes, fonts/typefaces, design elements and what sort of imagery.
Rebrand Typography
While I wanted the logo to have a distinct wordmark style, so that it could stand out from the rest of the text, it also needed to complement the typography used for the general copy and other text. I chose to use the font ‘Exo’ for the brand redesign as it has some interesting variations in thickness, with added character/style while still being easily legible. For the main headings, I went for a significant chunky version, to grab people’s attention, while each subheading got marginally smaller and thinner.
Rebrand imagery
I decided to use imagery that would portray the different aspects of the company while still being creative and engaging. To accomplish this, I sourced stunning photography that showed closeups and exciting viewpoints that related to the topic or service being referenced in the accompanying copy.
Rebrand design elements
The rebrand design elements were chosen to reinforce the logo. I felt that using intense colours, combined with arrows to lead the eye into the content areas, therefore providing a strong basis for the designs to follow.
The website redesign
As this was the main thing Carl wanted to be updated and modernised, it was the next part of the rebranding process. During the logo redesign process, I had already created some elements to compliment the logo. These branding elements were utilised to create a mockup of how I felt the site should look. They also solidified the basis of the visual brand elements and colours scheme.
Once I had developed the mockup in Illustrator and formulated how I’d like the site to function, I could then get stuck into the coding and interactivity of the site. A lot of the brand elements were intended to be interactive or animated on the website, so it’s always a pleasure to see the static mockup come to life.
Luckily, even though the existing site was not looking great, it had a bunch of copy that I could use to create the new website. I sourced all-new imagery and filled out the pages with the old site content in the new style I had formulated. I edited all the text to make it easier to read and to allow clear navigation of the site in conjunction with visuals that reinforced the copy.
By incorporating interactivity and subtle animations into the site design, I was able to grab customers attention and entice them to interact with the page. Whether this is to get them to click a link or keep reading, it will keep potential customers engaged and hopefully lead to sales.
Responsive design
I paid particular attention to the responsive aspects of the design so that the site would work well on all devices. I optimised the web pages to be viewed on a large screen first as that was the easiest way to get things approved and to allow us to tweak the elements and layout.
Once the general site styling and design was approved, I then got stuck in with customising the site for use on mobile devices, such as tablets and phones. To ensure that the website looked great on smaller devices, I created bespoke sections that would only be displayed on smaller screens. In contrast, particular styling and sections were designed for larger screens are automatically hidden, depending on the device being used.
Another smart feature I implemented was to reduce the font sizes to ensure that they would display correctly on any screen size. In addition to this, the arrow brand elements were also rotated and repositioned on smaller screens. So that the images were kept with their associated text even though the page element order changed.
Website platform
We decided to use the WordPress platform to build the site, for its capacity to add functionality and SEO features easily. Another advantage of this was that Carl would be able to easily make small updates to the content of his site, while I handled the more complex design aspects.
You can watch a quick video on how the site functions below, or better yet, actually visit the website here.
Facebook design
The existing Facebook page for Braeside Motors was using a different logo and
imagery to the newly created brand identity.
The existing Facebook page for Braeside Motors was using a different logo and imagery to the newly created brand identity.
I wanted to create a visual identity for the rebrand that worked seamlessly across everything, so got stuck into incorporating the redesigned brand elements and logo into their social network imagery. To do this, I created a new profile and cover imagery as part of the social media designs. You must plan for the images to be cropped and resized when viewed on mobile devices so that all the essential content remains visible at all times and that the designs work well on all screen sizes.
I decided to use the slide show feature for the Facebook cover area, as this allowed me to highlight some key services in the header section of the Braeside Motors Facebook page.
When creating an emblem or logo to use as the profile picture, you need to consider the fact that it will be converted into a circular space and reduced in size when showing on new posts and other areas of the page. Placing a logo that gets cropped, so it’s not visible or legible would be counterproductive.
Along with the standard changes, I also created imagery for the about us section and made general improvements to the content and functionality of the page. By listing the services offered, with images that tie into their relevant sections on the website, I was also able to market the business using an additional platform.
