Scene 1
The boring intro
Website History
CarsArrive's first landing page website was created way back in 2013. And for 2013's standards, it looked quite decent to be honest. But apart from its client list, it had never gotten a facelift. Here, have a look at how it looked and performed:
Why redesign?
CarsArrive is one of North America's largest hauler of used cars. But as you just saw above, it did not give you the impression that it was so successful.
I was recruited for this role in 2020, just when COVID had begun to take over the world and force it to digital. Now that the whole world was just sitting at home, and for the sake of my case study, imagine you wanted to use CarsArrive because I told you that it delivers over 3 Million vehicles per year.
You open their website, and it loads slowly. Everything is on one page, and its upto you as to how you want to digest that information. And hey did you know, we also had a mobile app? No? Sorry we did not mention that on our website.
In all fairness, it was meant for 2013 browsing and not 2020. With the competition moving forward (pun intended) at a fast rate, CarsArrive needed to act quickly!
No information about products
Competitors doing well digitally
Slow loading times, Information Overload
Why was the redesign needed?
Scene 2
Observing the competition
Common Patterns
Clear Offerings
Most of the competition was very clear off the bat as to what services they offer. They were brief yet impactful
SuperDispatch's Landing Page
Numbers Game
Using numbers or data is always a smart way to show how successful you are. It also instills a sense of trust and credibility amongst the users
MoveMyCar uses numbers and client information to build credibility
Feature set
As a user, you would want to see what services a company can offer you and help you make a decision depending upon the features you need
Montway Auto Transport gives brief overviews of its features
Glimpses of the products
I have all the information I need, now I want to see how your product looks or functions. Having a glimpse of the UI can help me choose better.
SuperDispatch gives a glimpse of their mobile app UI
Scene 3
The fight where the hero always loses
First punch
As a nervous first timer, I went all guns blazing with all the colors in the world and came up with an initial redesign.
Fun Fact: I also coded this out using HTML, CSS.
It was then passed on to a group of higher business units and across the branding and design team at CarsArrive's parent company, KAR Global.
The Thought Process
With all the research done, I wanted to start building something out immediately. This was my first major chance to shine and I went all guns blazing.
Bold Colors & Fun Fonts
I chose colors like Red, Yellow and Violet to give the website a splash of color. Along with that I used "Nunito" to make the website look more fun!
Create a base pattern
I created a base pattern that included a hero section, social proof, numbers, features, and glimpse of the product, something that was an amalgamation of my research
Experiment with animations
I was fortunate enough to have Eric Haltom, senior developer, to be an ex-graphic designer who helped me create some loading animations.
Counter-punch
As a newbie, I was on a high thinking I had created something out of this world. I was soon brought to the ground when the reviews came in from the business units. Here's a breakdown of why it was not met with great success.
Looks like a fast food joint
The red and yellow color combination made the website look like a fast-food joint website and not a Car hauling website. They surely weren't LOVIN' IT
Too many colors
Not just red and yellow, the website in general felt like someone just ate a lot of oil paints and then threw up.
Childish fonts
The font I used was "Nunito" and according to the users, it did not look professional enough to be on the landing page of company with so many customers.
Scene 4
Two steps forward, one step back
What next?
After getting the feedback, it was time to hit the drawing board again and think of ways to improve our product.
Eric suggested that, before we work on redesigning the website, we should be doing a rebrand of our company. It does not have to be extensive. But we just need to create a color palette, logos, and choose a font family. Doing so, we can also start applying them to our suite of products and make a consistent experience.
Old Branding
Again, a reminder that this was built back in 2013 and had never seen a design change.
CarsArrive Original Logo and Branding
Logo experiments
We realized that the logo looked outdated, and needed to look more modern and sleek. We went ahead and tried many variations.
I did not have any expertise in Graphic Design but I tried using vectors in Sketch to try my hand out at logos. Here's a glimpse of those options right from my Sketch Canvas.
New Logo Experimentations and options
CEO's call!
Well, this was new!
First of many calls with the CEO. He absolutely loved the direction I was going with the logos and he picked his favorite.
Guess what? Both he and I had the same favorite option! We picked this option, and decided to refine it further.
Chosen option
Logo Refinement
Now that the base was set, it was time to refine the logo. It took a bit of trial and error and back and forth with the CEO and Business Units, but we finally landed on a final logo!
Refining the logo and coming to the final choice
Logo Breakdown
- CA: This was simple. This denoted the abbreviation for "CarsArrive"
- Road element in "A": The road denoted "transportation" since CarArrive dealt with the transportation of used cars.
- Curvature of C: The "C" was curved and joined with A in such a way that it depicted a modern "truck" or "hauler", which was the vehicle used for transportation of cars.
Colors & Fonts
The CEO wanted to retain Red as the primary color of the brand and its products. The red that we initially used for the first iteration seemed too bright.
I started working on the color palettes. LOTS & LOTS of options to choose from. Here's a glimpse of all the experiments that I did on Sketch Canvas.
In terms of fonts, we wanted something more modern. We liked "Gilroy" the best, but we had to look at free alternatives due to budget constraints.
Experimenting with color palettes & fonts
Combining them all!
After multiple rounds of feedback and back and forth, we finally had an All new brand. We didn't just stop at one logo, and one font.
We made a logo pack for different use cases like mobile app, icons, print media, etc.
We made an extensive color palette with shades.
We also chose a font family and assigned different weights for different purposes.
Here's the ALL NEW CARSARRIVE:
CarsArrive - Rebranded, Refreshed
We made CarsArrive travel from 2013 to 2020 in 1 month
A huge shout out to Eric Haltom (Senior Software Engineer), and Pradeep Mahdevu (VP of Product) for being the best mentors out there and supporting me in this entire process. Thank you Michael Briggs (CEO, Founder), for letting me give a fresh look to a brand that you created and ran successfully for so many years!
CarsArrive Logo Transformation
Scene 5
The Climax Fight Scene
Fresh & Confident
I had the golden opportunity to present our brand guidelines in front of all child companies of KAR Global.
This was a presentation that included the CEO, upper business units and people from across all companies of KAR.
Pradeep kicked things off with a killer intro about the company's vision, followed by Eric, who spoke about the brand. It was then upon me to introduce the new brand, and what we were planning to do with it! The logo reveal and brand identity was met with a round of applause from the people.
This helped me regain my confidence and I was ready for the final battle in this little war - The Landing Page.
Movie magic on the website
I wanted the Landing Page to tell a story. I wanted it to be like a short movie that walks you through from start to the end.
This needed a script, and I was ready with it! Here's how the landing page goes:
Make a bold entry
Bold hero headline to set the stage, following it up by visual of hauler trucks pointing towards the main Call to action button.
Social Proof
Show the users our top clients to gain a sense of trust and reliability
Back them by numbers
It was important to back the bold claims by showing actual numbers & figures to prove our claims
Following industry patterns
As mentioned in my research earlier, numbers were a key part to a lot of our competitors' success
What do we provide?
How do we achieve those numbers? By providing multiple services. Each of these services had a short brief and a call to action button to take the relevant user to a page with more information
How do we provide these services?
Now we start a section showing off our product line, to show the many ways we can provide those services
Product Glimpse and Features
Why would you download our app? We give them the reasons how our app stands out from the competition and show a glimpse of the UI as well
For the other type of user
If you aren't a truck driver, here's a glimpse of our new and improved web-app, along with all the new features
Call to action buttons
Giving the user call to action buttons in each section for quick conversion
Want to learn more?
Still have questions? Get in touch and learn more. Giving the users easy ways to reach us in case they still have more questions
More pages
That was the front facing side of our website. There were a few more pages that described our features in details. Here's how they stacked up!
Other pages of the website
Making it responsive
I had mocked up different versions for our developers to make the website responsive across desktops, tablets, and mobile phones. Here's a glimpse of the Sketch Canvas for multiple screen sizes.
Depending upon what device you are using to read this, you can visit the live website
here
A huge shoutout to Anuraag Kotra (Software Engineer) for making my vision come to life and developing the website to match my designs and for always being open to feedback.
Responsiveness of the website across all devices
Scene 6
Post-release reviews
Reactions
Everyone in the company LOVED the new website and the new look that was given to CarsArrive.
This had motivated everyone in the company to now improve all the existing products to match the new brand guidelines and standards set my me. You'll see more in the next episode on how I transformed CarsArrive's mobile app.
Products affected
4
New branding to be applied
Reflection
Turning things around quickly
Despite getting off to a bad start, I was happy to turn things around and deliver. It was a great learning curve at this point in my career to fail at something first and make a strong comeback in a matter of few months.
Making sacrifices
I wanted to add a few more things to the website - a small demo of our product features, a blog page, and some real world testimonials. Due to the lack of resources, and data, unfortunately we had to keep that for a future iteration.
No data to measure success
The company also did not have the resources to measure the success of the newly launched website. Upon asking, I could not get any official numbers to see how the new website affected the company's growth.
Good word of mouth
However, the word of mouth for the website has been very positive across all business units at KAR Global and also from some of our clients, who were very happy to see a fresh new look to CarsArrive.
Learnings
- Led the entire process of ideation, planning, design, and branding
- My first shipped product.
- Experienced learning from mistakes and making stronger comebacks
- Having a manager's backing is crucial to a designer's growth, and I was fortunate to have that.
