Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Designing the Template
With all of this in mind, it was now time to start on a sample template. Being the designer in the group, this task was all mine.
Like many projects, I started this one on paper with the intent of creating most of the design in PhotoShop. I had already created the Midcom Guy using CorelDraw! 9.0 and had exported the graphic as a TIFF to be optimized in PhotoShop later. I had my colors and fonts and all these guidelines, and I was ready to go.
As I said earlier, navigation was very important to our group, and I felt a good menu system would be challenging. Since this was such a key goal, I actually started with the menu before I did much else. The current intranet really didn't contain much content, but we had big plans for Midcom, and we were already busy collecting new content from the various departments. There would eventually be many new sections, tools, databases, and departmental home pages. The solution to sorting all that information turned out to be a dual menu system. One menu would be graphical and run horizontally across the upper portion of the page. Labels on this menu would be very general: Departments, Links, and so on. The second menu would be HTML text running vertically down the left side of the page. By making it text, it would be easier to update even by a non-designer, and it would be scalable as Midcom grew.
The "main" menu would consist of the following items:
-
My Midcom. This section would contain various news and stock feeds and eventually access to email and calendar tools. We also hoped to add some ability to customize on an individual basis.
-
Departments. Links to all the departmental home pages.
-
Tools. Any tool used by several departments on a regular basis. Tools used by only one department would be part of that department's home page. And unless the tool was necessary for performing some job function, it wouldn't be in this category.
-
Community. Cafeteria menu, fitness center schedule, and so on. There were also fun items like "Clubs and Groups" and "Cool Stuff." Cool Stuff included a company store and a download area to get corporate wallpapers.
-
Links. Organized lists of external and internal links to commonly used sites, as well as a site map.
-
Midcom 411. Reference guides, help desk links, tours, and Internet/home page tips. There would even be a section called Midcom 911 in case you really got lost. (I'm happy to report that this page didn't end up being visited very often.)
The next step was to incorporate this menu system into a graphical page template. Once I had the graphical framework for the page, I put together a prototype using HTML and mock content to show the team what an actual page would look like. Remember that I knew nothing about developing in a Lotus environment and didn't even have Designer on my system. Therefore, anything I created in HTML would need to be imported into Designer and saved on the server. This didn't always translate easily, but we solved it with acceptable alternatives or workarounds.
The developers didn't readily accept the new design. Their main concern was that the page was not in frames. According to them, this would make it difficult (or impossible) to display Notes databases and calendars. I personally don't like frames at all since there are more pages to keep track of and update, so I was determined to find a solution. Also, the design as it was wouldn't work with frames and would look odd when you scrolled certain frames. Luckily, our corporate standard is Microsoft Internet Explorer, and no one uses Netscape (internally or externally) to access the intranet. Therefore, I was able to utilize an embedded view script I happened upon while surfing various code sources. The script uses an <iframe> tag. Here's a simple example of this script in action:
<iframe src="visitors.nsf" frameborder=0 height=300px width=464px scrolling="no" align="center" marginwidth=0 leftmargin=0 topmargin=0 marginheight=0> </iframe>
On the HTML page, the visitors database would be displayed in an unframed box at 300x464 pixels. Because there's no border on the frame, the content within the tag would appear as part of the page rather than as an embedded or separate view.
This solution satisfied the other developers' concerns.
With the final design template in place (see Figure 3), we were off and running. Working very closely with one of the developers, I would create all my graphics and HTML and then save them to a common network drive where she could access them. Sometimes as often as daily, we sent each other email giving updates on all the newly created items and where to find them. Other group members would work on various items based on their knowledge, access, or time, but she and I were definitely the two lead developers—she in Lotus Designer, and me in pure HTML (using Notepad or Homesite). There were definitely some people who did more work on Midcom than others, and we could have completed the project with fewer members; however, some members were good idea generators and that's how they benefited the group. We wanted to make sure that Midcom wasn't developed in a vacuum, so we tried to keep our minds and options open at all times.
){kind=link}
The redesigned home page includes better navigation and more space for content.
These are a few of the key features planned for Midcom:
-
News headlines displayed on the login page. Users would actually be required to sign on before they could read any of the news items, but this was our way of drawing them in.
-
Associate Handbook. Normally a thick notebook given to all new staff members by Human Resources, the handbook would now be available in a digital format with current information. The online version would also include all necessary forms (such as vacation request forms) in PDF format, making them easy to publish and print.
-
Company store where merchandise with our various logos would be available. Order form to be submitted in an email and stored in a database.
-
Weather updates, stock feeds and news feeds. These would all be free services from external sources, so the company wouldn't incur any charges to display the information.
-
Department home pages. Each department would have a home page, which would include mission statements, organizational charts, and departmental links.
-
Hidden menu items that would be visible only with proper authentication. This would allow us to add several restricted databases and create special features in some departments.
-
Tools to look up area codes, zip codes, maps, state abbreviations, and time zones.
-
Glossary of financial and insurance terms.
-
Room reservations database. Using a simple Web-enabled form, users would not only be able to reserve various conference rooms at the home office, they could also request equipment and furniture configurations for their meetings. The form would even include the ability to schedule catering with our cafeteria staff.
-
Marketplace to post items for sale, lost, or found.
-
Information on profit sharing plan, annual report, company newsletter.
We assigned individual schedules for each piece of the design and implementation process. That was an important reason for the success of the project, as you'll see shortly.