ACTIVE DEFENDER

July Issue – 2016

Goal: To create a website that efficiently explains the company’s product features, reveals the need for the product, and drives the audience to schedule a personalized project demo.

Active Defender has two apps designed for school safety.

• Active Defender enables teachers, administrators, and law enforcement to respond to crisis by tracking active assailants, locating medical emergencies, and more through a live map.
• Active Alert enables the school to easily track daily health reports.

Challenges

I began by evaluating the website with little knowledge of the company’s products. I wanted to experience the website from a new viewer’s perspective. I found there was inconsistency in typography, hierarchy, and button styles. The website presented two products, Active Defender and Active Alert, but the differences between the apps’ features were unclear and left me with many questions. The copy was informative but was overly technical.

Information Architecture

It became clear that this website was in need of more than just a redesign, so I sub-contracted a copywriter (Kayla Sanders) to rewrite the website. After learning more about the company and its products, together we created new copy and a wireframe that transformed the experience of the website.

Goals:

• Increase functionality and clarity of navigation
• Educate the viewer through clear, organized information
• Prompt the viewer to request a demo
• Explain the differences between and functions of the two products—Active Defender and Active Alert

Web Design

After creating a detailed mockup, I built the website using WordPress, Divi, and custom HTML/CSS.

Goals:

• Maintain responsive design across devices—desktop, mobile, and tablet
• Create a modern, professional aesthetic that reinforces the Active Defender brand
• Design a website structure flexible enough to adapt for company growth and new products (apps)