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.

Synopsis

Quick Facts

Challenges

Outcomes

What did Jim write in that letter?