Overview
We created an IP-connected web app that talks to the hardware, accesses presets and multiple processes, and keeps a professional look and feel while rendering real-time signals and values. A few days after the first release, the product won 4 awards from the leading AV press community.
Product
The device
- 20-port audio matrix with DSP and interchangeable I/O.
- Intuitive, comprehensive configuration and control from a web app, over the device's IP address.
AFM-20DSP is a member of the Kramer XSPerience family: a professional audio matrix switcher with 20 analog ports that can be configured as inputs or outputs, multi-channel DSP, built-in amplifiers, a 4x4 Dante interface, HDMI embedding and de-embedding, and S/PDIF.
- 20 analog ports
- Multi-channel DSP
- 2x60W @ 8Ω
- 1x120W @ 70V/100V
- 4x4 Dante
- HDMI
- S/PDIF
The challenge
A professional audio matrix with DSP has hundreds of parameters. Integrators needed to configure routing, processing and hardware settings quickly and without mistakes, while seeing live signal levels.
The solution
A dark, studio-grade web app built from ~300 multi-state components: a visual I/O matrix, process presets, mixer and equalizer panels with real-time meters, and clear system settings with safe-guard warnings.
Process
- 01
Discover
Interviews, analytics and stakeholder workshops to map the real problems behind audio configuration.
- 02
Define
Synthesised findings into user journeys, priorities and clear success metrics.
- 03
Design
Iterated from flows and wireframes to high-fidelity prototypes inside a shared design system.
- 04
Validate & ship
Usability tests with real users, then close collaboration with engineering through launch.
Results
4
Industry awards days after launch
~300
UI components
120
Screens
8
Months of development
Shimi landed right into one of the most urgent and important projects in the team. He learned very fast the essence of the project and became a part of the team as if he always was one. Proposed ideas, used new design tools, and eventually built very impressive and user-friendly design for a very complicated project.
Inside the product
The device
The AFM-20DSP hardware, front and back, and a typical installation: microphones, players, Dante, HDMI and speakers all connected through one unit.
Process matrix presets
Different processing presets on top of the I/O matrix, including AFS/AEC modes with their own settings.
Mixer & equalizers
Mixer menu and multiple equalizer designs working with a complex input/output matrix.
Advanced I/O matrix
Shows every input/output connection with its volume preset.
System settings
A/V hardware setup menus — I/O configuration, presets, amplifier and Dante settings — with clear warnings before risky actions.
Components design
Multiple-state components — knobs, faders, meters and buttons — for an easy and professional UX.
Next case study
Tagging Tracking