Case Study: Transitioning from Tabs to Contextual Panels in an IoT Control App

Tech · 6 min read

Operators had to switch between multiple top-level tabs to perform routine tasks—monitoring, firmware updates, and alerts—causing costly context switching. Usability tests revealed that the same sets of actions were repeated across device types, but operators accessed them in varying sequences depending on incident context. The team hypothesized that surface-level tabs were the wrong information architecture for job-based work.

Designers moved to contextual panels that open on selecting a device or a group. Panels contained action clusters relevant to that selection and retained state as operators moved between devices. The change required updating the component library: responsive panels, consistent header affordances, and a compact command palette for keyboard-driven power users. They also introduced an "incident mode" that surfaced escalation actions and paired devices with recommended next steps.

After deployment, task completion time for common workflows fell by 24%, and logged operator errors decreased by 15% in the first month. The case study highlights implementation lessons: aligning design system components with operational mental models, building keyboard and screen-reader support, and migrating users through targeted in-app tours rather than forcing a sudden change.