Collector Car Online Garage
From 2016-2017 I led the design effort for a new product tentatively titled "My Garage", a responsive web app intended to provide classic car collectors (and dreamers!) a space to create an unlimited number of custom car collections to track values over time (user benefit) and easily transition the collection to a multi-vehicle insurance quote flow (business goal). The garage was designed as a feature expansion of the My Favorites List from the Valuation Tools product.
Tasks: End-to End Product Design, Creative Direction, Stakeholder Relations and Presentation
Collaborations: Business Unit Stakeholders, Delivery Manager, Lead Developer, Graphic Designer
Tiered Goal Strategy Approach
The end / business goal for the online garage was to easily transition users down the appropriate insurance quote path - either standard multi-vehicle or Private Client Services - as determined by the total value of a vehicle collection. The stepping stone goal was to entice to create the classic car collections for which they could track their values over time (user benefit).
This project was comprised of 3 parts:
Transitioning the singular Valuation Tools My Favorites List to a multi-collection online garage,
Designing the online garage itself, and;
Converting the single vehicle quote to a multi-vehicle quote in as few additional pages as possible.
Branding & Labeling
There was already an idea floating around the business to brand the product as "My Garage"which fit the intention well, so I ran with it. Every new new garage would be populated with three pre-named collections by default:
Vehicles I Own, to include - where applicable - Hagerty insured vehicles,
Vehicles I Want, and;
Vehicles to Watch.
Beyond the pre-named collections, users could create an unlimited number of custom collections.
Favorites List to Collections
Since the garage was being designed as a feature expansion of the existing singular My Favorites List from the heavily trafficked Valuation Tools product, the challenge was figuring out how to seamlessly transition current users with an existing My Favorites lists to this new product and naming convention. I brainstormed a few ideas, including:
Simply maintaining the existing My Favorites list as separate list to live outside of the collections,
Moving existing favorites lists to a new garage section labeled Saved Vehicles to live outside of their collections until manually organized, and;
Moving favorites lists into a custom collection titled My Favorites.
After much discussion with the lead developer, we decided on #1 - maintaining the My Favorites list as a separate list outside of collections.
The most heavily trafficked pages on the Valuation Tools product were the individual vehicle dashboard pages, i.e. 1965 Ford Mustang GT. We could leverage this traffic, seamlessly building off the existing overflow menu to generate curiosity around the new garage menu items.
EXISTING DASHBOARD MENU
EXISTING DASHBOARD MENU EXPANDED
PROPOSED DASHBOARD MENU
Designing the Garage
As a feature extension of Valuation Tools, many of the styles and UI patterns were already well defined so my efforts were focused on layout priority and content. The only business requirement was to ensure that Insurance Notifications were top of priority.
The intention of the garage dashboard was to provide users a quick glance snapshot of their garage activity including collection values and value change activity, insured vehicle notifications (if applicable) and an activity feed. Including media articles and videos related to vehicles "parked" in their garage was a good way to cross market the Hagerty Media site while providing added benefit to the user.
Collection detail pages include a list of vehicles contained within, the total collection value, and its value change over time. Users were provided options to update a vehicle's condition rating or body style / engine type directly from the list, add a vehicle to the collection, or modify the collection description.
Single to Multi-Vehicle Quote
The goal of the collection quote was to convert the existing single vehicle detail collection form fields - as shown below - to a multi-vehicle detail collection flow in as few additional pages as possible.
What I ultimately needed to avoid was to send users down a single quote flow separately for each vehicle.
SINGLE VEHICLE FIELDS A
EXISTING VEHICLE FIELDS B
After confirming any form field dependencies that I needed to be aware of when restructuring the questions, I was able to convert the single vehicle flow into a multi-vehicle flow with just one additional page:
MULTI-VEHICLE FIELDS A
User can add or remove vehicles and/or adjust vehicle values on this first screen.
MULTI-VEHICLE FIELDS B
Modification type, length of ownership and miles driven each year inputs are separated by row per vehicle. Field inputs stack responsively.
MULTI-VEHICLE FIELDS C
Remaining questions are rewritten to accommodate multiple vehicles where applicable and radio button selection (existing UI pattern) is defaulted to Yes.
Upon selection of No, row expands to allow users to provide varying information on a per vehicle basis.