UX Case Study: Appointment scheduler for Wellsfargo.com
Timeline Jan 2022 - Aug 2022
Role Product Designer
Skills UX-UI design
Role Product Designer
Skills UX-UI design
Problem Context
The appointment scheduler on the Wells Fargo website needed updating to improve the experience for both bankers and their customers. Owning the UX design from beginning to end, the improvements I made reduced frustration for customers, increased self-service, and ensured bankers were prepared when meeting their customers, creating a more usable experience for everyone.
The problem was that the legacy appointment maker UX was very dated, and the tab-layout of the form was confusing to customers . Due to pandemic restrictions, the need for its use increased, and unfortunately, so did customer service and banker complaints.
Customer pain points
The tab layout for a form was unexpected for many people, which slowed them down. Additionally, the order of some of the inputs was problematic. Choosing a location first and day & time at a later step caused users to repeat a step when selected locations didn't have available appointment times. It forced them to guess at picking a location, when their priority was the day and time.
The tab layout for a form was unexpected for many people, which slowed them down. Additionally, the order of some of the inputs was problematic. Choosing a location first and day & time at a later step caused users to repeat a step when selected locations didn't have available appointment times. It forced them to guess at picking a location, when their priority was the day and time.
Banker issues
Some branches were understaffed with bankers, and some days they might not have any times available for appointments at all. Bankers also saw that many customers coming in for appointments learned through the banker that they themselves could go online to get the information they needed or perform the service themselves. Also, in order to better prepare & serve them more efficiently, the bankers wanted more information on their customer's needs ahead of the appointment.
Some branches were understaffed with bankers, and some days they might not have any times available for appointments at all. Bankers also saw that many customers coming in for appointments learned through the banker that they themselves could go online to get the information they needed or perform the service themselves. Also, in order to better prepare & serve them more efficiently, the bankers wanted more information on their customer's needs ahead of the appointment.
Goals
My goals were to improve the usability of the Make an Appointment web experience, allow the form to take in & display more relevant information, and update the visual styling to be more on brand.
(Below) The original appointment online experience in a tab-formatted vertical form would expand each step in a downward direction as the user progressed.
Research Insights
I knew from earlier research that customers had 2 different types of priorities when making an appointment: a location-based priority, and a date-based priority. The current flow was especially problematic for customers who had a date-specific need for an appointment. For them, choosing a location first was not helpful if that location turned out to have no times available for several days.
Design Strategy
To address both of the user type issues throughout the process, the UX flow was addressed first, then the format of the input form, and finally the styling.
Reordering the flow
I wanted to ensure relevant information was shared to both the customer and the banker assigned to the appointment, so I reconsidered some of the important inputs, such as the existing customer log-in credentials and additional comments.
Instead of logging in at the end, having users sign on at the start would surface options for picking topics related to their accounts. Previously a radio selection, the input became the starting point, and was redesigned in a more appealing way, through the use of large buttons with an icon illustration
Progressive format
I decided to isolate the steps with a progressive form format to help the user to focus on each step. I retained a summary as the user progressed along the input form. A “previous” button allows the user to go back to make changes would also clear some of the inputs (i.e. date, time), so a popup message was added to confirm the user’s choice to go back.
Contextual & required info
Some of the reasons when selected surface a callout with a link to more information or a self-service, such as comparing checking accounts or applying for a credit card. This reduced the number of unnecessary appointments, freeing up banker time to focus on non-self service customer needs.
Need-based search results
To make the search for location and time less painful, I combined the actions of choosing a date with selecting a location in the same step. Working with the engineering team, we enabled the platform to verify if there were appointment times available on the desired day. If there were none, it would show a link to search for the next available day for that specific branch. This was helpful for users for whom a specific branch was more important, and the day and times were more flexible to them. This change made it easier for both user groups to prioritize their search.
(Below) A list shows several branches on a Friday have no available appointments that same day. Users can choose to find the next available date for one of the locations, or else try a different date to see the list again.
(Below) Once a location is selected, the next screen shows appointment times available at that location for that day, plus the following 2 days.
Challenges
Getting the interaction between the date picker and showing available hours was tricky. Using the date picker would place the selected date first in the carousel below. Using the back and forward arrows shifted the time picker to show available 30 time blocks. Depending on the reason selected, the time blocks would either be 30 minutes, or 1 hour. If a time was not available, it would simply not be listed.
(Below) Make an appointment for mobile was more responsive than its predecessor.
Outcome
I was happy to address the banker and customer pain points to provide a better experience:
Reordering the user flow ensured relevant information was given to customers and bankers, helping bankers provide more efficient, relevant service.
Highlighting the self-service option was convenient for customers & freed up bankers' time.
Assisting users with different priorities and using a progressive format made the process more seamless for customers.
The Make an Appointment experience was successfully released and is currently available to use on the Wells Fargo website.
