Caliber Automotive Website
A unified online experience to reimagine the automotive services category.
OVERVIEW:
Caliber Automotive came to Barbarian with a unique challenge. They had four different types of services (Collision, Auto Care, Glass and Fleet) that all functioned independently from one another on separate site experiences, but operated under the Caliber brand.
It was important that we simplify the experience and combine the lines of business to create a unified website that would address the users needs.
USERS & AUDIENCE:
We had to reach the customers where they were - whether they just had had an accident or needed an oil change. We were tasked with (1) creating a digital design system, (2) recommending a tone of voice that could be adjusted depending on the service they needed and (3) restructuring the site architecture to create a simplified experience.
Our approach was to treat their digital site as one building, housing four different apartments inside. They may all have a similar look and feel, but each has its own unique functionalities, and unique business problems we needed to solve for.
ROLE:
My role on the project was UX Lead.
The Strategist and I worked together to align on our experience approach. I worked closely with the Creative Director and Product Designer to apply their digital design system to the new unified site.
Throughout the project we worked with the client’s agency partners to guide them through writing concise content while improving the SEO.
I conducted user testing with 12 participants, creating a robust user testing report for the client.
I worked with our in-house developers and QA to assist with writing the Jira stories as they built out the website.
SCOPE:
The timeline was aggressive to begin with, and as the first 2 months were spent deciding between different design system options and we quickly realized we were eating into our actual design time.
We worked in 1 week sprints and I presented our work to the client in twice-weekly meetings. - designing & revising at a break-neck speed.
We designed the Navigation, Homepage, fully functioning Location page with filters, 4 services pages with a service detail page, Why Caliber (an About us page) with a Blog Landing page; as well as 4 forms for Authorization, Appointment, Estimate and Contact us - in about 10 weeks.
PROCESS:
First we restructured the site architecture to create a branded house rather than a house-of-brands.
We only needed a simple nav with 4 options for Services.The locations were key as this would be most of the traffic for the website. There were some unique problems to solve. For instance, Auto Care is only offered in specific regions in Texas and Glass "locations" could be completely mobile without a brick-and-mortar.
We created legible banners so when the user filters through lines of business they’ll be able to see clearly what’s available in their area.
Our services were color coded with colors inspired by signage and colors you would see on the road.
Each of the 4 forms laddered into back-end systems that dictated how much flexibility we could have with form content and questions; but we pushed for one-at-a-time questions, progress bars and simplified content where we could.
OUTCOMES & RESULTS:
The user testing was the most successful I've seen.
Consciously or unconsciously, the color coding and tone of voice really helped the user navigate between services and locations. The test subjects overwhelmingly felt that Caliber was trustworthy, professional and friendly.
To learn more about the website, please enjoy this quick video of the mobile prototype.
We helped Caliber tell a single story for their four lines of business, and packaged all that into one centralized brand experience. It felt modern and relevant, while still keeping familiar elements that people associated with Caliber.
View more
Northwestern Mutual Digital Ecosystem
Oversight Board Case Management Tool
Mayo Clinic Callback Request Form
