20 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. To read more about the company, please visit my case study for the landing page here.

The mobile app is the most important component of the CarsArrive ecosystem. Over 50,000 truck drivers use this application with over 10,000 active users every day. Built in 2013, the app has never had a redesign.

Despite the poor reviews on the app store, there were no changes made to the user experience. That’s when I stepped in. Not only did I give the app a new look, I also helped improve the user experience drastically, and added new features on the way. This led to the company’s app stand out from the rest of the competition and be the new standard in car hauling apps.

Quick Facts

My Role
Research, High-fidelity prototyping, User testing, Assisting Developers,  Conducting meetings with stakeholders and CEO 
Tools
Created for
Mobile Phones, Tablets
Time frame
December 2020 - January 2021 (1 year+)
User base
50,000
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.
Non-tech savvy user base
The user base of the app consisted of truck drivers, most of which were middle aged or older, and have been using this app for years now. Most of them were resistant to technology and change and hence it was important to consider their mindset too.
‍
User base consisted of mostly middle aged non-tech savvy truck driver
Outdated User Experience
The User experience of this app had never been taken into account while it was first developed. It needed a complete overhaul and not just mere beautification. It was almost like building the app from scratch.
‍
Glimpse of the old UI
Developer Resources
There were just 2 developers, who were already working on both the US and Canada side of things, to help redevelop the app. Hence, it was important to prioritize important features & not focus on intricate details like micro-interactions, animations, haptics, etc.

Outcomes

Overhaul of the entire User Experience
CarsArrive mobile application had an entire new look. User flows were substantially improved from the previous generation, along with a much cleaner user interface.
Consitency across platforms
The new version was built on Flutter, which allowed for cross platform development using just a single codebase. This meant that the User Interface and flows were consistent across iOS, and Android. Not just platforms, but the experience was consistent across tablets as well.
Setting a design standard
During the entire process, I started maintaining a component library. This would help set a design standard, and also help in faster and more efficient feature creations in the future. I also handed off a design guide for the developers to follow, to make my designs future proof and independent of design help.
Attention

What did Jim write in that letter?

A recent study found that Jim's letter to Pam consisted of the entire process of the UX Overhaul of CarsArrive's mobile app. If you are curious to know what it was, click on the solidwhite button!
let's move on!Finally. Let's Read
Scene 1

Problems in the CarsArrive World

User Experience

Not to sound like a broken record, but the company never had a designer before I joined. Therefore, there never had been a design thinking session that the company went through before developing the initial versions of the app.

Naturally, over time, the user experience started becoming outdated. It had a windows phone style layout to begin with, and one had to press a lot of buttons to reach the end goal.

The user flows were flawed with respect to modern standards and needed a complete overhaul.
‍
App Store Reviews about User Experience

Inspection Process

Inspection is the most important part of the app. The truck drivers need to inspect each vehicle in their assignment to see if its damaged in any way. The old inspection has been one of the biggest pain points of the app. More about that in the next episode.
‍
App store reviews about the inspection process

Restrictions

The technology team of CarsArrive was a small team of 15-20 people. On top of that, there was no design team. With no processes to follow, it was important to set something up from scratch.

There was also no budget for user testing, or user research during the design phase. We had a group of 50-75 test users that consisted of internal employees, and other high-profile users/clients.

Therefore, all my designs had to based on app store reviews, competitor research, and general principles of design.


Budget Contraints
Lack of Design Processes
Reliance on app store reviews & competitors for research
No user testing
Overview of the restrictions at CarsArrive
Scene 2

Fixing the broken Home (screen)

The Old Home Screen

Tile based layout
The old home screen, followed a tile based layout. This was very similar to the Windows phones back in the day (R.I.P).
‍
CarsArrive followed a Windows Phone style layout
Can't see all loads in one place
Some truck drivers are assigned a load by their manager that comes directly to their app. While some can browse available loads and pick something they like. However, if you wanted to see both, you had to perform separate tasks.
‍
User Flow to view Available and Assigned Loads
Frustrations of the users
Adding to the point I made above, users started to get really frustrated with this flow for finding their loads. Here's a look at one of the reviews on the AppStore.
‍
One of the user's frustration was the inability to see all loads on one screen

Fixing it!

New Iterations for the Home Screen
I had begun working on the Home Screens before the rebrand kicked in. We went through multiple iterations of the home screen, and then finally chose a pattern we all loved and then, added the new branding into it as well.
Iterations of the new and improved Home Screen
Deciding to go with an infinite feed structure
Choosing to go with an infinite scrolling feed was a well thought out decision.
During my research between pagination and infinite scrolling, I found the benefits of infinite scrolling to be more appealing to our use case,

Pros of scrolling:
- User engagement and discovery
- Scrolling is better than clicking
- Scrolling is good for mobile devices
- People are used to scrolling patterns on other famous apps (TikTok, Instagram, Facebook, Twitter)

Links to the resources:
https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1
https://blog.taboola.com/mobile-phones-infinite-feed/
‍
Infinite Scolling on the Home Screen
Using Cards to enhance the UX
The new & improved home screen, as you can see, now consists all sections in one place - Picked Up Loads, Assigned Loads and Available Loads.

To enhance the user experience, I researched and found that using "cards" was the best way to enhance UX especially for the following purposes:

- Content Organization
- Visually Pleasing
- Digestible Form
- Best for thumb based scrolling

Source:
https://uxplanet.org/using-card-based-design-to-enhance-ux-51f965ab70cb

Breaking down the Card Component
Quick Action Buttons
As seen in the research, users were fed up of the clicks to get to important steps. Hence, I decided that we needed to have quick action buttons right from the home screen for the drivers to easily access those screens.

- Inspection: This is by far the most important step for a driver to successfully pick up a load. Hence having that as a quick action button would save time.

- Directions: Now, this is interesting. When a driver is assigned a load, the directions button will take him to the origin, but once he picks it up, the directions will take him to destination.

- Call at Origin / Destination: Sometimes the drivers need to call someone at the pick up or drop-off lots if they face any issues. The text will change to the name of the person at Origin or Destination.

- Scan Gate Pass: Some clients have a gate pass assigned to each load. This is an easy entry point for scanning.
‍
Quick Action buttons to help drivers save time
Faster Scanning of Loads
I improved the available loads cards and used text hierarchy and colors for faster scanning of loads.

- Price is most important: To attract drivers, I decided that price needs to stand out and hence gave it a larger size.

(P.S: Again, red should not have been used here, but it was a collective decision to go ahead with Red since that was the brand's color.)

- Assigning colors to distances: Sometimes a truck driver does not want to take a long distance assignment. Having three distinct categories for distances will help make that choice easier.

(On hindsight, I feel I should not have used Red here, since that denotes danger/error)

The idea was to form habits in the user so eventually they would be able to scan loads faster and make quicker decisions.
‍
Using Text Hierarchy and Colors for faster scanning
Viewing Loads - New Way
The truck drivers sometimes need more information about available loads like comments about the vehicle or location, or detailed information about the vehicles that they are picking up (Year Make Model).

Keeping the time factor in mind, I introduced a new "SWIPE TO SCROLL"  feature. This was like scrolling through all available loads, but with all the information you need.

You do not have to go back and select another load to see more information. You go into a whole new view, where you can keep swiping till you find your best load. Or you can double tap to add to favorites.
‍
Swipe through all loads in a detailed view
What is FAVORITES?
The above swipe to scroll feature gave birth to another new feature - favorites.
It's simple. You like a load, but you still want to see if you have a better load waiting for you, but if you don't find it, you will take this load.

Basically, taking the principles of dating apps, and general bookmark or save for later features from multiple apps, this feature was formed for the truck drivers to save loads for later.

We also added some urgent messaging on the "favorited" load for the drivers to act faster and drive business to us.
‍
Favorites Screen
Scene 3

Searching for ideal Search screen

Old Search

The old way to search for loads on the app was more stringent and relied on a more filter-like approach.
Search or Filters?
The search in the old CarsArrive app looked more like a filters screen. You could filter by origin, destination, no. of units, and if you wanted to be very specific, you could just enter the Load ID.

You did have the option to save your search.

⛔️ ISSUE: Error management was not ideal. Let's say you enter all the information and click on search, there were chances that you would fetch 0 search results.
Old Search

Quick Fix

Time Constrains for Iteration 1
I was told to stick the original flow and only focus on simpler changes for the first launch.
Search Home - Pinned & Recent Searches
Introduced a new landing screen for Search page. This included adding two sections - Saved Searches and Recent Searches. And if they wanted to initiate a new search, they can simply tap on the bottom area or swipe up.
‍
Refined version of the Search Screen

Saved Searches
‍This was an improvement over the old design. We added a limit of upto 5 Saved Searches. Instead of scrolling through saved searches in the old design, this new design provided quicker access to users with all the revelant information present up-front.

Recent Searches
It was important to show recent searches for the users so that they have the option of revisiting them or have an option of pinning them to Saved Searches

Notification Numbers
‍Showing small notification badges for every card was to save the user's time. This way they click on a saved search only when they see a new load for that particular criteria.
UI Improvements for Search Fields
The search fields stayed the same for this version and it was more of a UI fix.
‍
UI Improvements for Search Fields
Search Results
Added a new search results screen. This included the search criteria at the top for reference. Users would also have the option of saving the criteria by clicking on the "pin" icon.
‍
Search Results

Proposed Search

Once the initial launch version of search was done, I started working on a more broader and future-proof search feature.
Recommendations
Adding recommendations would make this a very user specific experience and can immensely help in gathering data.
Spotify inspired Recent Search
Clicking on search on the first screen brings you here, and shows all your recent searches with notification numbers.
More options to search
Added options for distance and price for the truck drivers to make it easier to find loads as per their liking.
Dynamic Fields
Predicting the search along with possible loads in the route will help reduce errors for the users.
Pre-validation before submit
Validating the fields before the users can press submit will help save time. In case there are no loads, button will be disabled.
Search Results
I retained the Search Results page from Iteration 1, and added a "You May also like" section for more recommendations.
Scene 4

Extras!

Map View

Pradeep had a great vision and wanted to create a Map view for an alternate way of managing, and finding new loads. This never led to fruition at the time I was there in the company, but here are a few screens that I worked on.
Map View
Selecting an available load
More info about assigned load

Empty States

Designing for empty states was the last percentage of work that makes a product looks complete. I identified a few scenarios and worked on some empty state screens too!
No Loads
Internet Issues
Document Issues

Onboarding Screens

In an app that had so many new changes, it was important to onboard users and explain them the changes in a digestible yet impactful manner. Here are the screens I designed for every scenario.

Tablet Screens

There are a few sets of users that use CarsArrive on a tablet. Hence, I also created a few screens for tablets, and worked with the developers to fine tune those designs for tablet viewing.
Assigned Loads
Available Loads
Search Screen
Scene 5

Sign-off

Presenting to CEO

I was fortunate again, to present my designs to the CEO of CarsArrive, and upper business units of KAR Global. Everyone in the company loved my work and were very excited to roll this out to the users.

Dev Hand-off

After the designs were done, it was time to work with the developers on making these designs come to life. I worked with Ketan and Gokul, who by the way are absolute superstars.

Despite me being at a very junior level with them, they were very helpful and accommodating of all my feedbacks and suggestions. They worked relentlessly to translate the design pixel by pixel.

I also created a component library and design guide for them to follow in the future. Here's a glimpse of it. You can download the entire styleguide.
‍
Glimpse of the design guide

Reflection

Restrictions should not bog me down
Despite limited resources, and restrictions, I am proud of the product that I was able to create. I kept working hard, did plenty of research and came up with solutions efficiently.

Working with developers
Developers are skilled in their own ways, and it's important to understand the technical feasibilities of certain designs. Not all designs are technically feasible, and hence working with the devs made me realize that despite the limitations, one can still create compelling experiences.

Should have added haptics, micro-interactions, animations
Limited resources, plus a lack of knowledge in micro-interactions and animations meant that the product was missing that last bit of oomph factor.

Crew

Pradeep Mahdevu
VP of Product
Ketan Pathak
iOS Developer
Gokul Chavan
Android Developer
Devender Thakur
Product Lead
Michael Briggs
Founder, President and CEO
Like what you saw? Let's work together
Download Resume