Website Redesign for Safety Manual Distributor

The International Fire Service Training Association/Fire Protection Publications, also known by their acronym IFSTA/FPP, is the largest distributor of fire fighting training manuals in the world. They are located on the campus of Oklahoma State University in Stillwater, Oklahoma and were established there in 1934.

Our creative team designed a concise, informative website that provided the user access to dozens of pages of information, merchandise, and blog posts at the click of a mouse. The effective integration of the principles of UI and UA proved to be a difficult, yet triumphant feat, given that the internet of 2007 was much more archaic than the technology of today.

As the leading resource for fire department and general trainee materials across the globe, the International Fire Service Training Association/Fire Protection Publications, known by their acronym IFSTA/FPP, knew they needed a quality website design to convey the fire of the profession without sacrificing usability and visual appeal. As a major manual distributor, IFSTA/FPP conducts business with various groups and departments anywhere from five miles away to 5,000 miles away. Due to these variable distances, they relied heavily on phone, email, and printed media to connect with their customers. The website would assemble all of their pertinent information in one place, as the site itself needed to serve two critical purposes.

A chief aspect of the website was its role as an online marketplace for customers to browse and purchase products with ease. The other main goal of the website was to act as an informative marketing tool, so that prospective clients could be educated and assisted throughout the site. Combining these concepts into an easy to use, multifaceted website would enhance the experience of new and returning customers alike.

The sheer amount of information that would be available through the website posed a challenge as well, as the screens and technology of 2007 were in a much different state.

When engineering this design, our creative team wanted to ensure proper integration of aspects of both UI (User Interface) and UX (User Experience) into the website. The site needed to be attractive, easy to navigate, informative, and also energetic and full of life to match the pace of the profession. For the home page, we compiled a list of all of the various features required of the website and managed to create a hub of their pertinent information, directing new visitors to any page they wished to visit. Our team built and styled the basic theme and design of the HTML/CSS for the website before handing the in-depth development and integration off to an outside company.

When formatting the multiple links and features of this website, we used an all-black background to create separation between the elements of the page. Each section had some aspect of red, yellow, or black to unify the coloring of the page, and the edges of individual sections were rounded at the corners to provide more whitespace and soften the design. Across the top of the page, we included the IFSTA/FPP logo, as well as a Search Bar, Hotline Phone Number, and Key Links such as ‘Account,’ ‘Order Tracking,’ ‘Help,’ and ‘Contact.’ The Search Bar provided the opportunity for users to perform a general, site-wide search or a categorized search, such as products, articles, etc. All of the text within this top section was white to stand out from the vibrant, fiery red flames of the banner background. We included an image of a firefighter’s yellow helmet, accented by red inscription and black hardware in the right hand corner.

Just below this was the Menu Bar with drop down options in fields such as ‘Shop,’ ‘IFSTA/FPP Information,’ ‘News,’ ‘Research,’ and ‘Cart,’ with a small image of a 2D shopping cart. The majority of the banner was white, with ‘Shop’ on one end and ‘Cart’ on the other end in yellow to create balance. Down the primary vertical, we included the Advertising Features ‘Red Hot Bestsellers’ and ‘Featured Now,’ highlighting products such as DVD sets and manuals that had proved exceptionally useful or were new to the market.

The center of the page is composed around a Main Rotating Feature, using Flash with XML for smooth, bug-free display of various rotating featured pages and stories, highlighted with poignant imagery. Below this feature is a Quick Links Bar which drops down to highlight key links such as ‘Fire Prevention’ and ‘Best Selling Products.’ The Newsroom block came beneath the Quick Links, providing viewers with brief titles of current events from IFSTA/FPP or outside sources that were pertinent to the firefighting community.

The right primary vertical was home to the crediting CEAT & OSU identifiers, linked to their respective homepages. We also included a Login Area, where returning users could enter their username and password to enter the site. Once logged in, this section of the website, known as “Communities,” will feature tailored content and links across the graphic banner according to the entered user information. The presented information varies on account type, but categories included Instructor Resources, Student Resources, Liaison Resources, IFSTA Board of Directors Resources, and Validation Committee Resources. The footer of the website included important website links such as the Privacy and Security Policy, Terms and Conditions, and Copyright information.

The Subpage Designs varied depending on the category of the site, yet all carried the same theme and core concepts throughout the design. We included a Marketing Area on each page to provide general information and navigation to the viewer. The elements of the subpages were divided into a few categories, some of which are formatted in the same way as the homepage. These elements included the logo banner and footer of the pages, the search bar, the graphic banner that indicated your location on the site, the page header, the main page content, and an FPP advertising area to encourage cross links and lateral movement across the site.

A major part of the IFSTA/FPP Website design was the Shopping Area. We designed this section with the shopper in mind, simplifying the theme from the side primary verticals of the homepage and lessening the presented information to enhance readability. The primary page navigation was on the left side, allowing the shopper to navigate through all available products on the site. The centerpiece of the page was a Showcase Product, which was rotated based on IFSTA/FPP preference. This was positioned above the Editor’s Picks section, where members of the operating staff of the website could post chosen spotlight products. Below the login information on the right side, we included a small ‘Featured Now’ section to highlight new or best selling products.

In order to provide a simple, easy to use search format for the customer, we included a number of sorting options to reformat the displayed products. Search results can be found through item detail or item description through a typed search bar. To further refine the search, products could be displayed in a number of different fashions, such as by category, popularity, price – low to high, price – high to low, and product name (A-Z).