The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.
-
Upload
roderick-stafford -
Category
Documents
-
view
216 -
download
2
Transcript of The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.
![Page 1: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/1.jpg)
1
The evolution of hrblock.com2007 - 2010
Jonathan HeavnerWeb Designer
www.tenpixel.com/portfolio
![Page 2: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/2.jpg)
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)
![Page 3: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/3.jpg)
3
Sub pages• Tax Tips main page• Tax Tips article
![Page 4: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/4.jpg)
4
Sub pages• Calculators• Customer Support
![Page 5: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/5.jpg)
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.
![Page 6: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/6.jpg)
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
![Page 7: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/7.jpg)
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
![Page 8: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/8.jpg)
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
![Page 9: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/9.jpg)
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)
![Page 10: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/10.jpg)
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
![Page 11: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/11.jpg)
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
![Page 12: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/12.jpg)
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
![Page 13: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/13.jpg)
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
![Page 14: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/14.jpg)
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
![Page 15: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/15.jpg)
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
![Page 16: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/16.jpg)
16
Software main page:• Simplified the layout of the
software products by stacking them from simple to more complex returns.
hrblock.com - 2009
![Page 17: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/17.jpg)
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
![Page 18: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/18.jpg)
18
Online Taxes detail page:• Updated the product detail page
hrblock.com - 2009
![Page 19: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/19.jpg)
19
New Customer Support page:• Overhauled the layout of the
customer support page by grouping items of similar interest into categories.
hrblock.com - 2009
![Page 20: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/20.jpg)
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
![Page 21: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/21.jpg)
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
![Page 22: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/22.jpg)
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
![Page 23: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/23.jpg)
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
![Page 24: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/24.jpg)
24
DIY Online detail page:• Updated the product detail page
hrblock.com - 2010
![Page 25: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/25.jpg)
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
![Page 26: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/26.jpg)
26
DIY Download detail page:• Updated the product detail page
hrblock.com - 2010
![Page 27: The evolution of hrblock.com 2007 - 2010 Jonathan Heavner Web Designer 1.](https://reader030.fdocuments.us/reader030/viewer/2022032709/56649ee05503460f94bf0b5e/html5/thumbnails/27.jpg)
27
Customer Support page:• Updated the customer support
page by introducing the sub-navigation tabs used in DIY
hrblock.com - 2010