2020 – design system and prototyping

h&r block

HRBlock Thumbnail

Agency: Work & Co
Role: Designer
Director: Aleks Gryczon
Partner: Jessica Bauer-Greene


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.

Design System

comprehensive system

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.

View of components used in the design system.
Continued view of components
Glimpse of the master components, the system has over 600 elements

solving complexity

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.

Side by side view of component tree, and components
View of the organized component tree (left) and sample of all the variations for just one size (right)

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.

Accessibility challenges

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.

Side by side view of component tree, and components
Special text styles were created to accomodate white text on green


Detailed Interactions

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.

Prototype showcasing various scroll transitions and effects for developer hand-off
Side by side view of component tree, and components
Interactive prototypes were created in Principle



  • A system that served both designers at Work & Co, H&R Block, and developers on the project.
  • Organized naming scheme for a more efficient workflow.
  • Flexible structure to accomodate new contexts.
  • Accessible components that are AA compliant.


  • The system is a living document that grows and evolves based on usage and feedback from people using it.
  • Don't be afraid to call out deviations in crits to catch edge cases early or to educate others of known patterns.
  • 2 amazingly helpful plugins for finding/correcting inconsistencies: Style Organizer and Reattach Instance.
  • Keep learning, with a myriad of options and 'hidden' features in Figma, I was constantly experimenting with different combinations and ways to cleverly create components that were as straightforwardly easy to use as possible.