My Role

  • Led UX/UI design for an innovative B2B fintech SaaS product that allows consumers to shop by payment; product incorporates a soft credit pull, trade-in equity, and consumer preferences match pre-qualified vehicles dealer inventory for personalized experience.
  • Developed an After Effects template to support a wide range of OEM theming and dealer branding which enabled a seamless truPayment user experience.
  • Led all web design/development and co-authored websites and all marketing collateral content. – Supported branding/marketing and sales efforts by designing and producing product feature videos and a wide range of proven CTA for social and dealer sites.
  • Created a visual integration document process for improved dealer onboarding and setup.

Consumer App

The truPayments consumer mobile first web application was designed to accommodate a full end to end personalized shopping and vehicle purchase experience.

Features

  • Financing and Vehicle Preferences
  • User Registration / Partial Registered User
  • Home Status Screen
  • Error Handling for Soft Credit/ SSN Needed / No Credit
  • Trade-In Vehicle Lookup VIN, Plate or by Address
  • Trade-in Equity Scenarios
  • Vehicle Search Results Page with ability to show/compare all payment options per vehicle
  • SRP Filtering
  • Deal Preferences – Add/Remove Trade/ Adjust Down Payment Select Pre-qualified Payment Terms
  • Appointment Dealer/Test Drive/ Delivery
  • Full Credit Application
  • F&I
  • Personalized Incentive Selection
  • Accessories
  • Checkout / Summary
  • Reserve Car / Receive a Down Payment
  • E-Doc/Sign
  • Email Notifications
  • VIN Entry – Specific vehicle already selected or passed in via a campaign
  • Trade-in entry – user has already verified trade-in prior to
  • Similar Vehicle prompts and display on entering Shop-by-Payment flow and single VIN flows

User Flows / Wireframes

This user flow chart above is part of a larger repository of designs, guidelines, and notes for each use case, including archived flows for our team to reference as the app features evolve. I mapped all current flows to help identify a better approach for future product development and simplification.

The truPayments consumer application was designed to accommodate a full end-to-end personalized shopping and purchase experience. It also supports a wide range of entry points. For example, the user can enter the application via a single VIN, Similar Vehicle, Start with a Trade-in or Shop all inventory.

 Style Guides / Design System

Early on in the design process, I began creating design guidelines. Using Adobe’s Creative Cloud, I was able to build a library of UI components, helping us to create comps more efficiently – while also handling a wide range of variations we needed for marketing assets and other samples.

Prototype / User Testing

Created a functional prototype and facilitated the user testing for a new Trade-in experience.  One of the requirements was to incorporate the truPayments shopping experience and also function as a completely stand-alone experience and product. Both truPayments and PureCars had a version of a trade-in tool, each with different advantages and disadvantages. The new versions addressed the feature gap, UX flaws and includes new features for a better UX and data capture for the dealer.

Trade-in Flow

The chart below were the SUS score results from the Trade-in prototype and testing.

UX/UI – Dealer LEAD Dashboard

Our dashboard allowed our dealer customers to access detailed lead information, including a full credit pull, product specific analytics and reporting.

Customization / B2C Marketing Features

As part of the product offering, truPayments provides default assets to help dealers drive their customers to the personalized shopping experience via their site or social campaigns. I helped design the offering, as well as deliver creative assets, handle custom requests and ensure that ads were effective, compliant, and scalable. This included:

  • Dynamic landing pages to embed on the dealer’s site and stand-alone landing page that can be used for social campaigns.
  • Customizable assets within the application
  • Banners/Social Assets
  • Clear implementation instructions and best practice samples
  • Dynamic Marketing Videos

Dynamic Video / Banner Creation

To help manage custom request and maximize our product exposure, I built a dynamic After Effects template accomodate  videos and banners creation. This helped to ensure content was consistent, compliant and maintained parity with our product UX.  For example, changing a few JSON files, and images, we could ensure that branding, colors, matching inventory/payments, and text would be consistent through-out all video, banners, custom app creative that were generated.

A sample of variations on a banner generated from After Effect.

B2B Product Marketing

Sales – Product Overview. Post acquisition, I worked the PureCars Marketing team to rebrand the truPayments product.

Web Design / Branding 

Dynamic Integration Guide

Redesign and develop our installment guide to help with the onboarding process and QA. Previously the installment guide was a static page that was manually put together and sent off the dealer and the web provider. In many cases, the web provider works off our production environment, so when the product is not installed correctly it creates a chain of negative events that can lead to cancellations. Improvements included:

  • Remove the need for manual guide creation, limiting potential errors with a dealer ID, etc
  • The dynamic population of steps, with product variations and require a different number of steps. In some cases, dealers were getting an upgraded version of the product and needed to follow steps to remove old code.
  • Visual references that show the placement of CTA’s use the CTA in production that launches the dealer’s product. This helped the web provider see exactly our product should look and behave.
  • Assets on the guide are live and launch the product experience. This helps the web provider identify install issues, especially on their end.
  • A simple, but extremely helpful addition was adding a navigation for each step and the ability for our customer support to link directly to a specific steps.