John Leufray

Digital Product Designer

City Auto Glass

January 2019

UX / Visual Design

Project Vision

City Auto Glass is a chain of locally owned and operated glass repair and replacement shops in the upper Midwest. After a rebrand, they needed a new website to go with their updated logo design. Insurance agents make up 97% of their business, so the website needed to allow those users to complete routine requests quickly while also functioning intuitively for private automobile owners. They also wanted to capture more customer emails.
Challenge
Redesign current website to be competitive with their national competitor, Safelite. Make the  Feature their new free auto sanitation service for COVID-19 that disinfects customer vehicles.
Solution
Design a bright and inviting website that incorporates the new brand direction with modern web features and mobile-first principles. Allow customers to contact them quickly and easily find a nearby service location. City Auto Glass website on iPhone and iPad

User Cases

Stakeholders wanted the new website to maintain the structure of the existing one, while streamlining the process for customers to find and book service from local providers. They want to maintain their focus on insurance agents and include new services available for all customers.
City Auto Glass persona Jennifer

Jennifer

Insurance Agent, 41

Jennifer is an auto insurance agent whose customer needs glass replacement services. She wants to help her customer as quickly as possible, but since she requests glass replacement frequently she wants a streamlined process for requesting service.
City Auto Glass persona Todd

Todd

Uber driver, 35

Todd is an Uber driver who was driving on the highway when a rock hit his windshield. He doesn’t want to pick up any fares with a cracked windshield, so he needs to find glass repair services as soon as possible so he can get back to work.

Pain Points

Competitive Audit

Safelite
The industry leader in glass replacement, the Safelite website was easy to navigate and understand for the consumer. Their website contained a lot of information in the interior pages, but it was organized well. What distinguishes City Auto Glass is their level of service and focus on insurance agents. So both of those differentiators needed to be apparent in the redesign.

Ideation

The original homepage was pretty drab and didn’t serve the company’s business goals. They wanted to promote their new sanitization service for COVID-19, wanted more quote requests and phone calls, and they wanted insurance agents to have separate entry points to vehicle owners. The original search feature only worked if the customer knew their zip code, which they may be unaware of if they’re requesting service away from home.
Before
City Auto Glass website before The redesigned page featured a carousel header on the homepage featuring the company’s sanitization services, which can be changed or added to based on future promotions. The phone number, search and request quote buttons were placed prominently at the top of the page. I gave insurance agents two different calls-to-action so they could easily navigate to the information they need. And I added testimonials to the bottom of the page as the company’s market differentiator is their personal service.
After

Usability Study Findings 

The usability study I conducted using the high-fidelity prototypes confirmed the aspects of the redesign that were successful.
  • Users think the new flow is easier and faster
  • Users like the map search feature

Solution

City Auto Glass website locations map page
Search nearby locations
The previous home page only included a Zip code form for users to find service providers, which excluded users who were away from home or otherwise didn’t know their Zip code. While the previous Locations page was a list of service providers in order of store number, which made it time consuming for users to identify the nearest location. A new map search with geolocation allows users to locate the closest provider more quickly. And large buttons on the Location card allows users to quickly schedule service or get directions. City Auto Glass website home page
Get a quote fast
The original website displayed a muted image that was static, while the new redesigned home page features a carousel that City Auto Glass can update with new promotions and services. Prominent buttons for Get a Quote and Schedule an Appointment help speed up the booking process and address the business need for capturing more customer emails. City Auto Glass website blog page
Auto glass safety blog
New blog feature was suggested to improve the website’s SEO and attract more customers. It allows City Auto Glass to publish articles to promote their industry expertise.

Takeaways

The City Auto Glass website was one of the few times that I was only tasked with visual design and UX. Their brand goals were pretty clear and I was able to deliver a redesign that they fell in love with. It was fun to collaborate with a team remotely and I also learned new practices for preparing assets for delivery to developers. Check out the website.

Next Post

Previous Post

© 2023 John Leufray

Theme by Anders Norén