Kastle Video Pages
Overview
Kastle Systems is a managed building security company with multiple verticals. One of their verticals is video surveillance. There was a struggle to guide potential customers to the video surveillance page because it lack information and didn’t look good. What we set out to do was revamp the video surveillance section and use the video surveillance pages as a marketing lead and bring more traffic and attention.
Duration
September 2024- November 2024
Tools
Figma
Wordpress
Adobe Creative Suite
Challenge
Our Video Surveillance sales team didn’t have a dedicated, up-to-date destination to direct clients interested in KastleVideo. The existing site was outdated, misaligned with current branding, and struggled to engage visitors—resulting in low page traffic and minimal lead conversion.
Role
Lead UX/UI Designer
Team Member
Kelsey Blackburn - SEO
Goal
Create an experience that the Video Sales team could confidently use to drive potential business, while also serving as an informative destination for site visitors to learn more about Kastle’s video products. Success would be measured by an increase in both page visits and qualified leads generated through sales team referrals.
Research
Research Goal
The goal of my research is to discover the best way to design pages that can offer a simple user experience that also allows a lot of information to be shared.
Copy + SEO
My coworker , Kelsey Blackburn, did research from our competitors to find the best seo practices and inteviewed stakeholders to discover what information they want on the pages that will be best for the user and sales team.
Design + Competitive Analysis
I started off by conducting secondary research of latest design trends to help elevate the webpages to modern times a bit and while also staying close to Kastle’s brand Guidelines.
After learning more about the industry, I wanted to take a closer look at Kastle’s competitors and how they’re showcasing their products. Through my market research, I identified some top direct and indirect competitors within the industry: Verkada, rhombus, and latch. I evaluated the strengths and weaknesses of each to see how Kastle could fill in any gaps moving forward.
Strengths
User Interaction + Movement
Each product has its own detailed page, which helps users focus on one item at a time without distraction.
Weaknesses
Unclear Links to External Pages
Potential Overuse or Misuse of Motion
Strengths
Clear and Prominent CTA (Call to Action)
Detailed Product Information
Weaknesses
CTA Visibility May Not Be Persistent
Over-Interactive Design Risks
Strengths
Products Are the Main Focus
Effective Use of a Strong Accent Color
Weaknesses
Lacks a Clear Value Proposition or Customer Benefit
Missed Opportunity for Emotional or Storytelling Content
Define
With a clearer understanding of stakeholder needs and the competitive landscape, I began exploring potential solutions to the challenges we aimed to address. Leveraging insights from the competitive analysis and new messaging provided by my colleague Kelsey, I was able to further clarify the problem space and use those learnings to guide my brainstorming process.
| Insights | Needs | HMW |
|---|---|---|
| Most of our competitors have a interactive / motion on screen | To create engagement on the site and extend visit time on site | How can we condense information in a interactive visual that simple and modern |
| People like the details of products when their visiting the site | Need to know exactly what they would be getting | How can we create a system that allows customers to view product details without cluttering the UI |
| People have difficulty finding exactly what they’re looking for | To be able to effectively find specific information that fits their company / property needs | How can we create a seamless experience across all pages? |
User Flow
To provide customers and prospects with more comprehensive information about KastleVideo—without creating an endless scroll on the homepage—we expanded the content into four distinct pages. The before-and-after user flow below illustrates the new structure and organization of these pages.
Before
After
Brainstorming
Taking my new user flow, I created exploratory sketches
High-Fidelity Wireframes
Final Design
Outcome
After launching the new KastleVideo pages, we received positive feedback from the video sales team. They felt more confident directing prospects to the updated pages, noting that the content was more informative and easier to navigate. Over time, we saw a 28% increase in organic page visits, which directly resulted in 10 qualified leads originating from these pages.
2021 Design
The original page, built in 2021, attempted to consolidate all content into a single screen. However, it lacked sufficient information and offered little to keep visitors engaged.
KastleVideo Overview
The 2021 design relied solely on static images, resulting in a flat and unengaging user experience. In the updated design, we incorporated video GIFs throughout key pages to better illustrate concepts and increase user engagement.
KastleVideo Cameras
To help visitors better understand our products without overwhelming the page, we aimed to present more information in a clean, organized way. I designed an expandable section for our camera products that displays a brief overview by default. When clicked, it reveals more detailed information, allowing users to explore at their own pace without cluttering the overall layout.
KastleVideo VideoGuarding
We wanted to effectively showcase the capabilities of Kastle Videoguarding, something that static images alone couldn’t fully communicate. While video was a more effective solution, embedding them vertically would have made the page unnecessarily long. To solve this, I designed the section to mirror the expandable format used in the camera descriptions. It displays a brief overview by default, and when clicked, it expands to reveal a video—allowing users to dive deeper without overwhelming the page layout.
KastleVideo User Experience
A key feature of KastleVideo is its mobile app, which allows users to access video footage on the go. Since this was highlighted on the user experience page, I wanted to demonstrate how smooth and intuitive the mobile experience is. I designed a section featuring a looping video that showcases a user seamlessly navigating the app to search for a video event, helping visitors visualize the functionality in action.