UX/UI Design and Development

Trade Appraisal Tool

“We need an appraisal tool that looks unlike anything out there” – This is what was presented to me as the task from our director of Automotive applications at PERQ. We had a suite of tools to help dealers manage inventory and send out promotions but nothing to help in the sales funnel to give them qualified leads. Of course, there are plenty of trade appraisal applications out there already, the problem is that they tend to be very generic and lack any appeal visually.

I approached this particular product design challenge by creating some heuristic evaluations of current trade-tool offerings; Kelly Blue Book, Edmunds, etc. Breaking each one down by the process flow and logic behind the trade appraisal. Each brand has a slightly different approach but I knew I could improve on them.

Visually we wanted to find a style that we significantly different from the others. I started with very clean, modern designs and placed them in front of various dealerships. The response just wasn’t there, until I decided to pivot and start looking at the various dashboard layouts and gauges that were featured in the vehicles being sold within each dealership. That is where I decided I would live and continue to push the design forward based on that visual language. It was an instant success. To this date, the Trade Appraisal Product is the best performing lead generation tool within PERQ’s suite of product offerings.

CODE:

So here’s where it gets even more interesting. My vision for the product included large scale animation. I talked quite a bit with the software engineers but they were a bit hesitant to code something like this out, it was beyond their comfort zone. SO I CODED IT. Yeah, sometimes you just have to be willing to dive into the code yourself. I looked at various tech solutions from animated GIF’s (too big) to animated SVG’s (not compatible with our platform) and then finally landed on advanced CSS step animation with PNG’s. I love this technique since it allows total access to images, speed and even looping.

 

Mobile

Of course, it goes without saying that this product design needed to be mobile responsive as well. It was determined through testing that many end users would be on location at a dealership while trying to determine if their trade-in was fair. This would mean a clean, easy to use interface, that would also carry over the strong visual elements from the larger, desktop version.

  • UX Activity Heuristic Evaluation
  • Prototyping Principle
  • Motion Studies After Effects
  • Design Sketch
  • Technology HTML5 and CSS