Hagerty Event Locator

UX Design

Tasked with designing the user experience of an event locator for classic car events to add to the Hagerty website, I began by analyzing competitors and determining critical components. I worked through designing the ux through sketches and then numerous iterations in Sketch. My final design was then to be handed off to a visual designer. 

 
 

 
 

The Brief

Hagerty, the leading insurance agency for collector cars in the world, is home to the largest network of collector car owners. While the company has taken the insurance aspect by storm, their recent goal has been to make themselves more than just insurance. In the quest to branch out beyond insurance, Hagerty has created its own drivers club, magazine, and more. One of these many new initiatives is to become a hub for these classic car owners and enthusiasts to connect with the classic car community, namely through events. To achieve this, the company set out to create an online tool to locate car events. The hope is that this new tool would allow owners and enthusiasts to find and attend events, thereby strengthening the classic car community. Another goal is to increase Hagerty visibility and website traffic through SEO via this tool.

Process

  • Competitor Analysis

  • Ideation & Sketching

  • First Iterations

  • Connecting Pages & More Iterations

  • Proposed Solution

 

 

Analysis & IDeation

To begin, the competitor analysis consisted of determining key factors of other car event locators, and how our tool was to solve the problem of finding events and connecting the car community uniquely. Based on this research, it was evident there was an obvious need for a better way for classic car enthusiasts to find events and connect with their community. The team was then able to pinpoint the features we hoped to implement, and how they would tie into and compliment Hagerty’s mission. I also analyzed Hagerty’s current agent locator tool to determine how the team had previously went about a similar project, learn what was and wasn’t working, and determine how that could apply to this project. Following this analysis, I brainstormed and sketched possible solutions and features.

 
Hagerty’s agent locator tool

Hagerty’s agent locator tool

 
 
 
 

First iterations

With a vision of what a solution for this tool could look like, I jumped right in (see closing thoughts for why I might change the way I did this next time) and used Sketch to create initial wireframes. I began with the most important filters, and created both a list and calendar view to display events. I also proposed a modal design for more detailed event information. After running into the problem of users having to scroll back up to change their filters, I also played with the idea of making the filter box sticky. 

 
 

After getting feedback from the team, I updated serveral aspects of my solution. First, I changed the placement of the filter box to the left side to decrease the cognitive load on the user by allowing them to always have their filter information in view while scrolling. I also updated the wireframes to reflect the new website design.

Another concept implemented during this iteration was filter auto-fill (location, today’s date, 25 mile search radius, and all categories checked), to minimize work for the user once they landed on the page.

 
 
 
 
 

Connecting HDC

At this point the team started to think about how this page would integrate with other pages, most importantly the current Hagerty Drivers Club (HDC) page. Discussion made clear there was opportunity to connect the event locator to this HDC page, and doing so would benefit users of both pages.

After sketching ideas of how this connection could be made, I settled on two solutions to bring to the team: one involved a button linking the pages, while the other integrated the locator into the HDC page. In both cases the solution included making the static “Upcoming Hagerty Events” clickable, directly linking the detailed information for easy user access. Team feedback determined the button connection would lead to the best experience for users, so I then ideated solutions based on this connection.

Here, my initial design began to change as I explored how an expandable event within the locator rather than an event modal could lead to a more seamless transition between pages.

 

Flow for button connection

Flow for integrating locator on HDC page

 
 
 
 
 
 

Final Design

For the final design, we decided expandable event modals lead to the most intuitive and seamless user experience. The expandable modals teaches users the functionality of getting the detailed event information just by showing the top modal expanded, making for the lowest learning curve and frustration possible. The team and I decided that this design was the most intuitive and it taught the user how to user the event locator in just one click. From the HDC page, users can now click event links which bring them to the event locator with that event expanded (and the filters inputed with that events date, location, etc.), or click the 'Go to Event Locator' button. 

This final design offers solutions for all our initial goals, allowing users to easily find classic car events, and seamlessly navigate between pages to find the information they want, while increasing Hagerty visibility and traffic through SEO.

 
 
Mockup courtesy of https://www.anthonyboyd.graphics/mockups/isometric-matte-black-2017-macbook-pro-mockup

Mockup courtesy of https://www.anthonyboyd.graphics/mockups/isometric-matte-black-2017-macbook-pro-mockup

Next steps

For this project I focused only on the UX of the event locator. Next steps would be:

  • Finish tweaking designs based on what event information is actually able to be collected (filters and event details)

  • Hand designs off to a visual designer, and then off to developers

 

 

Closing Thoughts

This project helped me learn how UX fits into the overall design process for a large company with many teams contributing. Going through the workflow and process from beginning to end helped clarify where I fit in as a UX designer among the many roles, and how important inter and cross team communication is. I also learned the importance of sketching, and were I to do this again, I would more heavily focus on sketching and low fidelity wireframes before jumping into higher fidelity to get to the best solution more quickly and efficiently.

 

Testimonials

"Olivia interned with our team at Hagerty during the summer of 2018. She took the lead on her UX projects whenever she could, using our team as a resource. Olivia strived to help our team, taking on as many projects as she could muster, also knowing when to respectfully decline.

Watching her grow and discover the UX process in the workplace, I saw a passionate and compassionate individual well suited for the field. As her mentor, I helped Olivia on several projects, including researching the use of phones in public spaces. When we later discovered that we would need to conduct additional research, Olivia was ready to pivot. She has grown much since the beginning of her internship, now leaving with additional skills in user research, interviewing, affinity diagramming, and more.

Like any intern, she required more assistance in the beginning, but Olivia quickly took off on her own and integrated herself into our team. Olivia is a self-motivated learner and worker, who recognizes when to reach out for guidance. She proved to be an insightful addition to our team. Olivia and her UX skills would be a valuable addition to any team."

    - Lissy Torres, UX Designer, mentor

 

"Olivia joined the Hagerty Digital Commerce team as a UX Intern over the summer. Her primary focus was to gain greater familiarity in conducting observational user research and to work on her prototyping skills using Sketch. Olivia was a detailed oriented contributor and it was great having her on our team."

    - Andreas Hug, Digital Manager, manager