The Problem

The existing checkout experience had two key issues:

1. Confusing AOI Display:

   • The cart showed the scene footprint instead of the AOI (Area of Interest) used to add the scene, causing user frustration.

2. Inconsistent Design:

   • The checkout page lacked a standardized layout, leading to disjointed workflows across UP42’s platform.

Business Impact:

• Risk of cart abandonment due to unclear geospatial context.

• Inefficient reuse of components, increasing dev and design debt.

The Solution

1. Research & Industry Benchmarking

• Competitor Analysis:

  • Studied checkout flows from e-commerce (e.g., Amazon) and geospatial platforms (e.g., Sentinel Hub).

  • Identified best practices for cart clarity and map integration.

• User Testing:

  • Conducted sessions with 3 customers to validate pain points.

  • Key insight: Users wanted to see the exact AOI they selected, not just the scene footprint.

2. Cross-Team Collaboration

• Figma Variants:

  • Created toggleable variants (e.g., "Catalog mode" vs. "Tasking mode").

• Documentation:

  • Wrote guidelines for:

    • Overrides: What text/colors could change.

    • Redlines: What must stay locked (e.g., button hierarchy).

3. Design Execution

• AOI Visualization:

  • Reused the map component from the catalog sidebar to display:

    • Scene footprint (bounding box).

    • User-selected AOI (highlighted in a contrasting color).

• Unified Checkout Layout:

  • Standardized spacing, typography, and action buttons.

  • Integrated CSAT collection post-checkout for feedback.

• Handoff & Collaboration:

  • Took over another designer’s work, ensuring seamless transitions.

  • Worked closely with devs to ensure component reusability.

4. Validation

• Users confirmed the AOI distinction reduced confusion.

• Internal teams praised the modular design system approach.