GUESTAROO BRANDING & WEB APP UX/UI
From mid 2016 - 2017, I led the design of a digital product tentatively titled My Garage. The goal of the My Garage project was to create a responsive web application that provides classic car collectors and dreamers a space to create and save an unlimited number of custom car collections in which they can track their values over time and easily obtain a multi-vehicle insurance quote. This product was intended to be an extension of the My Favorites section of the Hagerty Valuation Tools application, and is not currently in production.
My Roles: Product Design, UI, IxD, Stakeholder Relations and Presentation, Creative Direction
Client: Hagerty Insurance Valuation Team
Tools Used: Axure
Who I Worked With: Stakeholders, Delivery Manager, Lead Developer, Graphic Designer
Working from a business scope, my first step was to define the UX and UI elements that would meet the feature and functional requirements:
The primary goal of the product was to get users to create a garage so that they can follow the value of their collections over time, to be accomplished by -
1. Branding the product and properly labeling its elements
2. Allowing for multiple vehicle collections and their value tracking
3. Creating a marketing campaign around the new product
The secondary goal was to easily transition the user down the appropriate quote path - either standard multi-vehicle or Private Client Services - as determined by the total value of the collection, to be accomplished by -
1. Accurately calculating the value to be quoted as a determination of which quote path to send the user
2. Preloading vehicles into the quote, revising the quote question structure to best suit multiple vehicles
BRANDING & LABELING
There was already an idea floating around to brand the product as My Garage, which fit the product description well, so I ran with it. The garage would house a user's vehicle collections, which needed to include three pre-named collections:
1. Vehicles I Own to include, when applicable, Hagerty insured vehicles
2. Vehicles I Want
3. Vehicles to Watch
Beyond these pre-named collections, the user could create an unlimited number of custom-named collections.
The challenge was figuring out how to transition current users with an existing My Favorites lists to this new product and naming convention. I brainstormed a few ideas, including:
1. Transitioning users' existing favorites lists to a new section titled Saved Vehicles
2. Moving users' favorites lists into a custom collection named My Favorites
3. Maintaining the My Favorites list as separate list outside of the collections
After much discussion with the lead developer, I went with #3 - maintaining the My Favorites list as a separate list outside of the collections, with the purpose of providing a space for users to quickly save a vehicle to for thoughtful organization into a collection at a later time.
MY GARAGE DASHBOARD
The dashboard / homepage was designed to provide users a snapshot of their garage activity, including collection tiles with their total value and value change, insurance notifications if applicable, a recent activity feed, and articles and videos related to vehicles "parked" in their garage. View in mobile and tablet.
Collection detail pages include a list of vehicles contained within, the total collection value, and its value change over time. Users can 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. The Hagerty Insured Vehicles list appears only on the Vehicles I Own collection page and if applicable to the user.
MARKETING THE PRODUCT
With the vehicle dashboard pages (e.g. 1965 Ford Mustang page) of Hagerty's Valuation Tools being so heavily trafficked, I decided to leverage this traffic and build off the existing overflow menu to generate curiosity around the new conditional menu items.
Logged out users accessing the My Garage functions outside of the product system would require login in order to add a vehicle of interest to their garage, so I created a flowchart to address this issue:
The goal of the collection quote was to combine the existing single vehicle detail form fields, as shown in the two screenshots below, into a multi-vehicle flow requiring the least number of pages as possible.
SINGLE VEHICLE QUOTE - 1
SINGLE VEHICLE QUOTE - 2
After researching any form field dependencies that I needed to be aware of when restructuring the questions, I was able to design a multi-vehicle flow in just three pages:
MULTI-VEHICLE QUOTE - 1
User can add or remove vehicles and/or adjust vehicle values on this first screen.
MULTI-VEHICLE QUOTE - 2
Modification type, length of ownership and miles driven inputs per vehicle are separated by row. Field inputs stack responsively.
MULTI-VEHICLE QUOTE - 3
Collapsed by default, each of the fields expand - as shown in the screenshot below - depending on radio button selection.