See it live at hrblock.com.
H&R Block is one of America's largest tax preparation company offering services from tax professionals, consumer tax software, online tax filing, and more.
Work & Co was tasked to help redesign H&R Block's web properties/products, and my role was to support the team via managing the design system in Figma, produce responsive versions of pages & components, and creating high fidelity prototypes for developer handoff.
The large scope of the project required a large amount of different components to be organized within the system, and to better ensure consistency across all applications, each component had special variations for desktop, tablet, and mobile where appropriate.
The CTA buttons were a huge pain to work with due to the sheer amount of variations for not only the size, but also it's color, state, and use case.
I created a solution that focused sorting by the most commonly sorted variable—the size—and flattened any unecessary grouping by clearly identifying each variant in the name itself.
The introduction of this new system greatly helped reduced confusion and improved efficiency for everyone using the library. Due to the success of the implementation, this methodology was applied to the rest of the design system both retroactively and moving forward.
As H&R Block primarily uses green for it's brand, multiple considerations needed to be done in order to ensure everything we made was AA compliant as H&R Block serves a huge range of users.
Importantly, we found that any white text on green must have a font weight of medium, and at least 19pt in size. This was a compromise we had to do despite working in a base 2 grid, and it lent itself to multiple challenges in the design process, especially in responsive sizes where the sizing can become unwieldly.
To help with implementation, we produced high-fidelity prototypes in Principle for just about every interaction we had envisioned, including any responsive variations that may affect the behavior.