autoTRADER.ca ios app


Stakeholders:
autoTRADER.ca

Projects:
autoTRADER.ca iOS app

Timeline:
2 months

Disciplines:
User Experience
UI Design

Tools:
Adobe Illustrator
Adobe Photoshop

Project background
As the Lead Sr. Designer at Trader Corporation, I was asked to conceptualize the first iOS app for autoTRADER.ca. During this project, I collaborated with a company in California, which provided the template and the style guide for iOS apps in general.

In parallel, I also designed a native app for the BlackBerry platform as well, which was popular with our user base at that time, however in this section I am going to focus just on the iOS platform.

Goal:
Design a mobile app that would provide smart phone users with a similar (or even better) experience they enjoy when using the autoTRADER.ca website (please note that the site was not responsive at that time).

Challenge #1:
As this was the first time an app was designed for autoTRADER.ca, it had to be done from scratch, with only limited amount of useful research on hand and a limited amount of users who owned and used smart phones on a regular basis.

Challenge #2:
Another challenge was trying to comprise all the information users had been accustomed to while browsing the autoTRADER.ca website, into an app. Nowadays, with the prevalence of smart phones and applications, it is much easier to build upon previous design, whereas nine years ago - when not so many people owned an iPhone - careful research and consideration had to be done and taken into account.

Rapid prototyping
In the first round of paper-prototyping and ideation, it was decided to prompt the user with 3 main fields upon loading the home page: Make / Model / Location. All this was followed by a thick SEARCH button, and a link with "More Options", containing further search refining fields.

The toolbox at the bottom would have 5 main sections: Home / Search / My Garage / Sell / Help. Above this, an area was reserved for internal ads (advertising autoTRADER's services and features) displayed in a carousel format.

Lo-fi sketch
Underneath all this, another two sections were made available: "Last Searched" and "Recently Added". This provided the user with a quick access to the vehicles they seemed interested in at some point during their browsing history.

Hi-fi mockups
Once a vehicle was selected, it's "profile" page was open, displaying the featured image (but allowing the other ones to be viewed in a carousel format). A link to the Carfax Report was conveniently displayed above the price. Right off the bat, the mileage and the location of the vehicle were displayed under the full make + model information.

The user could add the vehicle to their favourite list, by clicking the icon to the right, or get price alerts. Hovering at the bottom of the screen were 2 main buttons: Call and Email, so that the person interested could immediately get in touch with the dealer or private seller.

Testing, round one
Upon doing the first round of testing, we found that most users were curious how much would they have to pay for a car they were interested in and that this was indeed a major factor in deciding whether to consider purchasing a vehicle or not. As such, we added the Payment Calculator as one of the built-in tools, together with the Instant Cash Offer in case a trade-in option was on the table. Inserting the Vehicle Identification Number (VIN) would actually provide the user with an even more accurate estimation of what they would receive for the trade-in, an thus how low their monthly payments could be reduced to.

Key findings
As one of the largest classified web sites in Canada, it was crucial that autoTRADER provided its user base with an app that would streamline the process of searching for a vehicle. Some of the most useful features proved to be:

• The Price Analysis, which showed whether the price of the vehicle was Great / Good / Fair / Above and by how much a vehicle was below market value (if that was indeed the case)

• Condition Analysis, which displayed at a glance whether the mileage the vehicle had was Low / Average / High and also if it was Safety Inspected.

• The Listing History & Owner reviews, which painted a more clear picture of how long the vehicle was on the market and what type of driving it was subjected to (based on the owner profile).