Tax Pro Listing & Profile
UX/UI Design
Redesigning and reframing the Tax Pro and client experience through intuitive, visually appealing listing and profile pages that facilitate quick discovery and appointment booking.
How do users independently find Tax Pros? And what does that experience look like if designed for both the client and the Tax Pro?
The original TPP, TPL, and City/State/World pages were outdated, clunky, and lacked a hierarchy that made sense to both Tax Pros and their clients. Tax Pros wanted a way to share their services and booking options on social media that was beautiful and conversion-driving, and we jumped at the opportunity to reorganize the IA of a cluttered page and bring it up to brand standard with our (then new-ish) design system.
Our Tax Pros are the heart of our business, and we focus on creating products for them as much as we do the client—when the Tax Pros are happy, they make sure our clients are, too. With this in mind, we knew we needed to redesign the Tax Pro Listing and Profile pages to be more intuitive and useful resources for users to find and connect with tax professionals they’ll love. Our goal was to provide a streamlined and visually appealing experience, allowing users to filter Pros based on their individual needs and easily view a Pro’s profile or book an appointment. For the Profile, we sought to provide a visually updated and dashboard-style layout that would allow users to easily access relevant information, as well as enable tax professionals to highlight their skills and promote themselves on social media.
The problem
The original Tax Pro Profile page was not only visually outdated, but also disorganized and emphasized the wrong information.
To begin, we analyzed the previously-gathered pain points of our target group, which consisted of both clients and tax professionals. We discovered common gripes among both groups, such as small and blurry photos, a busy layout, and a hierarchy that prioritized less relevant information. These pain points resulted in lower conversion rates. We hypothesized that by addressing these issues, we could increase appointments with tax professionals and create a profile page that Tax Pros would be excited to share online.
From our research, we knew clients were concerned with finding a Tax Pro that understood their unique situation, whether it be small business income, military service, or gig work. The previous listing page did not include any filtering, which we felt made it difficult for users to quickly and confidently choose a Pro they felt comfortable with.
Our approach
On desktop, the filters would appear on a left-side rail. As a user selects a filter’s box, it is automatically applied to the listings. On mobile, filters would be nested in an accordion that sits at the top of the listing feed, and a user would have to manually apply the filters to their selection by clicking the secondary CTA.
To remedy this issue, we began with the Tax Pro Listing page, proposing an updated, branded solution with a few additions. First, we advocated for a filtering system on the listing page, which fell perfectly in line with other .com interactions that allowed users to narrow their selection of Tax Pros by expertise. Second, we wanted to introduce fast-facts “tags” to be displayed on the listings next to a Pro’s name and picture. We felt this was a way to quickly provide at-a-glance information about what the Tax Pro specializes in and what kind of experience they have. Because the tags were not interactive, we sought to introduce a completely new visual treatment that wouldn’t be easily confused within the page’s existing clickable language. After attempting a green stroked outline, we landed on a pale green background, understanding that the text would remain AAA accessible while the background would not pass WCAG guidelines for an interactive element, further emphasizing its static property.
Implementation
One of our biggest successes in our Tax Pro Listing redesign was the hero treatment, with the office details on the left split and what we nicknamed a “superhero” image treatment on the left. From the user feedback we received, using professional photos of actual Tax Pros helped our clients connect and feel confident in their Pro’s professional abilities. We’ve since migrated this treatment to other parts of the site, learning that it increases client trust and excitement to work with Pros when used in an appropriate context.
After tackling the Tax Pro Listing, we conducted a brainstorming workshop to explore ideas for a completely redesigned Tax Pro Profile page. After brainstorming to decide what problems existed and which we could solve, we created a low-fidelity wireframe to illustrate our idea to stakeholders.
One of the largest challenges we had to tackle was the wide variation of data among tax professionals. For example, some tax professionals had multiple certifications, while others had only one. We needed a layout that showcased expertise in a way that highlighted quality over quantity—functionally, these modules needed to look as good with one main point as they did with 10. We specifically knew from research that we needed to avoid overemphasizing years of experience (as done on the previous version), which could inadvertently discriminate against newer professionals. Additionally, we needed to account for copy entered by Tax Pros themselves, which may not be as eloquent as the dummy copy created by our writers.
Our first attempt at high-fidelity was exciting, but we still felt it was missing the mark.
Our approach of a narrow, static left rail and a wide, dynamic right rail wasted a lot of real estate on the page, and could lead to awkward scrolling on shorter viewport heights. The jump links in the left rail were confusing, and adding cards to an already complicated layout felt overwhelming. We also had gotten a little carried away in the excitement of a new desktop design and hadn’t considered how the layout would change in mobile.
We took the elements we liked from this version—the large photo, the tags, the multiple ways to get started—and went back to the drawing board.
We landed on an engaging header that highlighted the important, at-a-glance information, followed by modules that prioritized the content our Tax Pros and clients found useful. Carrying over our tag system from the Tax Pro Listing was a quick win for the header section, enabling a general overview right off the bat. We really wanted to keep the header simple and uncluttered, so we needed a solution to help explain the tags and allow profile sharing. We created modal pop ups for each, where the tags explanations lived behind a toggle tip and the sharing information lived behind a small “share” icon next to the Pro’s name.
The solution
We expanded the subsequent modules to fill the whole frame, giving breathing room and importance to each section. While we liked that the original design had anchor links to specific sessions, we felt the new page gave users more autonomy by emphasizing the information they needed right away in the header and encouraging scroll as they deemed necessary.
Both clients and Tax Pros agreed that beyond the basics, the most important information to highlight was location, expertise, and certifications & education. Location and expertise modules were built to our goal of housing variable amounts of content, which we achieved through a 50/50 card and map split location layout, and a three-column icon/explanation layout for expertise. By truncating our areas of expertise module with a “show more” expansion button, we were able to accommodate tax pros with more experience, while not taking anything away from our newer pros who are still in the process of becoming diverse experts.
We also wanted to keep in mind the purpose of this page: For users to book appointments with Tax Pros. We felt that no matter where they were on the page when they made the decision to book with a Pro, they should be able to do so. We decided to create a special collapsed, sticky state for our header that would replace the navigation bar as a user scrolled, keeping the Pro’s name and “book appointment” CTA at the top of the the viewport. In mobile, the Pro’s name was sticky at the top of the viewport, while the CTAs anchored to the bottom of the page.
The output of our project was a redesigned, BDS-aligned Tax Pro Listing Page that allowed users to filter Tax Pros based on areas of expertise, and a dashboard-style Tax Pro Profile page that highlighted each tax professional's experience, offices, certifications, expertise, and the general process of working with an H&R Block tax professional.
With the redesign of our Tax Pro Listing and Tax Pro Profile pages, customers now had a visually appealing and intuitive platform to search for specific tax professionals, view detailed profiles, and book appointments at specific offices directly from a profile. This streamlined process improved the user and Tax Pro experience, resulting in increased engagement and satisfaction from users and Tax Pros.
From a business perspective, the visually aligned Tax Pro Profile page provided an effective platform to promote tax professionals and facilitate appointment bookings, driving growth and customer retention. The pages currently remain fairly hidden from the site, and we hope to advocate for more prevalent access to the listing and profile pages in the future to ensure a more personable experience with Tax Pros across the nation.
Team
Haley Mitchell
Designer
Jose Arellano
Designer
Kenzie Tubbs
Lead Designer
my contributions
Created and designed expertise tags
Built and polished Desktop Designs in Figma, and later added Tablet and Mobile designs
Presented designs and workshop results to stakeholders