Select Page

Active Defender

Website Design

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 app products designed for school safety, Active Defender and Active Alert. Active Defender enables teachers, administrators, and law enforcement to better 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.

Client

Active Defender
Boyte Group LLC
Carthage, NC

Role

Web Designer

Project Manager

Team

Kayla Sanders, Copywriter

Skills

Project Management

Web Design

Responsive Design

Information Architecture

Icon Design

Tools

WordPress

Divi

Wireframes

Adobe CC

HTML & CSS

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
      • Make a website structure flexible enough to adapt for company growth and new products (apps)
      Active Defender Home Page

      Angled section dividers organize information and reinforce the angles of the Active Defender logo shield.

      Font styling limits the number of fonts, colors, and type sizes used, creating a unified, professional layout.

       ←  Scroll through Home Page 

      Call to action “Become an Active Defender” draws the school staff and administration to participate in protecting their school. This phrase reiterates the hands-on approach to using the Active Defender and Active Alert apps.

      Icons are used on both the Active Defender product page and the Active Alert product page to visually introduce the primary features of each app.

      Scroll through Active Defender Product Page  →

      Active Defender Product Page
      Active Alert Product Page

      Color theory reinforces the brand and purpose of Active Defender. Green represents health, safety, growth, and technology, while blue represents trust, intelligence, strength, and security.

      Biographies on the About Page introduce the individuals behind Active Defender. With backgrounds in software development, education, and national security, visitors to the site can know that Active Defender is made to protect with excellence.

       ←  Scroll through Active Alert Product Page 

      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.

      Copywriting & 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
        • Make a website structure flexible enough to adapt for company growth and new products (apps)

        Design Notes

        • Angled section dividers help organize information and reinforce the angles of the Active Defender logo shield.
        • Font styling limits the number of fonts, colors, and type sizes used, creating a unified, professional layout.
        • Call to action “Become an Active Defender” draws the school staff and administration to participate in protecting their school. This phrase reiterates the hands-on approach to using the Active Defender and Active Alert apps.
        • Icons are used on both the Active Defender product page and the Active Alert product page to visually introduce the primary features of each app.
        • Color theory reinforces the brand and purpose of Active Defender. Green represents health, safety, growth, and technology, while blue represents trust, intelligence, strength, and security.
        • Biographies on the About Page introduce the individuals behind Active Defender. With backgrounds in software development, education, and national security, visitors to the site can know that Active Defender is made to protect with excellence.
        Privacy Settings
        We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy