INDUSTRIAL & PRODUCT DESIGN // DUAL-SCREEN UI/UX

Dual-Screen Smart Desk Music Console Industrial & UI/UX Case Study

A dedicated desktop smart music companion and brand system rooted in Industrial Retro-Futurism—combining an angled 2.8" touch canvas, a front-lip 1.3" ambient telemetry OLED, and a tactile rotary encoder cluster to return focus and ownership to music listening.

ROLE: Founder, Product & Brand DesignerDISCIPLINE: Hardware Ergonomics, UI/UX & Brand IdentityLIVE PORTAL: silra-guidelines.vercel.app ↗

CONTEXT // 01THE CHALLENGE

Reclaiming Focus from Notification-Driven Listening

Modern music streaming is tethered to smartphones—meaning every track change invites work messages, algorithmic pop-ups, and notification fatigue. Inspired by Dieter Rams' Ten Principles for Good Design, Teenage Engineering, and classic Walkman hardware, the challenge was to design a distraction-free physical desk console that celebrates offline library ownership. Explore how this philosophy carries into our Nothing Notes offline workspace case study and Dot-Matrix Calculator UI system.

CONTEXT // 02THE OBJECTIVE

Wedge Ergonomics & Dual-Display Choreography

Architect a cohesive hardware-software system where physical form and digital interface reinforce each other: a 32° angled top face for effortless desktop touch interaction, a vertical front lip for eye-level ambient status, and an interactive web hardware simulator & brand portal to validate every state before enclosure fabrication.

STRATEGY // 03PRODUCT & UI ARCHITECTURE

Asymmetric Dual-Screen Hierarchy & Tactile-First Controls

Instead of forcing a single screen to handle both deep navigation and always-on room visibility, SILRA Wave One splits cognitive load across two specialized displays and pairs them with eyes-free mechanical physical affordances on the left endcap. See how this connects to my broader multidisciplinary design work and my articles on visual hierarchy and brand systems.

01 // ASYMMETRIC DUAL-DISPLAY CHOREOGRAPHYPaired an angled 2.8" (320×240) color TFT touchscreen for time-synced .LRC lyrics, track scrubbing, and weather forecasts with a front-facing 1.3" (128×64) cyan OLED for zero-glare spectrum visualization and telemetry.

02 // LEFT-ENDCAP TACTILE CLUSTER & 1500MS HUDPositioned a 24-detent knurled rotary encoder and dedicated Play/Mode push switches on the left endcap; turning the dial triggers an instant 1,500ms high-contrast volume HUD override across both displays.

03 // THREE AMBIENT DESK MODES (MUSIC ⇄ CLOCK ⇄ WEATHER)Designed seamless one-press transitions between active lyric playback, an oversized monospace desk chronograph, and a 5-day atmospheric telemetry dashboard.

04 // INDUSTRIAL RETRO-FUTURISM DESIGN SYSTEMEstablished a complete brand identity and token system pairing matte dark enclosure surfaces (#09090B) with high-visibility Cyber Orange (#FF6B00) and Telemetry Cyan (#00F0FF) emissive accents.

SOLUTION // 04

Hardware Simulator, Dual-Screen UI & Brand System

HARDWARE // 01

Click to Enlarge ⤢

3D Wedge Console & Left Endcap Cluster

INTERFACE // 02

Click to Enlarge ⤢

Dual-Screen Synchronized Playback UI

MODES // 03

Click to Enlarge ⤢

Ambient Desk Modes (Clock & Weather)

ERGONOMICS // 04

Click to Enlarge ⤢

Tactile Ergonomics & Volume HUD Override

TOPOLOGY // 05

Click to Enlarge ⤢

Modular Hardware & Power Topology

IDENTITY // 06

Click to Enlarge ⤢

Industrial Retro-Futurism Brand System

IMPACT // 05WHAT I LEARNED

Bridging Physical Ergonomics and Digital State Machines

Taking SILRA Wave One from an early audio hardware concept to a full industrial wedge enclosure and interactive web simulator demonstrated how physical constraints—viewing angles, display pixel density, and mechanical switch travel—sharpen every UI decision.

LESSON // 01

Viewing Geometry Dictates UI

Tilting the primary touch surface to 32° while keeping the secondary 1.3" OLED vertical at 90° solved the classic desktop tradeoff between comfortable wrist reach and across-the-room legibility.

LESSON // 02

Interactive Simulation First

Building a live, clickable hardware simulator in the browser allowed us to test rotary encoder interrupts, lyric scrolling cadence, and 320×240 typography legibility rapidly before locking physical tolerances.

LESSON // 03

Emissive Color Semantics

Separating warm Cyber Orange (#FF6B00) for primary human actions on the TFT from cool Cyan (#00F0FF) for passive machine telemetry on the OLED created an intuitive visual language.