Firestone Complete Auto Care • Feb 2023 - June 2023
Booking Widget
The Booking Widget is a service scheduler on Firestone’s service pages. This is a secondary booking feature on the Firestone website featured only on their service pages.
🎉 User Confirmation!
100% of participants preferred our enhanced version of the expedited booking widget over the existing experience!
Unfortunately, while we got as far as handing off the designs to developers, this project was deprioritized and developers never got a chance to start.
Deliverable: Mobile Web Design
Role: UX Researcher & UX/UI Designer
Team: 1 Project Manager, 1 UX/UI Designers, 1 UX Manager, 3 Developers
Tools: HotJar, Figma, Playbook UX
🖼Project Framework
The Problem
While appointments were being booked on the widget, there was a high drop-off rate. Users were experiencing a number of pain points that prevented them from completing their tasks on the widget.
The Goal
The aim was to enhance the current widget experience with visual and functional updates to increase appointments booked.
🎞 HotJar Insights
What is HotJar?
Hotjar is a website analytics tool that helps website owners understand how users interact with their site. It provides recordings of visitor sessions, heat maps, and other amazing data.
After reviewing HotJar, I gained valuable 3 insights into customer behavior:
Insight 1
Customers search for coupons for services before, after, and during their booking process
Insight 2
Customers are “rage-clicking” as they scroll through available times
Insight 3
Customers are unable to change their store within the widget
💭Design Recommendations
1.Provide users with an incentive to book an appointment
2.Design an alternate way of showing available time slots
3.Allow users to change the store within the widget
4.Show multiple store availability within the widget
1.Provide users with an incentive to book an appointment
Coupons as an Incentive
Coupons were a large part of the user’s journey and a big reason they were leaving the page. As a result, I decided to include coupons within the widget.
I conducted usability testing for version 1. After testing I discovered that participants were not sure what the cards were. It was not clear to them they were coupons.
Version 1
I added a label to indicate that coupons were being shown within the widget
Version 2
Additionally when coupons were added I had initially designed the state of the card change - however this was not clear enough for the users.
In my revisions there was now a label above the coupon cards, I took full advantage of it for the coupon-added state.
2.Design an alternate way of showing available time slots
Time Selection Design
I removed the need for a horizontal scroll and instead chose to break the time slots into different times of day, morning afternoon, and evening. This method allows for the visibility of available time slots while also limiting the need for vertical scrolling.
If no time was available within a time of day, my initial designs had the tab disabled, however during testing many users still tried to click on the morning tab.
Version 1
I decided to enable the tab even if no time was available. This design turned out to be beneficial as I was able to add an alternate path for users. If they only had mornings available they could change location or date to find a morning time slot.
Version 2
3.Allow users to change the store within the widget
4.Show multiple store availability within the widget
+
Enabling Store Selection
While allowing users to select a store I also wanted to allow them to select a time in the same step. This would remove the need to go back and forth between 2 screens, one to select store and another to select time.
👩💻Collaboration With Developers
For the handoff to developers, I created annotations for every piece of the design. Using color and number indicators I carefully detailed the functionality and interactions of each piece of the design.
The first walk-through of the annotations brought up questions from developers that had not been answered and as the discussion progressed we uncovered important edge cases!
Edge Case 1 - What if there are no coupons?
The devs asked, "Do we just remove the section entirely?"
However, removing the coupons within the widget when there aren’t any coupons does not mean users would not go looking for it. So to keep users on the page I made it clear that there were no coupons for the service.
Edge Case 2 - Coupon Error
I added an error message for any instances a coupon could not be added.
If no message existed the user might end up rage-clicking on the add button, wondering why it is not working.
Edge Case 3 - What if there are no additional stores or times available?
In the store selector, I reused the component for no coupons, providing users with information like store closures or no additional stores in their radius.
I did not want to remove stores without availability because this may be the store users are looking for and I included a message for no additional stores to provide users with alternate actions they could take.
Unfortunately, while we got as far as handing off the designs to developers, this project was deprioritized and developers never got a chance to start.