Project Background
My journey with Raven, Teledyne FLIR’s flagship SaaS product, was nothing short of exhilarating. I was enlisted to lead the charge in crafting a comprehensive design system for Raven, a solution designed by FLIR’s professional security planners to simulate real-world scenarios for their extensive range of security cameras.
Role
Lead UX Designer
Lead UX Designer
Methods and Tools
Desk Research, Competitive Analysis, MUI, Photoshop, Sketch, InVision, Jira, Confluence, Git
Practices
User Research, UX & UI Design, Prototyping
Following the design thinking framework (empathize, define, ideate, prototype, and test), our team sought to establish a systematic approach that incorporates crucial stages to uphold consistency and efficiency in both my design efforts and collaboration with the engineering team. Without the dedicated efforts, collaboration, and commitment of this exceptional team, achieving this wouldn’t have been feasible.
Here are the steps I took in developing Raven’s design system:
Define Objectives And Scope
In order to establish the design system’s purpose, it was imperative to delineate its scope, which included specifying the products it would encompass. For efficient documentation and planning, the design and engineering team used Atlassian’s Confluence and Jira.
In order to establish the design system’s purpose, it was imperative to delineate its scope, which included specifying the products it would encompass. For efficient documentation and planning, the design and engineering team used Atlassian’s Confluence and Jira.
With a clear mission to elevate Raven to new heights through user-centered design, my endeavor involved working with our engineering team through ten intensive sprints. All with the goal of delivering a minimal viable product (MVP).
Our daily stand-up meetings, meticulous refinement sessions, UI reviews, and the creation of a high-fidelity prototype were the cornerstones of our collaborative efforts to captivate stakeholders.
Research and Audit
Next, I conducted a comprehensive audit of existing design elements and components, analyzed competitors and industry best practices. Teledyne’s current website and brand served as a good foundation in getting look and feel ideas.
Next, I conducted a comprehensive audit of existing design elements and components, analyzed competitors and industry best practices. Teledyne’s current website and brand served as a good foundation in getting look and feel ideas.
In addition, I did a thorough exploration of both qualitative and quantitative data, revealing the pain points and desires that would shape the redesign of Raven. This process involved uncovering insights into how users conducted searches, whether by address or coordinates, which played a pivotal role in informing critical design choices.
Additionally, we identified that users expressed a strong desire for enhanced collaboration and sharing features on specific projects for their clients. Furthermore, there was a demand for the capability to import images of blueprints for future state projects.
The team’s product design principles centered around user-centricity, innovation, and the pursuit of a world-class experience. This commitment transformed Raven into an indispensable asset for security professionals worldwide, solidifying Teledyne FLIR’s position as a leader in thermal and infrared technology.
Establish Design Principles
I applied industry-leading best practices, giving careful thought to essential factors like usability, accessibility, and brand identity. This approach guided my design choices, placing a significant emphasis on promoting inclusivity throughout the design process. Raven’s robust interface was more than a mere tool; it functioned as a conduit for connection. Through collaborative efforts, we fastidiously developed design elements that elicited emotional responses, whether it was the exhilaration of a seamless interaction or the sense of security provided by our expertise.
I applied industry-leading best practices, giving careful thought to essential factors like usability, accessibility, and brand identity. This approach guided my design choices, placing a significant emphasis on promoting inclusivity throughout the design process. Raven’s robust interface was more than a mere tool; it functioned as a conduit for connection. Through collaborative efforts, we fastidiously developed design elements that elicited emotional responses, whether it was the exhilaration of a seamless interaction or the sense of security provided by our expertise.
The Anatomy (Design System)
Product
Smart Components
Recipes
Technology
Core
Collaborating closely with the engineering team, I successfully designed camera components that encompassed a comprehensive set of controls. These controls enabled users to simulate mounting height, rotation, range, and image detection, ensuring precise placement in real-world scenarios.
Users could even save their plans, generating PDF outputs with camera specifics, GPS coordinates, and satellite plan overviews.
Create Component Library
To facilitate a seamless transition from design to engineering, it was important to identify and comprehensively list all design elements and UI components, categorizing them according to their specific functions and purposes. While Figma and Sketch are excellent tools for this task, in this particular instance, Sketch and InVision were employed to construct the component library and leveraging MUI as the component library.
To facilitate a seamless transition from design to engineering, it was important to identify and comprehensively list all design elements and UI components, categorizing them according to their specific functions and purposes. While Figma and Sketch are excellent tools for this task, in this particular instance, Sketch and InVision were employed to construct the component library and leveraging MUI as the component library.
The Core Design System
UI Components – UI Component Library, Web Components Repo, Components Package, Reference Website
Icons – Icons Library, Icons Repo, Icons Package
Design Tokens – Foundation Library, Tokens Repo, Tokens package
Sub Atomic
Design Components
When it came to revamping the component, I ensured that each individual UI component adhered to our design principles. This encompassed the creation of comprehensive guidelines for each component, encompassing specifications, interactions, and variations.
When it came to revamping the component, I ensured that each individual UI component adhered to our design principles. This encompassed the creation of comprehensive guidelines for each component, encompassing specifications, interactions, and variations.
Typography and Color Guidlines
Establishing the typography guidelines involved specifying the font selections, sizing parameters, and line spacing. Furthermore, I create a color scheme that encompasses primary, secondary, and accent hues.
Establishing the typography guidelines involved specifying the font selections, sizing parameters, and line spacing. Furthermore, I create a color scheme that encompasses primary, secondary, and accent hues.
Through the development of this design system, we aimed to ignite a transformation in the security design SaaS industry.
It wasn’t merely about designing an interface; it was about creating an experience that empowered, secured, and resonated on a deep emotional level. Security is a serious matter.
Layout and Grid
In the process of establishing a coherent grid system and responsive layout guidelines, several considerations came into play. A comprehensive grasp of the Information Architecture and Wireframe layout played a pivotal role in choosing the appropriate grid system and configuring the layout guidelines. Equally important was the determination of breakpoints, with the understanding that this approach did not prioritize mobile-first due to the intricate workflow and functional demands of the application.
In the process of establishing a coherent grid system and responsive layout guidelines, several considerations came into play. A comprehensive grasp of the Information Architecture and Wireframe layout played a pivotal role in choosing the appropriate grid system and configuring the layout guidelines. Equally important was the determination of breakpoints, with the understanding that this approach did not prioritize mobile-first due to the intricate workflow and functional demands of the application.
Iconography and Imagery
Creating design icons and imagery guidelines that align with Teledyne’s SaaS product design language involved a structured and iterative process. It began with a deep understanding of the product’s brand identity, target audience, and overall design principles.
Creating design icons and imagery guidelines that align with Teledyne’s SaaS product design language involved a structured and iterative process. It began with a deep understanding of the product’s brand identity, target audience, and overall design principles.
Through research, we had identified key visual elements that resonated with Teledyne’s brand and its SaaS product’s objectives. Because a design system exists as a dynamic entity, it is imperative to have version control and adhere to these guidelines to uphold a unified and captivating design language.
Accessibility
With a commitment to prioritizing inclusivity in the design, all components and design decisions were aligned with the Web Content Accessibility Guidelines.
With a commitment to prioritizing inclusivity in the design, all components and design decisions were aligned with the Web Content Accessibility Guidelines.
Documentation
As previously mentioned, Confluence by Atlassian proved to be an invaluable tool for crafting extensive documentation for the design system. Through Confluence, I successfully incorporated lucid guidelines, usage examples, and harnessed InVision to seamlessly integrate CSS code snippets for the convenience of developers
As previously mentioned, Confluence by Atlassian proved to be an invaluable tool for crafting extensive documentation for the design system. Through Confluence, I successfully incorporated lucid guidelines, usage examples, and harnessed InVision to seamlessly integrate CSS code snippets for the convenience of developers
Prototype and Testing
When creating a prototype for stakeholders, I discovered that employing Sketch and InVision sufficed for constructing an interactive prototype utilizing design system components. This approach allowed me to conduct usability testing, pinpointing and rectifying any usability concerns that arose.
When creating a prototype for stakeholders, I discovered that employing Sketch and InVision sufficed for constructing an interactive prototype utilizing design system components. This approach allowed me to conduct usability testing, pinpointing and rectifying any usability concerns that arose.
Development Integration
My engineering background facilitated close collaboration with developers to translate the design system into code. Utilizing Material Design MUI components ensured a seamless transition from design to code, resulting in a smooth integration that effectively encapsulated the essence of delivering an excellent user experience.
My engineering background facilitated close collaboration with developers to translate the design system into code. Utilizing Material Design MUI components ensured a seamless transition from design to code, resulting in a smooth integration that effectively encapsulated the essence of delivering an excellent user experience.
Version Control
To ensure the consistent updating and upkeep of the design system to accommodate changes and enhancements, I created a repository structure that organized the design system into components, styles, assets, and documentation.
To ensure the consistent updating and upkeep of the design system to accommodate changes and enhancements, I created a repository structure that organized the design system into components, styles, assets, and documentation.
-
- components/: Store reusable UI components
- styles/: Manage design styles, such as typography, colors, and spacing
- assets/: Include images, icons, and other assets
- documentation/: Document usage guidelines and design principles
- examples/: Provide usage examples and demos
- scripts/: Store automation scripts and build tools
We adopted semantic versioning to precisely label each release, change, feature addition, and bug fix.
Also, we maintained a version history document for modifications made in each release. To fortify our efforts, we’ve also implemented backup and disaster recovery protocols.
The team understood the significance of having feedback in upholding a products currency. Consequently, the team implemented a feedback mechanism that encourages users to report issues and propose enhancements. This iterative feedback loop plays a crucial role in fine-tuning the design system through user input and elevating its overall effectiveness.
Scale
As Raven grows, the design system would need to accommodate new projects and platforms as it is a living document that continues to be refined and expanded over time.
As Raven grows, the design system would need to accommodate new projects and platforms as it is a living document that continues to be refined and expanded over time.
Results and Takeaways
In summary, the integration of the design system into the Teledyne FLIR Security Planner SaaS product has proven to be an unequivocal triumph. The success of the design system can be attributed to careful planning, collaborative efforts, and a steadfast dedication to industry-leading practices. This approach not only streamlined the design and development processes but also markedly elevated client satisfaction levels. With this system in place, Teledyne FLIR are well-equipped to maintain consistency, scalability, and user satisfaction in their product.
In summary, the integration of the design system into the Teledyne FLIR Security Planner SaaS product has proven to be an unequivocal triumph. The success of the design system can be attributed to careful planning, collaborative efforts, and a steadfast dedication to industry-leading practices. This approach not only streamlined the design and development processes but also markedly elevated client satisfaction levels. With this system in place, Teledyne FLIR are well-equipped to maintain consistency, scalability, and user satisfaction in their product.
The favorable feedback we’ve received and the notable increase in user engagement stood as strong evidence of the design system’s effectiveness in providing a seamless, user-centered experience.
YOU MAY ALSO BE INTERESTED IN:
