Ellen Butters

Home Page - The existing site's pages were overstuffed with information and had very few visual cues to separate sections, so I decided to simplify the navigation and color-code the major info areas. I made the "Talk to Chuck" word balloon into a moveable hub for rollover pop-ups that reveal the next level of pages. The hub also has "history" tabs showing what page the user is on as well as pages already visited.

Home Page Rollover - The site's major sections are color coded and have multiple levels within each section, all accessed through the rollover pop-up balloon navigation.

B-level Page - This shows a B-level page, clicked through from the home page. The "Talk to Charles" navigation bubble shows the history tabs - here you go back home by clicking on the brown tab. This system lets users find what they need, know where they are, and remember where they've gone. The inner content page is also resizeable, shown by the small brown triangle on the bottom right corner.

B-level Rollover - This shows the next level of rollover pop-ups, leading to C-level pages within the "green" Investment Products section. Also note that you can click through to other color sections on the inner content page. For example the red text leads to a page within the "red" section.

C-level Page (clicked through from previous green B-level) - This shows another main section of the site. In this case, the user clicked through to the red section from the green section's inner content page. This is shown in the "Talk to Charles" history tabs. Note that the history tabs can be individually removed with the small X buttons.

D-level Page - Yet another section. In this case, the user is deep within the blue section, as shown in the history tabs.

D-Level Rollovers (note overlapping) - This shows the rollover action from the previous page. It also shows how the pages are customizable and allow overlapping if need be.