Tertiary Nav

UI & Design Components

A tertiary navigation was not originally included in the Block Design System, meaning special considerations had to be made during the design process to ensure the UI would not be easily confused for other interactive elements.

How should new, interactive UI be introduced into a design system without confusing the existing clickable language?

When the Block Design System (BDS) came to be in late 2020, one thing missing was a tertiary navigation. In 2021, while working on blockadvisors.com, we recognized a need to shorten our pages while still presenting all our product offerings. Understanding the need for a tertiary navigation extended to our product teams as well, we sought to collaborate closely with the BDS team to find a solution that could be applied cross-platform.

Considerations

  • Affordances for interaction, without looking like existing patterns

  • Multiple breakpoints

  • Allow for variable text length on multiple breakpoints

  • Hover state in desktop

  • AAA compliance

  • Multiple brands (H&R Block, Block Advisors, Spruce)

After initially opting for a fixed-width tab with a character limit, we spent more time testing different copy and taking a look at edge cases. We realized a hugged tab made more sense in mobile, as it would allow for better peeking content as an affordance to let the user know more content could be revealed by swiping left. We opted to align the far left tab to the left margin, the far right tab to the right margin, and center align any tabs in between when selected.

We knew this navigation would have uses across H&R Block's sites and products and wanted to explore additional colorways to add flexibility to the nav's use cases as we play with different page layouts and background colors. We created additional options for hrblock.com, blockadvisors.com.

Our live design made its debut on the blockadvisors.com Small Business Tax Filing page. The new nav allowed us to combine 5 tax prep options into 760px vertically (on desktop), while still allowing each product its own space for explanation and interaction.

In initial A/B testing, our new tertiary navigation on the blockadvisors.com Small Business Tax Filing page generated:

5%

increase in appointment conversion rates on Desktop versus the previous design

(from 12.4% appt conversion to 17.4%)

8%

increase in appointment conversion rates on Mobile versus the previous design

(from 11% appt conversion to 19%)

To clarify how we wanted our designs to function on the live site, we prototyped the desktop nav in Figma and mocked up mobile alignment in AfterEffects. We also created extensive annotations with more technical specs in a separate Figma file. Feel free to click through our Figma prototype to see our vision, and see how it plays out live at https://www.blockadvisors.com/small-business-tax-preparation/.

Team

Haley Mitchell
Designer

Jose Arellano
Designer

Kenzie Tubbs
Lead Designer

my contributions

  • Designed initial concept for visual UI

  • Encouraged exploration around UI patterns that did not interfere with existing clickable language

  • Proposed the character limit, then the fix to make tabs hug content

  • Prototyped the solution in Figma for Desktop