Role
Duration
Team
H&R Block aimed to redesign its website to address key usability challenges and align with its business goals. The previous website struggled with complex navigation, limited mobile responsiveness, and the absence of personalization, creating friction for users such as individual tax filers, small business owners, and self-employed individuals.
The redesign aimed to
Simplify navigation and improve usability.
Optimize the mobile experience.
Introduce features like interactive tools and personalized content to drive engagement and conversions.
Problem Context
The existing website faced several challenges, like:
Complex, inconsistent navigation pathways.
Mobile performance issues, with mobile users spending 40% less time on the site compared to desktop users.
Lack of personalized content and interactive features.
Marketing inflexibility, with limited options for creating standalone campaign pages.
Problem Statement
How might we create a seamless, user-friendly, and mobile-optimized platform that caters to the diverse needs of H&R Block’s users while driving engagement and conversions?
Discovery and Research
What different research methodologies unveiled
The Discovery and Research Phase combined stakeholder interviews, a UX audit, analytics insights, and competitor analysis to uncover critical pain points and opportunities.
Stakeholders highlighted frustrations with the office locator and poor mobile usability, with one noting, "The mobile site is frustrating to use, especially for finding information quickly".
The UX audit revealed inconsistent navigation and unclear CTAs, while analytics showed mobile users accounted for 58% of sessions but spent 40% less time on the site, emphasizing the need for mobile-first optimization.
Competitor analysis of platforms like TurboTax and Wealthsimple identified best practices such as intuitive navigation and engaging mobile designs.
Key Insights
Navigation is confusing as it focuses more on content pillars and segregated audiences than different filing methods.
Current navigation had multiple content funnels that didn't make it easy for users to achieve their end goal i.e. File Taxes.
People accessing through mobile have bad experience with features like Office Locator or just simply accessing information.
As more of Gen-Z audiences get into tax net, they are increasingly using phones to access information.
Confusing in labeling and CTA copy.
With very similar offerings, customers can easily get confused with various options and lose track of which option they were trying to sign up for. So there needed to be clear differentiators.
Modular Design for flexibility with Marketing Content
To cater to marketing needs, it is essential to create a design system that allows ease of use when setting up new pages for marketing purposes.
Objectives and Goals
To carry the project forward, we defined four key goals:
Simplify Navigation:
Streamline content discoverability and driving customers to action to sign up for different filing methods efficiently.
Optimize Mobile Experience:
Address mobile user pain points and improve retention.
Support Marketing Flexibility:
Use a strict structure for core pages while enabling standalone campaign pages.
Enhance Engagement and Provide Clear Labelling:
Introduce interactive tools and personalized content while also providing clear labelling so that the end user does not get confused and can easily pick from the different filing methods.
These goals guided the project toward delivering a user-centered, accessible, and efficient platform for the H&R Block customers.
Ideation Phase
Information Architecture
To address the pain points identified with the previous content structure, the focus of the redesigned Information Architecture (IA) was on removing clutter and creating a streamlined hierarchy. This approach not only improved usability for end users but also established a sustainable framework for the marketing team to maintain clarity moving forward.
The new IA categorized pages into five distinct groups:
1. Taxes
This category included all pathways for filing taxes, helping users easily identify and navigate to the appropriate platform based on their needs.
2. Resources
Designed to centralize helpful tools and content, this section included the Tax Calculator, blog articles, support materials, and other resources aimed at assisting users throughout their tax journey.
3. About
A dedicated space for information about H&R Block Canada as an organization, including its mission, history, and leadership, providing users with greater context and trust.
4. Other Areas of Focus
This category housed content related to H&R Block's secondary initiatives or offerings that did not directly fall under core tax services or resources.
5. Standalone Pages
These pages offered flexibility for marketing or informational purposes. They were tailored for specific campaigns or topics that did not fit within the other categories but were critical for user engagement and promotional efforts.
This refined IA ensured intuitive navigation, eliminated redundancies, and provided a clear structure for both users and administrators.
Design Phase
The design phase was broken into several key stages:
1. Content Review and Planning
The process began with a collaborative content review. This exercise provided clarity on:
The essential content blocks and features needed for the redesign.
Opportunities for long-term goals that the modular content blocks could support.
This review set a clear foundation for the features and layout, ensuring alignment with both current needs and future scalability.
2. Incorporating Insights and Guidelines
With the content structure finalized and competitor research in mind, I turned to the brand guidelines provided by the H&R Block team. These guidelines informed the design system’s development, ensuring visual and functional consistency across all pages.
3. Content Block Development
Using the insights from the content review, I began building modular content blocks. These served as the backbone of the design system, guiding how layouts were structured and ensuring flexibility for both core pages and marketing campaigns.
4. Mid-Fidelity Design Prototyping
Given the project’s tight timeline, mid-fidelity designs were selected as the initial prototyping stage. This decision allowed for:
A focus on content-centric layouts while maintaining visual hierarchy.
Quick iterations to meet deadlines without sacrificing quality.
5. High-Fidelity Designs
6. Feature Development
Key user-facing features, such as the Tax Calculator and Office Locator, were designed from scratch. These were tailored to address significant pain points identified during the research phase, delivering a vastly improved user experience.
This phased approach ensured the design process remained structured, user-focused, and adaptable to both immediate needs and future objectives.
Key Learnings
Timeline Constraints Require Prioritization: Mid-fidelity designs enabled faster iterations without sacrificing functionality.
Flexibility in Content Management is Key: The modular design system allowed marketing teams to maintain consistency while deploying campaign-specific pages.
Clarity in Copy is Essential for Guiding Users: For users to move forward in a journey, they need clear directions through copy so they are aware of what options are present for them without any confusion.
Collaboration is Critical: Close coordination with stakeholders ensured alignment with both business and user needs.
These insights will guide future improvements, emphasizing the importance of adaptability, user-centered design, and iterative testing.