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 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.
CLIENT
Active Defender
Boyte Group LLC
Carthage, NC
SKILLS
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)
