1

The evolution of hrblock.com2007 - 2010

Jonathan HeavnerWeb Designer

www.tenpixel.com/portfolio

2

hrblock.com - 2007• hrblock.com and taxcut.com at the start of tax season 2007, optimized for 800x600

(designed and implemented by a third party)

3

Sub pages• Tax Tips main page• Tax Tips article

4

Sub pages• Calculators• Customer Support

5

hrblock.com - 2008• At the end of tax season 2007 a decision was made to redesign hrblock.com after an

extensive study based off website visitor statistics and survey feedback. (taxcut.com also was getting pulled in to be maintained internally from an outsourced vendor and a redesign)

• The new design would be easier to read (fonts), easier to navigate with new primary navigation and improved in-page navigation, more accommodating to larger screen resolutions (1024x768), and finally have better branding in alignment with marketing strategies.

• During that summer we went through 3 months of design revisions and reviews by business units and executives throughout the company.

6

• After the final layouts were approved, I began cutting assets and coding new CSS for both sites. • taxcut.com launched 11/07, hrblock.com launched 12/07

hrblock.com - 2008

7

• The homepage ‘help me choose’ flash piece was updated to match the new look of the site. I designed this piece along with the flow of each pod, built by our flash developer.

hrblock.com - 2008

8

New Tax Tips main page:• Introduced new widgets in the

top section of the page to allow users to be more interactive with site.

• Listed all tax tips from A-Z making it easier for users tobrowse content quickly.

I designed and implemented HTML framework along with custom CSS for this section.

hrblock.com - 2008

9

• The new ‘grand daddy’ widget (left) was designed to guide users through a series of questions based on the topic chosen. Results would either take the user to an article page focusing more on the topic or start the online product.

• The ‘Life & Taxes’ widget (right) was designed to help users by categorizing where they are in life and provide snippets of article information based off the topic they chose.

Both widgets designed by me along with page flows, built by our flash developer.

hrblock.com – 2008 (widgets)

10

New Tax Tips articles:• Overhauled the layout of the article page

template by first showing an overview of the article and anchor links which would link to that section within the page.

• Introduced print, email, and social mediasharing for users to link back to the site.

• Completely changed the in-page navigation to have a full listing of all articles and to highlight to current articleon display.

I designed and implemented HTML framework along with custom CSS for this section.

hrblock.com - 2008

11

New Software main page:• This was a new addition in 2008,

the ability to purchase softwarefrom hrblock.com (it was alwaystaxcut.com prior to 2008)

Each product brief in the bottomcolumn changes the productdescription section on the top.

I designed the flow of this pagewith custom rollover JavaScriptto make it more interactive forclients.

hrblock.com - 2008

12

New Calculators main page:• Overhauled the layout of the

calculator page by designing a newfull feature tax estimator, one ofmost highly used applicationson the site.

• Displayed a full list of allcalculators in the bottom halfwith descriptions.

Along with designing the newtax estimator, I also developedan HTML, CSS framework to beused for all calculators.

hrblock.com - 2008

13

hrblock.com - 2009• The site redesign was a big success for the 2008 tax season. The web team received a lot of

positive feedback from business units throughout the company as well as clients mentioning how easy it was to find information topics quickly, with clear navigation and easy to read content.

• This redesign became the foundation for future hrblock.com tax seasons, it was also implemented into other sites maintained by the web team:– H&R Block: Spanish– H&R Block: Puerto Rico– H&R Block: Foundation– H&R Block: Branding

14

• The homepage needed attention this time around, the ‘help me choose’ flash piece needed to be removed in order to eliminate lengthy load times for clients.

• This new redesign introduced a cleaner way to find an tax office or start a product. I designed this layout to help emphasize to clients, an easy choice of using the online products at home or to quickly find a local tax office.

hrblock.com - 2009

15

Tax Tips main page:• Introduced a new design by

organizing dynamic content into a tab based layout.

• Listed all social media links to keep users up-to-date with tax law changes.

I designed and implemented HTML framework along with custom CSS for this section.

hrblock.com - 2009

16

Software main page:• Simplified the layout of the

software products by stacking them from simple to more complex returns.

hrblock.com - 2009

17

Online Taxes main page:• Introduced a new layout by

grouping the online products into categories.

I designed and implemented HTML framework along with custom CSS for this section.

hrblock.com - 2009

18

Online Taxes detail page:• Updated the product detail page

hrblock.com - 2009

19

New Customer Support page:• Overhauled the layout of the

customer support page by grouping items of similar interest into categories.

hrblock.com - 2009

20

• Homepage mid-season marketing switch• This design went live minutes after the super bowl commercial aired on national television

I designed this layout based off the commercial along with assets provided by marketing.

hrblock.com - 2009

21

• Tax season 2010 introduced a new lineup of products known as H&R Block At Home.The TaxCut name was dropped.

• This new lineup was to be categorized under one tab “Do-it-Yourself”.I designed this layout to help emphasize to clients, an easy choice of using the new lineup of online products at home or to quickly find a local tax office.

hrblock.com - 2010

22

New Tax Tips & Calcs main page:• Based off focus group findings

the web team noticed a common trend. Users tended to bounce between tax tips articles and various calculators. The Tax Tips and Calculators pages were combined into one page.

• This involved grouping page elements into a clear, intuitive layout.

I designed and implemented HTML framework along with custom CSS for this section.

hrblock.com - 2010

23

New DIY main page: Online• Following the new lineup of

H&R Block At Home products’ the “Do-it-Yourself” tab was created.

• This involved adding sub-navigation on the main page for Online and Download products as well as adding product comparison and why choose us tabs.

• Product colors and photography provided by the product team, this was the first time the site was in alignment with marketing (box shots, title colors, and photography for each product.)

I designed and implemented HTML framework along with custom CSS for this section.

hrblock.com - 2010

24

DIY Online detail page:• Updated the product detail page

hrblock.com - 2010

25

New DIY main page: Download• Following the new lineup of

H&R Block At Home products’ the “Do-it-Yourself” tab was created.

• This involved adding sub-navigation on the main page for Online and Download products as well as adding product comparison and why choose us tabs.

• Product colors and photography provided by the product team, this was the first time the site was in alignment with marketing (box shots, title colors, and photography for each product.)

I designed and implemented HTML framework along with custom CSS for this section.

hrblock.com - 2010

26

DIY Download detail page:• Updated the product detail page

hrblock.com - 2010

27

Customer Support page:• Updated the customer support

page by introducing the sub-navigation tabs used in DIY

hrblock.com - 2010