Enterprise SaaS
Design System
Surveillance
Creating a Design Foundation for a Growing SaaS Platform
Established a unified design system for FLIR Raven, replacing fragmented patterns with a scalable foundation that improved product consistency and supported more efficient design and development.
Overview
What was this engagement?
FLIR Raven is a web-based site-planning platform that helps organizations design security deployments by selecting, configuring, and visualizing surveillance equipment within a geographic environment.
Teledyne FLIR was modernizing the existing application to support new capabilities, improve performance, and create a more scalable product experience. Discovery, initial wireframes, and feature validation were already underway when I joined the project as Lead UX Designer at Ensono.
My responsibility was to translate that product vision into a cohesive, interactive experience while establishing a design system that could support the new application. Working closely with UX and engineering, I helped define reusable components, interaction patterns, and equipment-specific visualizations that balanced consistency with the technical complexity of FLIR’s extensive product line.
The redesigned application launched successfully, and the design system continues to support new features and enhancements years after its initial release.
My Role
What did I contribute.
As Lead UX Designer at Ensono, I took ownership of the product’s UX design following the initial discovery, framing, and wireframing work. I worked closely with the UX team and engineering to translate the established product vision into detailed designs, interactive prototypes, and a scalable design system.
My responsibilities included auditing the existing interface, establishing Material UI (MUI) as the design system foundation, defining reusable components and interaction patterns, and designing equipment-specific controls and visualizations. I also partnered with engineering throughout development, participating in regular design reviews and client demonstrations to ensure the implemented experience aligned with UX expectations and Teledyne FLIR’s requirements.
Role
Lead UX Designer
Responsibilities
UX Design • Interaction Design • Interface Auditing • Design System •
Prototyping • Design Validation
Tools & Technologies
Sketch • InVision • Material UI (MUI) • React/Storybook (Engineering)
Collaborators
Product Management • Engineers • Google • UX • Teledyne FLIR Stakeholders
Deliverables
Enterprise Design System • Component Library • Interactive Prototypes •
Equipment Visualizations • Interaction Specifications • Developer Handoff
The Challenge
How do you simplify complex technology without oversimplifying how it works?
Teledyne FLIR was modernizing Raven to support new capabilities, improve performance, and accommodate a growing catalog of security equipment. The existing application had evolved over time, creating inconsistencies in its interface and interaction patterns. The redesign needed a more cohesive foundation that could support both current functionality and future development.
The greater challenge was translating the technical behavior of cameras, radar systems, and other surveillance equipment into intuitive visual interactions. Different models supported different capabilities, including field-of-view adjustments, rotation, focal length, and detection ranges. Some shared similar functionality, while others required entirely different controls and visualizations.
With limited access to product experts during the initial design work, I relied heavily on technical documentation, existing application references, and collaboration with engineering to understand how the equipment behaved.
The goal wasn’t simply to make Raven look more consistent. It was to establish a scalable design system while making complex equipment functionality easier to understand, configure, and visualize within the planning environment.
Building on Discovery
Understanding the work before designing the solution.
When I joined the project, the initial discovery, framing, and user testing had already been completed. Rather than starting over, I focused on understanding the decisions that had shaped the product vision.
I reviewed the original project kickoff, met with the UX team to understand the research findings, and worked through the existing wireframes to identify requirements, constraints, and areas that needed further definition. With no formal design system in place, I also evaluated Teledyne FLIR’s existing interface patterns. Working with UX and engineering, we conducted an interface audit, cataloging recurring components, navigation models, layouts, typography, and interaction behaviors. That inventory helped us identify opportunities for standardization and informed our decision to adopt Material UI (MUI) as the foundation for Raven’s design system.
This approach allowed us to build on the work already completed while establishing a consistent foundation for the redesigned application.
Establishing the Design System
Creating consistency without sacrificing flexibility.
With the interface audit complete, the next step was establishing a design system that could support Raven’s redesign and future development.
Rather than building everything from scratch, I evaluated existing frameworks and recommended Material UI (MUI). Its patterns were similar to those already used across Teledyne FLIR’s interfaces, and my previous experience with MUI made it a practical starting point. Working closely with UX and engineering, we adapted the framework to Raven’s requirements, including customized table layouts, reusable components, design tokens, and interaction behaviors.
I used Sketch to define the visual system and component specifications, then InVision to communicate layouts and interactive behaviors. As engineering developed the React components, we held regular design reviews to ensure the implementation aligned with the intended experience.
The result was a shared design foundation that provided consistency across the redesigned application while allowing flexibility for Raven’s specialized functionality.
Designing Complex Interactions
Translating technical functionality into intuitive visual behaviors.
One of the biggest challenges was understanding how Teledyne FLIR’s extensive range of cameras, radar systems, and other security equipment actually worked, then translating those capabilities into interactions users could understand and manipulate.
Different equipment models supported different behaviors, including rotation, focal length, field of view, and detection ranges. Some shared similar functionality, but their technical specifications and configuration options varied significantly.
Working primarily from technical documentation and collaborating closely with engineering, I developed interaction patterns that adapted to the equipment being selected. Configuration controls changed dynamically based on the model, while coverage visualizations reflected its specific capabilities.
We also established visual conventions for equipment types, interaction states, and coverage areas. These patterns became part of Raven’s broader design system, allowing us to maintain consistency without treating every piece of equipment as though it behaved the same way.
The challenge wasn’t simply representing complex technology visually. It was making that technology understandable and configurable within a consistent planning experience.
Collaboration & Validation
Bridging design intent and technical implementation.
Close collaboration with engineering was essential to bringing Raven’s redesigned experience to life. Early in the project, I worked with the lead developer to establish expectations around component requirements, communication, design reviews, and handoffs.
Rather than treating design and development as separate phases, we worked iteratively as the application took shape. I used Sketch and InVision to communicate component specifications, interaction behaviors, and prototypes while engineering developed the corresponding React components.
Regular internal design reviews helped us identify inconsistencies, work through technical constraints, and verify that the implementation matched the intended experience.
We also conducted demonstrations with Teledyne FLIR stakeholders and product experts throughout development. Their feedback was particularly valuable for validating equipment-specific functionality, ensuring that our interpretations of technical documentation accurately reflected how the cameras and radar systems were expected to behave.
Having a shared understanding between UX and engineering made it easier to work through complex problems together. It wasn’t simply about handing off designs. It was about maintaining a consistent experience from concept through implementation.
The Product
Bringing the design system and interactions together.
The redesigned Raven application brought together a consistent interface, reusable components, and equipment-specific interactions within a unified site-planning experience.
Users could configure surveillance equipment, visualize coverage areas, adjust device settings, and develop security plans using tools designed around the capabilities of each product. Built on a shared MUI-based design system, the application balanced consistency with the flexibility needed to support Teledyne FLIR’s extensive equipment catalog.
The video demonstrates the resulting product experience and how the design decisions came together in the released application.
shared design system brought consistency to navigation, workflows,
and interactions across the Raven platform
Reflection
Making complexity understandable through collaboration
Raven reinforced something I’ve encountered throughout my career: understanding how a system works is just as important as understanding how people use it.
The biggest challenge wasn’t establishing the design system or creating the interface. It was learning how a large range of specialized security equipment behaved and figuring out how to translate those technical capabilities into interactions that made sense to users. Working primarily from documentation required patience, asking questions, and collaborating closely with engineering to work through the details. It also reinforced the value of having a strong relationship between UX and development. Mike and I established a shared understanding early in the project, which made it easier to discuss technical constraints, challenge assumptions, and work through problems together. We were speaking the same language, and that made a difference.
Looking back, I’m proud that the design system continued supporting Raven long after I left the project. It reminded me that good design isn’t just about solving the immediate problem. It’s also about creating a foundation that others can understand, maintain, and build upon.
Have a complex problem to solve?
I’m always interested in thoughtful conversations about product design, service design, enterprise systems, and human-centered AI.