This is the first site that I had created from design to deployment while at Barnabas Health using the Oxcyon Centralpoint CMS. A graphics designer had created the layout and I had taken the graphics and sliced them to produce the page. I also developed all the back-end code as well as all the interactive elements using jQuery, JavaScript and the Google Maps API.
One aspect that seems simple but which ended up being a little more difficult to get the desired functionality was the scrolling header. Due to having a graphic that actually overlays the sliding photos to give it a curved window look– I had to develop a work around through JQuery so a visitor could still click on the photo and open the associated photo’s page. Basically as the photo slides into view – I use JQuery to grab the photo’s anchor tag () and apply it to the overlay graphic.
The menu bars on the site utilize mega-menus. Before I had left there was discussion as to whether they would eliminate the listing of Specialties since it could possibly get long. The other option I had suggested was making it four columns instead of three.
When a person clicks on a specialty – it opens the associated specialty page. Based on the specialty the tab elements may change, but every specialty includes Overview, Physicians and Locations.
Because the CMS used by Barnabas Health creates the Specialty dropdown that is shown in the “Find a Physician†box, I used JQuery to default the selection based on the specialty the page was currently displaying.
This screen shot shows two different items. The “Contact Us†menu item uses the mega-menu format to display the address, phone number and e-mail address for quick access without actually having to go to the full “Contact Us†page.
The page currently displayed is the “For Patients†page which provides access to various patient forms.
This is the alphabetical list of doctors. This is using float to organize the doctors in columns. The missing photo graphic is actually used as a background image and then if the doctor has a graphic it is positioned over it. This way I didn’t have to go in and change hundreds of doctors’ photos to have the border and shadow – in actuality the physician photo is just being slightly smaller than the background image and properly positioned using CSS. If the doctor has no photo – then only the “missing photo” background image is displayed.
This is the physician search screen which allows a visitor to search for a doctor using a number of criteria.
After the visitor performs a search, the list of physicians is displayed. You can compare my new design with photos to what was previously developed for the main Barnabas Health website which is shown on the second image.
This is how the Barnabas Health list of doctors is displayed after performing a search. This was designed prior to me joining Barnabas Health.
When the visitor clicks on a physician – the physicians detail page is displayed. Once again it includes the physicians photo with the missing photo graphic as the background. It also includes various tabs for more information on the physician and a embedded map that shows their office location(s).
When a visitor clicks on the map marker, the infobox pops up. This provides all the information about the office, as well as an input box to allow the visitor to get directions.
This is how the directions are displayed on the physician detail page.
This is how the physician detail page had looked on the main Barnabas Health site which was developed prior to me joining Barnabas Health.
This is the Location page. Initially this was just going to be a map with markers showing where the offices were located. I had told Barnabas Health that from a visitor usability standpoint it wasn’t very useful since the only way to know what the markers represented was by clicking on them and displaying the infobox. I had suggested incorporating additional functionality that is shown on the right hand side which lists the towns and the doctors and office addresses within those towns. This is further explained the following pages. (Before leaving, I wish I had had time to incorporate this functionality into the Specialty pages Location tab.)
I had developed most of this functionality in the last two days I was at Barnabas Health. Since it is now live, there is one aspect I wish I could fix. It seems to work slow with bringing up the infobox after the address is clicked. It may be a result of the firewalls at Barnabas Health. I would at least like to put a spinner/waiting indicator graphic so the visitor has some sort of feedback that it is working.
When the visitor clicks on the town, it expands to display the doctors and their offices.
When the address is clicked – it opens up the infobox marking where that doctor’s office is located on the map. The infobox will also display any other doctors that are found at that location along with their specialties and phone number.
The visitor is able to enter in an address to get directions to that particular physician’s office.
The page automatically slides down and the directions are displayed.
Here is the location page with a doctors’ offices from Toms River being displayed.
