UI Design Case study

smallHD
Focus on defining the problem of decoupling and how the joystick and confirm button created the necessary modality in the display view for orientation options
smallHD

UI Design case study: Display Orientation

Project Overview:‍
This project addressed a core interaction challenge within a professional field monitor environment. The goal was to redesign a simple "Display Orientation" settings menu for a SmallHD device to allow users to independently control the rotation and mirroring of two distinct elements: the live video feed and the menu overlay that appears on top of it.

This decoupling is critical for camera operators who may mount the monitor upside down or mirrored, yet need the on-screen menu to remain consistently upright for fast operation.
Prompt: Decoupling and Constraint
Decoupling Controls: Separate the logic for four distinct operations (Video Rotate, Video Mirror, Menu Rotate, Menu Mirror) from the previous single "Display Rotate" control.
Input Constraint: Implement this enhanced functionality using an extremely limited input set: a 4-directional joystick (Up, Down, Left, Right), a Confirm button, and a Back button. The solution had to be operable quickly and efficiently without a touchscreen interface.
Role:
UX/UI Design
Tools:
Figma

Design options

— The following options were presented for the Independent Display Orientation:
DESIGN 1
Introduced a decoupled orientation model that allowed operators to independently control video rotation, menu rotation, video mirroring, and menu mirroring from a single screen. The layout grouped rotational actions as segmented button controls while presenting mirroring states as binary radio selections, creating a clear distinction between rotational adjustments and on/off display behaviors. This structure was designed to minimize navigation effort when operated with a directional joystick and confirm button, enabling camera operators to make rapid orientation changes in high-pressure production environments.
DESIGN 2
This concept introduced a vertically stacked list of orientation controls that leveraged checkbox-based selection patterns to manage independent video and menu transformations. By presenting Rotate Video, Rotate Menu, Mirror Video, and Mirror Menu as selectable options within a single list, operators could configure multiple orientation states before committing changes through a single confirmation action. The design emphasized efficiency by reducing repetitive navigation and supporting faster setup workflows for users working under time-sensitive production conditions.
‍
DESIGN 3
This concept transformed display orientation settings into a grid of four large, equally weighted action tiles representing the independent controls introduced through the decoupling effort: Rotate Video, Mirror Video, Rotate Menu, and Mirror Menu. By elevating each behavior to a primary action, the design reduced ambiguity around the relationship between video and menu orientation while providing larger interaction targets optimized for joystick navigation. The layout emphasized visibility, quick recognition, and efficient selection within a hardware-constrained interface.
DESIGN 4
This concept organized orientation settings into two logical groups—Video and Menu—each containing independent Rotate and Mirror controls. By pairing related actions within clearly defined sections, the interface reinforced the newly decoupled relationship between content and interface orientation while simplifying navigation within a joystick-driven environment. Toggle controls provided immediate visibility into system state, allowing operators to quickly understand and modify orientation settings without navigating through additional screens or interaction modes.
DESIGN 5
To solve the challenge of decoupling the video feed from the UI overlay, I introduced a tabbed architecture (Video vs. Menu) that maps directly to the joystick’s left/right inputs. This establishes a clear mental model, allowing operators to isolate which layer they are manipulating. Below the tabs, binary toggle switches handle the Rotate and Mirror states via up/down joystick movements. Finally, to prevent disorienting accidental triggers while navigating with hardware buttons, the design introduces a necessary staging modality: changes are explicitly committed via the 'Confirm' button, ensuring the operator maintains complete control over the monitor's orientation.
DESIGN 6
Driven by a human-to-machine design approach, this iteration bridges the physical hardware constraints with the digital interface. By utilizing a unified list of inline, segmented toggle buttons, all four decoupled settings (Video and Menu orientation) are visible simultaneously, eliminating hidden states. This specific UI pattern maps intuitively to the physical inputs: operators use vertical joystick movements to navigate the list, and horizontal movements to toggle the segmented states. The tactile nature of the controls provides engaging, predictable feedback, while the explicit 'Confirm' requirement ensures user intent is validated before execution.
‍
DESIGN 7
To completely streamline the physical input required, this iteration relies on a strictly linear, vertical flow. The decoupled Video and Menu options are explicitly grouped and stacked using a radio button architecture. By expanding the interactive state so that the descriptive text and icon become part of the selectable row, the design creates a highly forgiving interaction model. Operators only need simple up/down joystick movements to parse all available settings, culminating in an explicit confirmation step, which drastically reduces cognitive load and hardware fatigue.

Conclusion

Ultimately, the Display Orientation project highlights the critical intersection of digital interfaces and physical hardware. By decoupling complex viewing logic into distinct, manageable controls, this exploration demonstrates how to reduce cognitive load for camera operators in high-pressure environments. Navigating the strict constraints of a 4-way joystick required a deep commitment to a human-to-machine design philosophy, ensuring that the digital UI intuitively mirrors physical inputs. Across all iterations, the deliberate introduction of explicit confirmation modalities successfully mitigated the risk of accidental display inversions, prioritizing user confidence, predictability, and operational efficiency.