Trading used cars is a slow and cumbersome process, especially for dealers. Texts are replied to with emails and emails are replied to with phone calls. Keeping track of the conversation, price, offers, and vehicle details has been a problem in the used car industry for decades. But even if the transaction process were simpler, a dealer can’t make an offer on a vehicle without knowing it’s condition.

The VINTrades mobile app makes trading vehicles easy. Dealers can scan the vehicles bar code and then add a condition report. From there, the vehicle can be sent to other dealers and an offer can be made. Then, a conversation is automatically started between the dealers for that specific vehicle.

A Distinguished Brand

With a dominant male target audience and the most ground-breaking app in the industry, the brand had to be simple and bold, yet professional and recognizable. To accomplish this, Kirsten Reilly and I used a simplified bar code for the logo and soothing blues with a yellow accent for the color scheme. This fine balance of characteristics made the app appealing and accessible to everyone.

(VINTrades Brand Guidelines)
Mapping the User Flow

The creation of the app started with mapping the user flow and behavior between pages. Defining the page architecture is the most critical step in the design of a complex system like VINTrades. The map below gave my clients and myself the ability to make high-level decisions with a birds-eye view of the entire application.

Hi-Fi Wifreframes

Wireframes are traditionally created with minimal details. But as I began to outline this intricate system of pages it became clear that more detail was necessary to prove that my layout and design concepts were feasible. The wireframes below show the various messaging screens where dealers can chat about a vehicle and make, accept, or decline offers.

Compact Information Design

The vehicle year, make, model, VIN, color, milage, and name of the dealer all had to be clearly visible on numerous pages to ensure that the dealers know exactly which car was being referenced. For example, a single dealer could be selling multiple 2006 Honda Civics that can only be distinguished by the VIN number, color, or milage. That meant making the information compact, yet clearly legible. It also required hiding some information while making it easily accessible via a swipe or tap gesture.

(compact information design across multiple screens)
Condition Reports Made Easy

Reporting the condition of a vehicle is a tedious and time-consuming process for auto dealers. To simplify this process in the app, I designed two reporting options. The first collects only the most critical information such as overall damage, scratches, and repair costs. The second allows dealers to report the details of every damaged panel and attach photos.

To minimize the back-and-forth behavior in a complex workflow, I kept the list of panels on the same screen and used popup dialogs so the user never has to leave the screen. This simple solutions reduces the time it takes to complete a report by several minutes.

Systematic Design

Making such a complex, feature-rich application feel simple and consistent for the user was no easy task. Users can often teach themselves how to use a new app if these two things are executed well. I started by designing a style guide, which is a library of buttons, text styles, and modules that serve as visual rules. Then I used those styles and rules to construct each of the 85+ screens. The result was a consistent interface that was easy to learn and follow for the dealers using the app for the first or 100th time.

(85 of the screens I designed for the VINTrades app)
Empty States and Notifications

An empty state is a version of the screen with no data on it. For example, when you first login to the VINTrades app, the screen that displays the dealers in your network will be empty since you haven’t connected with any dealers yet. Wouldn’t it be nice to get a little context and feedback so you know what to expect from this screen in the future?

These important screens are also some of the most forgotten. That’s why I made sure to design every version of every screen needed to make the user feel comfortable and informed. I also designed engaging modals or “popups” that acted as helpful notifications to remind the user of what action needed to be taken.

Vehicle Trading Made Easy

My love for design and cars made this one of the most exciting projects I’ve ever worked on. While there were challenges along the way, knowing that every screen was given the most love and care possible made this long and tedious project worthwhile. Once the app is available for download, thousands of auto dealers around the country will be able to consolidate their conversations, perform more accurate condition reports, and ultimately sell more vehicles.

This was my second project I had the pleasure of working on with Matt and he delivered every bit as much as the first. Matt won't just do whatever you say to get the project off his plate. He takes the time to understand what you need and works with you to make something truly outstanding. He puts a ton of effort and passion into his work and it really shows.

Bryan DuvaLead Developer at All Auto Buyer