Physical AI Web Experience
Designing a Clearer Digital Journey for Physical AI – UX Strategy • Information Architecture • Responsive Wireframing • Figma Prototyping
Physical AI brings together sensing, AI processing, real-time decision-making, and deterministic control. The challenge was to translate that technical complexity into a digital experience that helps engineers quickly understand what they can build, how the architecture works, which FPGA platform fits their requirements, and how to get started.
I developed this responsive web experience concept from user journey and information architecture through desktop and mobile wireframes and an interactive Figma prototype.
Make complex technology easier to explore
Physical AI spans robotics, intelligent vision, autonomous systems, edge AI, sensing, compute, and real-time control.
Rather than organizing the experience primarily around products and technologies, I approached the page from the customer’s decision journey.
The experience needed to answer four questions:
01 – What can I build?
Discover Physical AI applications and use cases.
02 – How can I build it?
Understand the Sense → Process → Decide → Act architecture.
03 – Which FPGA is right for my design?
Evaluate FPGA platforms based on application requirements.
04 – How do I get started?
Move into reference designs, development kits, software, tools, and sales engagement.
Experience Strategy
From product-centric navigation to an application-led journey
I structured the experience to progressively move an engineer from exploration to evaluation to action.
Rather than organizing the experience primarily around products and technologies, I approached the page from the customer’s decision journey.
Translating Architecture into a Web Experience
Sense → Process → Decide → Act
I used a simple four-stage architecture to communicate how FPGA technology can support a Physical AI system.
SENSE
Connect cameras, LiDAR, radar, industrial sensors, and other high-bandwidth interfaces.
PROCESS
Pre-process, synchronize, aggregate, and transform sensor data in real time.
DECIDE
Run AI inference, perception, sensor fusion, and decision logic.
ACT
Translate decisions into deterministic motor, machine, or system control.
The architecture becomes both a technical storytelling framework and a navigation framework for the experience.
Responsive Wireframing
One journey across desktop and mobile
I translated the information architecture into responsive desktop and mobile wireframes in Figma.The desktop experience provides room for architecture visualization, application discovery, and FPGA comparison, while the mobile experience restructures the same journey into a clear vertical flow with mobile-specific navigation.
Desktop experience
Application-led content hierarchy
Architecture visualization
FPGA platform comparison
Resource and conversion paths
In-page navigation and interactions
Mobile experience
Responsive content hierarchy
Stacked application and architecture cards
Mobile hamburger navigation
Touch-friendly interaction patterns
Consistent conversion journey
Interactive Prototype
I built the experience as a working Figma prototype to test how users could navigate through the page.
The prototype includes Auto Layout, responsive structures, in-page scroll interactions, desktop and mobile navigation, and an interactive mobile menu using overlays.
This allowed me to evaluate not only how the page looks, but also how the customer moves through the experience.
[View Desktop Prototype] [View Mobile Prototype]
From Complexity to Customer Journey
Complex technology doesn’t need a complex customer experience.
The objective was to create a digital journey that helps engineers move naturally from: What can I build? → How does it work? → Which platform fits? → How do I start?
That same principle guides how I approach digital experience strategy: start with the customer’s questions, simplify the technology story, and create clear paths from discovery to action.
