15 min read

Synopsis

CarsArrive is North America’s largest hauler of used cars. It transports over 3 Million vehicles every year. Notable clients include Toyota, Volkswagen, Honda, etc.

The digitization of car hauling process is what the company successful over the years. It works in a two way system - the transport managers would post available loads using CarsArrive’s internal website, and either assign these loads to specific truck drivers or keep it open for all.

The second component is the mobile app - this is what the truck drivers use to see available and assigned loads. They pick up loads, do vehicle inspections on the mobile phone and sign it off at the destination. 

The landing page is the most important page for new client and driver scouting. Over the last few years, due to a poor Landing page, CarsArrive has been losing clients to its competition. This needed to be changed. For a company that delivers over 3 million vehicles every year, their landing page lacked credibility. I helped them change that :) 

Quick Facts

My Role
Website Lead, Research, High-fidelity prototyping, Branding, User Testing, Working with CEO, Design Handoff
Tools
Created for
Desktops, Mobile Phones, Tablets
Time frame
August 2020 - March 2021 (8 months)
Live Demo

Challenges

Sole Designer in the team
CarsArrive had never had a designer before I joined. The entire team consisted of highly skilled developers, QA engineers and Product Managers. It took me a while to set my foot in the company.
Restrictions with Color Palette
The CEO of the company was invested heavily in the redesign. He had built this company from scratch and wanted the primary color to be red, which in the design industry often related to "danger" or "warning".
Resistance to change
The company had never had a redesign since 2013 and a lot of users, and company personnel alike had some resistance to change. It was important to have everybody on-board with a new look CarsArrive.
Failed first attempt at redesign
As an intern initially, my first redesign of the landing page got some brutal responses from higher authorities in the company. Thankfully, my manager was very supportive of me and encouraged me take the feedback and get better.
Limited developer resources
I had to work with just 1 developer, who was already working on multiple projects in the team. So I had to limit myself to something that was achievable quickly and did not need extra expertise.

Glimpses of the process

Old Website
This was how the old website looked and functioned. Key issues found were:

- Outdated UI
- Absence of a hero section and hero offering
- No mention of products and glimpses of products
- Lack of visual hierarchy

Detailed descriptions of each coming soon in the case study!
Iteration 1
The first iteration failed to attract any buyers. The idea was to change the color palette to a more vibrant tone with red, purple and yellow as primary colors.

This was met with critical feedback from the senior management and some of the comments included:

- Looks like a fast food joint website
- The colors are too bold
- The font looks very childish
Rebranding
As a company, we decided that we needed to take a step back and first do a proper rebrand. After multiple iterations, and rounds of feedback, this is what we ended up finalizing. I worked on the entire process with a little help from the Senior Software Engineer, Eric Haltom.

Final Shipped Version
After rebranding the company, I worked on the landing page once again taking into consideration all the previous feedback. This time around, everybody in the company LOVED THE WEBSITE.

The things that worked:
- Better colors and professional UI
- Subtle animations throughout the website
- Improved visual hierarchy
- Research on scanning habits for landing pages
- Responsiveness on mobiles and tablets

Catch a glimpse here!
You can  visit the website and browse around. And if you're impressed, please share it with your friends :) 

Outcomes

Rebranding
- I helped in rebranding the company and helped onboard the employees into using the new branding
- Created logo for different sizes, font families, and color palette which will be in use for the other applications that you will see here
- Fresh, and modern look for the company
Lauded by  CEO for Best-in-class design among competitors
- Worked closely with VP of Product and CEO 
- CEO wanted to maintain the “road” element and red color of the original brand and was over the moon with how the rebrand turned out
2x faster than previous website
Helped improve the loading time of the website by using image compression software and providing lighter assets
Catch the redesign transformation here. This was the final result of 9 months worth of hard work. You can read the entire process below, and if you want to learn more, please contact me.

WARNING: Video contains sound
Attention

Team Ross or Team Rachel?

The story is not as long as reading 18 PAGES, FRONT & BACK. If you're team Rachel, I highly recommend you reading the entire story. But hey, if you're team Ross and you don't want to read it, you can skip to the next episode.
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!
Outdated UI
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.


Loading time
2x faster
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.

Crew

Pradeep Mahdevu
VP of Product
Eric Haltom
Senior Software Engineer
Anuraag Kotra
Software Engineer
Dayan Paul
Graphic Designer (Contractor) for animations
Pradeep Tyagi
Senior Software Engineer
Ting Kai Liu
Software Engineer Intern
Michael Briggs
Founder, President and CEO

Keep exploring the Trilogy!

Like what you saw? Let's work together