Beebe Medical Center is a community-owned hospital located in Lewes, Delaware. They asked Dean Design (my former employer) to overhaul their existing web site. This would be a huge project to undertake, the existing site was massive and not very well designed.

MAJOR OVERHAULS

• Total redesign of every section of the site.
• Organized the hierarchy of content to make finding information much easier.
• Multiple layers of navigation allows for one click access
  to almost every HTML page.
• Presented new high-technology image but with a friendly, caring approach.
• Special attention to promoting community health.

BEFORE:

The original web site was very plain, with disjointed images and oversized, badly embossed buttons. There was absolutely no information available on the home page and navigating to the information contained within the site was difficult. This site was in need of some serious help.

AFTER:

The new Beebe web site contains colorful photography that promote both the advanced technology and their caring approach to medicine.

GETTING ORGANIZED

I was the project manager, designer, and programmer for this project. The first hurdle in this project was organizing the information into a hierarchy and building the site map. A site map starts with the homepage and expands in levels to determine the amount of pages needed for the site. We then organize the pages into sections. This site would contain around 60-70 pages, not counting dynamically created pages.

This site map is a road map to the entire web site. It starts with the homepage and expands in levels to determine the amount of pages needed for the site. It also helps me organize site content.

We determined that drop-down (pop-up) menus would be the easiest way for a visitor to the site to access the information available on the site. We organized the information under five main categories with our ultimate goal to have every page in the site only one click away.

THUMBNAILS & ROUGHS

Next I develop thumbnails and rough sketches of the major pages in the web site, typically working through two or three rounds of roughs before beginning any computer designs. My final rough is a detailed drawing of the site mapped out on graph paper (below), this is a guide (in pixels) for me to use when determining how large graphics need to be to fit on a users screen.

A sketch of the homepage details the dimensions of each element in the design. It was the blue print I used to build the home page on the computer.

PHOTOSHOP FRENZY

Using graphics and photos supplied by the client, I developed two to three layouts of the homepage and a secondary page in photoshop, at actual size. I present these layouts to the clients online allowing them to choose between three different looks for the site, or combine elements from all three designs. After they chose a look for the site, I moved on to developing the individual graphics and web pages.

BUILDING THE SKELETON

With the site design approved I moved on to developing a skeleton of the site, this is basically a first draft of the site. This is intended to show the client how the navigation will work and what content we have and what content we still need. I put in place all of the images I had, I used stock shots to fill in areas I felt they needed a photo.

COLD FUSION

Another issue with this site was that the back-end programming was built in Cold Fusion, a scripting language developed by Macromedia. I literally had to learn Cold Fusion to update some of the existing pages of the site. This was a great learning opportunity but a daunting task.

HIGH-TECHNOLOGY MEETS WARM & FUZZY

We wanted to present two looks for the site, high-tech and caring. This was accomplished by a series of images, some high-tech, some warm and fuzzy, that change each time a person visits the site. Another key element was Beebe's beach-side location, I wanted to work it into the design. My solution was to add a soft beach border to the right side of the pages.

BASIC TRAINING

There were no arrangements for me to maintain this site, that was going to be up to the client. The very last stage of this project was to teach the client how to update and maintain the site. This consisted of one day-long training session, I taught the client how to update every section of the site using Macromedia’s Contribute. It was a fun experience and was great training for my teaching career starting this fall.

IT'S A WRAP