H&R Block’s Office Locator Overhaul Designed by Jonathan Heavner Developed by InFusion .

H&R Block’s Office Locator Overhaul

Designed by Jonathan HeavnerDeveloped by InFusion

www.tenpixel.com/portfolio

2

Office Locator• The Office Locator(OL) for H&R Block is a complex system managed by an

internal Business Unit (BU) within the company. The BU manages the business rules database and is the point of contact to the vendor who is in charge of hosting and development through Microsoft mappoint services.

The following slides are screenshots of the OL from 2007 to 2009.

3

Office results page

4

5

Driving directions page

6

7

Office hours and information page

8

Office hours page – In detail

Business Rules:List of services provided by the individual tax office.

Tax Pro Finder:Appointment and Tax Pro finder service managed by another BU.

Mappoint:Mini-map with default controls.

Address/Hrs:Office address & and hours (dynamically changes during tax season)

9

Office Locator review• The OL received a varying degree of feedback from clients, tax offices and

franchise owners throughout these years… most of it was negative (clunky interface, loading separate pages, not intuitive). It was clear that OL needed attention, during the summer of 2009 the web team collaborated with the BU and vendor over the span of roughly 2 months from wireframe meetings to development and testing.

The following slides cover the overhaul of the new OL

10

• The first thing that needed to be addressed was the flow of OL. Before offices would display with links below each address (in an accordion). These links would take the user to another page of content which introduced a sort of disconnect from the OL, users felt like they were leaving the site.

11

“Lets keep everyone on the same page!” quickly became the standard during the wireframe stages.

12

Keeping the OL contained on one page meant breaking up the flow into frames of what would be visible and interactive to the user.

Frames that need to be in place:• Office listings• Search controls• Map

13

Office listings1.2.3.4.5.

Search controls(find a new office)

Map(interactive map with push-pin overlays for each office location)

Positioning each frame

14

Office listings1.2.3. Selected office4.5.

Search controls(find a new office)

Map

Frame interaction

3

Office info Make an appt. Services

Overlay window with tabs

15

Early design concepts (Default view).

16

Early design concepts (Office selected – window overlay, first tab).

17

Early design concepts (Office selected – window overlay, second tab).

18

Early design concepts (Office selected – window overlay, third tab).

19

Early design concepts (Office features window)

20

Early design concepts (Driving directions).

21

Default view without a zip code or address passed.

22

Frame interaction (Office selected in the listing frame, and positioned on the map with window overlay – Office Info tab opens by default).

23

Frame interaction (Another view of the Office Info tab and results listing as a closed office).

24

Frame interaction (Make an Appointment tab selected).

25

Frame interaction (Services tab selected).

26

Office Services: overlay window dynamically populated with services provided by the selected office (listed services as links in the top frame, full description listed in the bottom frame – window is a fixed size)

27

Office Services: another view with a different service selected.

28

Frame interaction (Office info tab – Get Directions link expands to enter address).

29

Frame interaction (Office listings frame – Get Directions link expands to enter address).

30

Frame interaction (After a Starting Direction is entered the map displays the full route visually and the listings frame shows detailed driving directions ).

31

Frame interaction (Print friendly directions in a popup window).

32

Frame interaction (tooltip windows – mouse over).

33

Frame interaction (tooltip windows – mouse over).