HSI Case Study

I developed a modern responsive website for Health & Safety Institute and helped them prepare their content management system so their team could move forward successfully on their own.

“Phil was able to bring a lot of needed expertise to our website project that really brought it to the next level. While design may change over time, the backend code-structure and foundation he helped build will live on for years to come.”

“He’s not only an expert, but he’s also a pure joy to work with. Easy-going and organized he was always able to deliver on-time with excellent results.”

— Jason Williams, HSI

Meeting the Needs

For the about three years, HSI had a website that was not sufficient to their needs, or the needs of their users and clients, as their site is often used on tablets and mobile devices. In their words “It was not generating leads the way it needed to and was losing traffic because it was not ‘mobile-friendly.’” They came to me knowing of my passion for creating sites that work across the wide device ecosystem and together we created a beautiful website that addresses the pain points their users had and will support them for years to come.

The Health & Safety Institute is a collection of emergency, health, and safety services and solutions. They provide training and support to companies across the United States and Canada in the crucially important areas of onsite safety, including fire and first responder training. As their tagline says, “Protecting and saving lives made easy.”

“As our business model was evolving our website needed to evolve to build a better sales-funnel for inbound web leads as well as serve as a resource for our existing customers.”

Joining the Team

Prior to this latest website, the family of HSI brands were spread across several different websites that had various aesthetics and no cohesive voice. Their design team worked hard to bring all the brands together under one banner, from copy, to design, to URL structure.

My skillset fit in nicely with their needs. The web’s ubiquitousness and intent to be globally accessible has always fascinated me, and over the last several years I have focused on responsive web design, watching as the technology emerges and becomes adopted by browser vendors. Additionally, my work with Webtrends taught me a lot about user experience design and I was able to bring that to the table to help guide some of our decisions.

HSI has a small web and marketing team, and doesn’t have a need for a full time developer. I was brought in to be their front-end developer expert to get the new site running and then handed off. I built the templates and integrated them into their content management system (Hubspot, in this case). During this process I worked with their designer iteratively so we could smoothly handle all design variations needed for the site to succeed across any screen size. My experience working across devices allowed me to advise and support the design process, rather than just smash a “desktop” design into “mobile” making for a more seamless experience.

Mobile Friendly

One of the problems that needed to be solved with this new site is that many of their users access the sites while out on the job: in a warehouse, out on site, etc. Basically, not on traditional desktop computer with a fast internet connection and large monitor. To solve this, I came up with design and layout variations that were informed by usage data. Depending on the user’s screen size, the site lays itself out accordingly. The design team used this information to create multiple versions of their major imagery. With these the site can load appropriately sized images which helps the site load as fast as possible while users are on the go.

Throughout the project I put in place structures to help me and the HSI team succeed – not only during production, but after we launched and my part was finished. I setup version control for our work so nothing was lost, implemented a bug tracker to make sure we stayed on task and knew what had to be done, and used automation tools to speed up code development and deployment.

The result? I’ll let HSI say it again:

“The current site delivers on the promise to be much more flexible as we continue to evolve.” — HSI