Spectra
Spectra

Design & Product Strategy Consulting

Design & Product Strategy Consulting

Automating the End-to-End Workflow for Actionable Drone Insights

Automating the End-to-End Workflow for Actionable Drone Insights

ABOUT THE PRODUCT

Spectra is Skylark Drones' flagship software platform designed to process, analyze, and visualize drone-captured data in real-time. It offers a wide range of features, including 2D and 3D mapping, volumetric analysis, progress tracking, compliance reporting, and more, allowing industries to make data-driven decisions.


The platform helps industries:

  • Optimize operations through aerial data

  • Improve safety with remote inspections

  • Maintain compliance by tracking deviations in real-time

ABOUT THE PRODUCT

Spectra is Skylark Drones' flagship software platform designed to process, analyze, and visualize drone-captured data in real-time. It offers a wide range of features, including 2D and 3D mapping, volumetric analysis, progress tracking, compliance reporting, and more, allowing industries to make data-driven decisions.


The platform helps industries:

  • Optimize operations through aerial data

  • Improve safety with remote inspections

  • Maintain compliance by tracking deviations in real-time

Before and after redesigning the project

PROBLEM

Before its transformation, Spectra stood as a powerful yet underutilized tool in the drone data analytics landscape. Despite its robust capabilities, the platform grappled with critical user experience hurdles that hindered its true potential:


  • Navigating a Digital Labyrinth

    The user interface, while feature-rich, resembled a complex maze. Industry professionals, instead of effortlessly accessing insights, found themselves lost in a sea of options. This cognitive overload transformed what should have been intuitive data exploration into a daunting task, especially for newcomers to the platform.


  • The Productivity Paradox

    Spectra's workflow was a double-edged sword. While comprehensive, it demanded users navigate through a labyrinth of steps to process data. This convoluted journey from raw drone footage to actionable insights resulted in significant time inefficiencies, ironically hampering the very productivity the platform aimed to enhance.


  • A Visual Identity Crisis

    In the cutting-edge world of drone technology, Spectra's inconsistent branding and dated visual design struck a discordant note. The platform's appearance failed to reflect its advanced capabilities, creating a misalignment between user expectations and the product's true value. This visual disconnect not only impacted user perception but also undermined Spectra's position in the competitive drone-tech market.

PROBLEM

Before its transformation, Spectra stood as a powerful yet underutilized tool in the drone data analytics landscape. Despite its robust capabilities, the platform grappled with critical user experience hurdles that hindered its true potential:


  • Navigating a Digital Labyrinth

    The user interface, while feature-rich, resembled a complex maze. Industry professionals, instead of effortlessly accessing insights, found themselves lost in a sea of options. This cognitive overload transformed what should have been intuitive data exploration into a daunting task, especially for newcomers to the platform.


  • The Productivity Paradox

    Spectra's workflow was a double-edged sword. While comprehensive, it demanded users navigate through a labyrinth of steps to process data. This convoluted journey from raw drone footage to actionable insights resulted in significant time inefficiencies, ironically hampering the very productivity the platform aimed to enhance.


  • A Visual Identity Crisis

    In the cutting-edge world of drone technology, Spectra's inconsistent branding and dated visual design struck a discordant note. The platform's appearance failed to reflect its advanced capabilities, creating a misalignment between user expectations and the product's true value. This visual disconnect not only impacted user perception but also undermined Spectra's position in the competitive drone-tech market.

Product Vision Alignment

Product Vision Alignment

Product Vision Alignment

The Product Vision Alignment session for Spectra's redesign was a crucial collaborative effort that brought together diverse stakeholders including surveyors, drone operators, and industry experts. Through focused workshops, we delved into the core challenges faced by users, identifying workflow bottlenecks, user experience pain points, and critical feature needs. This intensive process allowed us to synthesize varied perspectives into a unified vision for Spectra: a seamless, intuitive platform that accelerates drone data processing, leverages AI for deeper insights, and simplifies decision-making across industries. By aligning key stakeholders early in the redesign process, we ensured that our efforts would remain firmly rooted in user needs and business objectives.


Key Outcomes:

  • Defined clear, prioritized objectives for the redesign

  • Established a shared understanding of critical user needs

  • Set measurable goals for the redesign process

  • Secured strong stakeholder buy-in for the project

  • Created a roadmap for feature development and UX improvements

AUDITING EXISTING SYSTEMS

The audit of the current Spectra platform revealed key pain points, including complex workflows, a cluttered UI, and slow data processing. By analyzing user feedback, support tickets, and performance metrics, we identified areas for improvement, such as simplifying navigation and reducing steps in data tasks. This audit laid the foundation for a more intuitive and efficient redesign.

AUDITING EXISTING SYSTEMS

The audit of the current Spectra platform revealed key pain points, including complex workflows, a cluttered UI, and slow data processing. By analyzing user feedback, support tickets, and performance metrics, we identified areas for improvement, such as simplifying navigation and reducing steps in data tasks. This audit laid the foundation for a more intuitive and efficient redesign.

User Personas

We developed several personas to represent Spectra’s diverse user base. After interviewing several customers of Spectra, Below is one example:


Persona: Rajesh Kumar, Site Manager (Mining Industry)
Age: 42
Role: Site Manager at a large mining company, responsible for overseeing production, safety, and operational efficiency.
Goals: Ensure accurate tracking of extraction volumes, minimize downtime, reduce safety risks, and maximize profitability through drone insights.
Pain Points: Struggles with manual inspections due to hazardous terrain, delays in data processing, and difficulty interpreting complex drone data without technical expertise.
Behaviors: Relies on Spectra for daily monitoring of extraction volumes, post-blast inspections, and haul road maintenance, but prefers quick, intuitive dashboards to save time.
Tech Savviness: Moderately tech-savvy, comfortable with basic software but needs clear guidance for advanced analytics.
Quote: “I need drone data that’s fast, accurate, and easy to understand so I can make decisions without wasting time on technical details.”

Other Personas:
Anita Sharma, Solar Plant Engineer: Focuses on identifying underperforming solar panels using thermal maps and ensuring construction timelines are met.
Vikram Patel, Construction Project Lead: Uses Spectra for land acquisition mapping, cut-fill volume measurements, and subcontractor auditing.

User Personas

We developed several personas to represent Spectra’s diverse user base. After interviewing several customers of Spectra, Below is one example:


Persona: Rajesh Kumar, Site Manager (Mining Industry)
Age: 42
Role: Site Manager at a large mining company, responsible for overseeing production, safety, and operational efficiency.
Goals: Ensure accurate tracking of extraction volumes, minimize downtime, reduce safety risks, and maximize profitability through drone insights.
Pain Points: Struggles with manual inspections due to hazardous terrain, delays in data processing, and difficulty interpreting complex drone data without technical expertise.
Behaviors: Relies on Spectra for daily monitoring of extraction volumes, post-blast inspections, and haul road maintenance, but prefers quick, intuitive dashboards to save time.
Tech Savviness: Moderately tech-savvy, comfortable with basic software but needs clear guidance for advanced analytics.
Quote: “I need drone data that’s fast, accurate, and easy to understand so I can make decisions without wasting time on technical details.”

Other Personas:
Anita Sharma, Solar Plant Engineer: Focuses on identifying underperforming solar panels using thermal maps and ensuring construction timelines are met.
Vikram Patel, Construction Project Lead: Uses Spectra for land acquisition mapping, cut-fill volume measurements, and subcontractor auditing.

Key Findings from User Research

Our research uncovered several critical insights to guide Spectra’s UX improvements:
Pain Points: Users like Rajesh struggle with slow data processing, complex interfaces, and unclear worksite boundaries. Manual inspections remain a fallback due to distrust in drone data reliability.
Emotional Drivers: Users feel anxious about delays and safety risks but are motivated by the potential for efficiency and cost savings.
Opportunities: Simplify the interface with intuitive dashboards, accelerate data processing with AI, and provide real-time alerts for critical issues (e.g., equipment failures, weather changes).
Behavioral Insights: Users prefer quick, actionable insights over raw data, and they value collaboration tools to share findings with teams.

Key Findings from User Research

Our research uncovered several critical insights to guide Spectra’s UX improvements:
Pain Points: Users like Rajesh struggle with slow data processing, complex interfaces, and unclear worksite boundaries. Manual inspections remain a fallback due to distrust in drone data reliability.
Emotional Drivers: Users feel anxious about delays and safety risks but are motivated by the potential for efficiency and cost savings.
Opportunities: Simplify the interface with intuitive dashboards, accelerate data processing with AI, and provide real-time alerts for critical issues (e.g., equipment failures, weather changes).
Behavioral Insights: Users prefer quick, actionable insights over raw data, and they value collaboration tools to share findings with teams.

Design Recommendations

Based on the research, proposed following UX enhancements for Spectra:


Intuitive Dashboards: Replace complex data visualizations with clear, customizable dashboards showing key metrics (e.g., extraction volumes, equipment health) at a glance.


Real-Time Alerts: Implement notifications for weather changes, equipment issues, or incomplete data coverage during flights.


AI-Powered Simplification: Use AI to automatically detect worksite boundaries, summarize data, and suggest actions (e.g., rerouting haul roads).


Training Resources: Offer in-app tutorials and tooltips for non-technical users like Rajesh to build confidence in using Spectra.
Collaboration Tools: Enhance report-sharing features with one-click exports and real-time collaboration for stakeholders.

Design Recommendations

Based on the research, proposed following UX enhancements for Spectra:


Intuitive Dashboards: Replace complex data visualizations with clear, customizable dashboards showing key metrics (e.g., extraction volumes, equipment health) at a glance.


Real-Time Alerts: Implement notifications for weather changes, equipment issues, or incomplete data coverage during flights.


AI-Powered Simplification: Use AI to automatically detect worksite boundaries, summarize data, and suggest actions (e.g., rerouting haul roads).


Training Resources: Offer in-app tutorials and tooltips for non-technical users like Rajesh to build confidence in using Spectra.
Collaboration Tools: Enhance report-sharing features with one-click exports and real-time collaboration for stakeholders.

The Impact

The Impact

The Impact

By addressing these pain points and leveraging opportunities, Spectra can reduce user frustration, improve adoption rates, and drive operational efficiency for enterprises. For Rajesh and similar users, a more intuitive, efficient platform will save time, enhance safety, and maximize profitability—aligning with Skylark Drones’ mission to “unlock the economic potential of aerial intelligence.”

Redesigning Information Architecture (IA)

The IA was reworked to:

  • Simplify the navigation structure, reducing it from a complex multi-tiered system to a more streamlined dashboard.

  • Group related functionalities together to reduce the cognitive load on users.

  • Ensure key actions like "Data Upload" and "Compliance Reporting" were prominently accessible with fewer clicks.

Redesigning Information Architecture (IA)

The IA was reworked to:

  • Simplify the navigation structure, reducing it from a complex multi-tiered system to a more streamlined dashboard.

  • Group related functionalities together to reduce the cognitive load on users.

  • Ensure key actions like "Data Upload" and "Compliance Reporting" were prominently accessible with fewer clicks.

Wireframing and RAPID PrototypinG

Low-fidelity wireframes were created to:

  • Test different layout structures, particularly focusing on how users would interact with large datasets and visualizations.

  • Prototype workflow enhancements, such as automatic data processing triggered by a single action.

  • Tools used to test out initial prototypes - Usertesting, Maze and Figma

Spectra Design system

Spectra Design system

Spectra Design system

The Spectra Design System is the foundation of Skylark Drones' flagship software platform, enabling seamless integration of complex drone data processing, analysis, and visualization features. It was architected not just to unify one product, but to lay the groundwork for scalable, token-driven design across an expanding ecosystem—starting with Spectra’s flagship drone analytics platform and extending to Drone Mission Ops, internal admin tools, and future enterprise applications.

We began with a cross-disciplinary discovery sprint that included design, frontend engineering, QA, and PM stakeholders. Together we:

  • Audited UI inconsistencies and divergent styling approaches.

  • Defined a shared vocabulary and goals: consistency, scalability, accessibility.

  • Aligned on adopting a token-first architecture and platform-agnostic tooling.

This early alignment created psychological safety, fostered buy-in, and paved the way for seamless cross-functional ownership.

Token Taxonomy and Architecture

We drew inspiration from industry leaders like Airbnb’s DLS, Nathan Curtis' "Naming Tokens", and Salesforce’s Lightning System. Our taxonomy was designed to support:

  • Multi-brand usage

  • Theming (light/dark/enterprise)

  • Platform-specific customization across product domains


Token Layers:

  1. Global Tokens: Lowest-level primitives
    (e.g., color.orange.600, font.base, space.4)

  2. Alias/Semantic Tokens: Abstracted intent
    (e.g., color.accent.600, border.radius.md, shadow.card)

  3. Platform/Product Tokens: Namespaced for product-specific usage (e.g., spectra.button.primary.default.bg)

  4. Component Tokens: Used inside actual UI

    (e.g., button.bg.default, input.border.focused)

  5. Variant-State Tokens: Capture UI interaction context

    (e.g., admin.input.text.placeholder.disabled)

This semantic ladder ensures traceability from raw color to context-rich implementation.

Badge tokens were unified across usage contexts without introducing variants like badge.sm or badge.lg, making them highly reusable and theme-friendly.

Tokens as a Source of Truth

Tokens as a Source of Truth

Tokens as a Source of Truth

We built a centralized token system that acts as the foundation for both design and code. In our architecture, Tokens Studio in Figma serves as the authoring surface, while the version-controlled tokens.json file is treated as the single source of truth shared across all platforms.


Token Flow:

  • Tokens are authored and maintained in Figma via Tokens Studio

  • Synced to a canonical tokens.json file stored in GitHub

  • Transformed via Style Dictionary into:

    • CSS variables for web

    • SCSS maps for legacy applications

    • iOS .xml and Android .json formats for native platforms

    • JSON for documentation systems and Storybook theme contexts

  • Used by design via Figma Variables and by dev via multi-format exports

  • Integrated with CI/CD pipelines for versioning, validation, and changelog generation

This system ensures design and engineering remain in sync, and that every update to tokens is tracked, tested, and deployed consistently across all environments.

Tooling Stack for Synchronization

  • Figma variables + Tokens Studio: Author and preview tokens

  • Style Dictionary: Transform and distribute

  • Storybook: Preview token-applied components and themes

  • Chromatic: Snapshot testing and regression validation

  • GitHub CI/CD: Token linting, versioning, and auto-deploy

Documentation & Governance

  • Storybook and figma worked out as the go to documentation

  • Token proposals are submitted via PRs and reviewed weekly

  • Deprecated tokens go through a lifecycle with warnings and migration paths

  • Docs include Figma previews, usage do’s/don’ts, and accessibility guidance

Scaling

  • Spectra: Base token system created here

  • Drone Mission Ops: Extended with high-contrast brand styling (droneOps.* tokens)

  • Admin Tools: Customized input-heavy components with distinct token needs (admin.* tokens)

Teams were empowered to extend or override locally, while inheriting global consistency.

Token Versioning & Change Management

  • Each token change is versioned via semver

  • Breaking changes (renames, deletes) require migration notes

  • CI diff tool reports unused tokens and cross-references usage across codebases

  • Weekly changelog includes:

    • Added tokens

    • Deprecated tokens

    • Token mappings

The Impact

The Impact

The Impact

The implementation of the Spectra Design System yielded measurable results that significantly improved design and development efficiency across the organization.

  • 50% Faster Design-to-Code Cycles By centralizing tokens and integrating them directly into Figma and Storybook, designers and engineers could work from a shared source of truth. This eliminated redundant handoff steps and reduced the average time from design spec to coded implementation by half.

  • 100% Token Coverage in Spectra UI Kit All foundational UI components—buttons, forms, modals, and cards—were rebuilt to consume design tokens exclusively. This ensured complete themeability, consistency, and simplified downstream updates across breakpoints and interaction states.

  • 38% Improvement in Visual QA Coverage The integration of Chromatic and CI pipelines for token updates helped us catch regressions early. Visual diffs surfaced inconsistencies automatically, reducing manual QA effort and increasing test reliability.

  • Rapid Adoption: 3 Teams Migrated in Under 1 Month With clear documentation, a reliable token delivery mechanism, and cross-functional onboarding, three separate product teams transitioned to the token system in less than four weeks. These included Drone Mission Ops, internal Admin Tools, and mobile dashboards. that significantly improved design and development efficiency across the organization.

Modular Component Library

  • Scalable UI elements optimized for displaying geospatial data

  • Customizable data visualization components for 2D/3D renderings

An Intelligent Compliance Dashboard for Mine Operations

To empower mine managers and oversight teams with a clear, real-time view of operational compliance across mining zones, enabling faster decision-making and actionable insights from complex survey data.


Mining operations generate large volumes of spatial and compliance data, often hard to interpret. Our challenge was to distill this data into a visual system that simplifies pattern recognition, flags risks early, and supports regulatory compliance.

Key Features & UI Highlights:

  • Deviation Visualization Overview:
    Leveraged pie charts, heatmaps, and deviation bars to create an at-a-glance understanding of slope and width deviations across units. This helped users prioritize areas needing immediate attention.

  • Interactive Unit Drill-down:
    The UI enabled unit-wise exploration of compliance, showing both slope and width metrics in a clean, layered format. A color-coded system instantly communicated the severity of deviations.

  • Plan vs. Quantity Compliance View:
    A dual-card layout compared planned vs. actual excavation data with deviation percentages. Users could identify over-extraction or non-compliance instantly, backed by geo-anchored maps.

  • Survey Comparison Interface:
    Line graphs were used to compare elevation changes between surveys, supported by a live satellite map. This helped teams visually validate deviations in terrain and dump areas.

  • Compliance Filtering and Reporting:
    Enabled filtering by compliance status and team member, and one-click export of reports in DXF format, supporting field operations and regulatory audits.


Impact:

  • Reduced compliance review time by over 60%

  • Enabled real-time, map-anchored deviation reporting

  • Improved cross-team alignment via a visual-first, interactive design

Development and Implementation

The design system played a pivotal role in streamlining collaboration between the engineering and design teams during the Spectra redesign. By establishing a unified set of design components, guidelines, and patterns, the design system ensured that the UI redesign was implemented efficiently and consistently across the platform. This not only accelerated development by providing reusable components but also reduced the margin for errors and discrepancies in design during implementation.


For performance optimization, the design system helped standardize visual elements and interactions, making it easier for the engineering team to manage the platform's large datasets while maintaining a smooth user experience. Additionally, when integrating new AI features for predictive maintenance and actionable insights, the predefined components and interaction models ensured that these complex features seamlessly fit into the existing UI, enhancing both the user experience and engineering productivity.


The result was a cohesive, scalable platform that balanced both design integrity and technical performance, allowing faster iteration and smoother collaboration throughout the development process.

Development and Implementation

The design system played a pivotal role in streamlining collaboration between the engineering and design teams during the Spectra redesign. By establishing a unified set of design components, guidelines, and patterns, the design system ensured that the UI redesign was implemented efficiently and consistently across the platform. This not only accelerated development by providing reusable components but also reduced the margin for errors and discrepancies in design during implementation.


For performance optimization, the design system helped standardize visual elements and interactions, making it easier for the engineering team to manage the platform's large datasets while maintaining a smooth user experience. Additionally, when integrating new AI features for predictive maintenance and actionable insights, the predefined components and interaction models ensured that these complex features seamlessly fit into the existing UI, enhancing both the user experience and engineering productivity.


The result was a cohesive, scalable platform that balanced both design integrity and technical performance, allowing faster iteration and smoother collaboration throughout the development process.

Results

Post-launch, Spectra's new design delivered:

  • 25% increase in user efficiency: Tasks like data upload, processing, and reporting became faster and more intuitive.

  • Higher engagement: The streamlined UI reduced user frustration and led to higher platform adoption rates.

  • Consistent branding: The design overhaul helped improve Skylark Drones’ brand perception as an innovative leader in drone data intelligence.

  • Increased customer satisfaction: Feedback from key industry users highlighted the ease of use and productivity boosts resulting from the redesign.

Results

Post-launch, Spectra's new design delivered:

  • 25% increase in user efficiency: Tasks like data upload, processing, and reporting became faster and more intuitive.

  • Higher engagement: The streamlined UI reduced user frustration and led to higher platform adoption rates.

  • Consistent branding: The design overhaul helped improve Skylark Drones’ brand perception as an innovative leader in drone data intelligence.

  • Increased customer satisfaction: Feedback from key industry users highlighted the ease of use and productivity boosts resulting from the redesign.

Conclusion and Takeaways

The redesign of Skylark Drones' Spectra platform focused on user-centric improvements that solved pain points in workflow inefficiency, data visualization, and platform complexity. The iterative design process, grounded in user research and testing, led to a product that not only met the technical needs of its users but also provided a more seamless, enjoyable experience.

Key learnings include:

  • The value of continuous user feedback in shaping meaningful design changes.

  • The importance of aligning product branding with the company’s technological vision.

  • How simplifying complex data through intuitive design can transform user productivity and engagement.

By focusing on both form and function, the redesign project successfully positioned Skylark Drones as a forward-thinking, user-focused platform in the competitive drone intelligence industry.

Conclusion and Takeaways

The redesign of Skylark Drones' Spectra platform focused on user-centric improvements that solved pain points in workflow inefficiency, data visualization, and platform complexity. The iterative design process, grounded in user research and testing, led to a product that not only met the technical needs of its users but also provided a more seamless, enjoyable experience.

Key learnings include:

  • The value of continuous user feedback in shaping meaningful design changes.

  • The importance of aligning product branding with the company’s technological vision.

  • How simplifying complex data through intuitive design can transform user productivity and engagement.

By focusing on both form and function, the redesign project successfully positioned Skylark Drones as a forward-thinking, user-focused platform in the competitive drone intelligence industry.

Development and Implementation

The design system played a pivotal role in streamlining collaboration between the engineering and design teams during the Spectra redesign. By establishing a unified set of design components, guidelines, and patterns, the design system ensured that the UI redesign was implemented efficiently and consistently across the platform. This not only accelerated development by providing reusable components but also reduced the margin for errors and discrepancies in design during implementation.


For performance optimization, the design system helped standardize visual elements and interactions, making it easier for the engineering team to manage the platform's large datasets while maintaining a smooth user experience. Additionally, when integrating new AI features for predictive maintenance and actionable insights, the predefined components and interaction models ensured that these complex features seamlessly fit into the existing UI, enhancing both the user experience and engineering productivity.


The result was a cohesive, scalable platform that balanced both design integrity and technical performance, allowing faster iteration and smoother collaboration throughout the development process.

  • More Works SEE ALSO

✨

Connect to Content

Add layers or components to infinitely loop on your page.

Get My Parking

Parking Intelligence

Get My Parking

Parking Intelligence

Get My Parking

Parking Intelligence

Get My Parking

Parking Intelligence

Juyo

Health Ai

Juyo

Health Ai

Juyo

Health Ai

Juyo

Health Ai