Clutch is Canada's largest online automotive e-commerce platform, with whom customers can buy a used car completely online, hassle and haggle free, and have it delivered to their home. The business prides itself on being able to provide a seamless and transparent, no-pressure car buying experience to Canadian drivers across the country.

Changing consumer patterns due to COVID dramatically increased Clutch's popularity and presence around the country from 2020 onwards. By 2021 the company had set up operations in almost all of the major markets in Canada, buying and selling cars from coast to coast.

With this explosive growth also came renewed calls to re-evaluate our branding. When Clutch was first established, the colour palette was relatively simple and sported a light blue as a primary colour. While it was a great colour, it unfortunately also bore striking resemblance to one of our main competitors, leading to serious problems around brand recognition.

As a result Clutch made a shift in primary colour to coral in 2019, chosen for its warmer tone and for having the added distinction of being Pantone colour of the year for that year. This was accompanied by a change in the logo design as well. While such changes were helpful, our website still lacked colour coordination or cohesion, hence the need for a proper website rebranding project.

Since this project would set the tone of the brand going forward, the stakeholder list for this particular undertaking was unique in that involved executive leadership, the marketing department as well as product design. Our director of marketing would oversee the project, responding to leadership and managing requests while I collaborated with our art director and copy writer to work out aesthetics and copy tone.

In a joint agreement between all three major parties, it was decided that the project would be completed in one month, two weeks for design, a week for soliciting feedback and finally a week tohave it implemented. The tight constraints placed weren't just because of the lack of resource capacity, but it was also timed so that our new site and brand visuals would be released before one of our biggest advertising campaigns, a sponsorship with the NHL.

Collaborating with our director of marketing, the following objectives were laid out for this project:

Though not explicitly outlined here, it was generally understood that all the work done here would also contribute to the design library we were trying to build for all of our digital products going forward. Therefore it was essential that while we worked on a tight timeline to also be especially thoughtful in all of our design choices.

To help accelerate our redesign, our art director helped bring in secondary and accent colours, along with iconography styles and new typography. All of these elements were already in use in our marketing materials, so it made sense in the name of consistency to also incorporate them into our website.

One of the first things I did before comitting to any design work was to understand the objectives of the page and what we wanted to prioritize showing our customers, especially those arriving on our site for the very first time. We had three major informational pieces that we identified as 'essential to share':

With this in hand, it was then exceptionally easy to visualize all of the changes in both visual content and copy when it came to low-fidelity wireframing. The following diagram illustrates at a very high level said adjustments proposed for the new site:

While most of the content on the site remains unchanged, the overall goal here was to serve the same amount, if not more, information to the client with as little downward scrolling as possible as engagement falls off the lower they go. The shortening of page length as seen as from the diagram above reflects this strategy.

In the mid-fi phase of this project, a lot of the focus was placed on crafting an engaging above the fold for the landing page. I experimented heavily with different content layouts, graphical styles and different levels of animations and motion graphics. While the feedback rounds were intense and almost every detail came under scrutiny, it was an extremely worthwhile exercise as with every round we got closer and closer to something we can all agree on.

One of the biggest and most critical changes we had to make was to improve the visibility of our sell/trade tool, used to give customers estimates on what their car would be worth if they sold it to, or traded it in with Clutch. As it was a major part of keeping Clutch's inventory topped up, we had to draw more attention to it given that previous redesigns de-emphasized it to the point of hurting the business.

Every vehicle sold by Clutch undergoes a 210-point inspection, a rigorous process that inspects the vehicle from front to back and inside to out. This is actually more than what is mandated by regulation and far more than what is offered by traditional dealers and our competition, so I wanted to highlight with an interactive that would allow customers to explore the inspection process themselves.

To counteract customers missing the interactive on mobile and tablet, autoplay is also incorporated to make sure the message gets across in more spatially constrained formats.

Clutch had the best ratings across multiple review platforms along with great customer testimonial videos filmed for airing during the NHL season. It felt like a big missed opportunity to not to leverage both assets in conjunction to build trust, so I decided to move it up higher in the page than before to ensure it gets more visibility. The old Clutch quality video was also swapped out in favour of a testimonial video on the assumption that this was a more effective way to build trust.

With all the content pieces in place and a general sense of aesthetics, it was time for the most satisfying part of the project: to give the whole page a unified makeover and put it all together.

With these designs in hand, our talented engineering team were able to build and deploy our new site design with time to spare. The site went live a day before the NHL sponsorship campaign kicked off, welcoming thousands of visitors to a new clutch.ca site on March 19, 2022. We saw a 20% increase in organic traffic and a corresponding 50% increase in 'Sell to Clutch' tool conversions. While the former could be attributed to the NHL visiblity, the conversion numbers spoke to the success of redesigning that particular element.

While increases in traffic and conversion were undeniable improvements, there were other aspects of our redesign that did not fully convince our product managers or executive leadership; This was mainly centered around the movement of testimonials to be of higher priority in page hierarchy and the new 210-point inspections interactive.

To dispell any doubts, I managed to acquire a trial of Fullstory, a web based analytical software that is designed for optimizing customer experience. Through its heatmapping and traffic tools we were able to notice significant improvements in the number of interactions with our below-fold information pieces, namely the testimonial video and inspection points interactive.

As a point of interest, I found number of Clutch's past landing pages and included one after the this project was complete. Although I was only involved in the Q1 design of 2022, it was interesting to see the evolution of the site over time and by extension, the brand aesthetics. It was important to acknowledge and celebrate the incremental but significant changes we were making with every iteration while also being excited for what the future could hold.

Given that throughout this project high level executives were involved, I took the care and time to involve key stakeholders early on and constantly provided updates in order to have their buy-in into the process throughout. Aside from the obvious accomplishments of the project itself, one aspect I considered to be a big takeaway was the need to back up design decisions with data and, where that was lacking, have a plan to collect that data.

Having the Fullstory testing plan done and presented to stakeholders helped reassure them that even if things didn't seem right or went wrong, we had contingency plans. It was definitely an improtant lesson learned in the art of navigating stakeholder wants and concerns.

There's a lot more detail and thought that went into this project than is practical to show in this format. In particular, there were a number of considerations not mentioned here for tablet and mobile formatting that was omitted in the inerest of being concise. If you'd like to get a full walkthrough, please contact me.