UX/UI design for embedded systems

When an embedded product includes a display, a touch panel or a set of physical controls, the quality of its interface becomes as decisive for the product's success as the hardware that hosts it. UX (User Experience) and UI (User Interface) are complementary but distinct disciplines: UX studies how the user experiences the interaction with the device as a whole — what information they need, in what order, with what cognitive load, to complete a task safely and efficiently — so it's a matter of analysis, flow and information architecture, not graphics. UI, on the other hand, is the visual and tactile translation of that flow: the layout of elements on screen, the color palette, typography, control states, and readability under real use conditions (for example: direct sunlight, work gloves, small low-resolution displays).

At Protech we approach the study of embedded UX/UI with the same rigor we apply to electronic design, following an established development flow: study of roles and requirements, wireframes, graphic proposals and mockups, interactive prototyping and usability analysis, before moving on to implementation on the real target.

A poorly designed interface generates operator errors, returns and support tickets; in regulated contexts (industrial, medical) it can also become a compliance issue against usability engineering standards.

Roles & requirements analysis

Architecture & Wireframes

Graphic proposals & mockups

Interactive prototyping

Usability testing

Implementation on target (Qt, LVGL)

HMI panel for a professional audio power amplifier

Implemented on a 480×272 4.3″ TFT display. Fully navigable demo across the pages, with input and output vu-meters, diagnostics and system settings. Swipe vertically to move between pages, horizontally between sub-views. Click a row on the Setup page to edit its value. Click the logo to restart the mockup.

Our UX/UI development process, from role analysis to the finished product

Roles & requirements

The process starts with the study of the context of use: who operates the device (line operator, maintenance technician, end user), with what skills, under what environmental conditions and how often. We define roles, use cases and functional requirements before drawing a single screen, to avoid having to go back and forth over the development multiple times.

Wireframes & UI design

From the requirements we build low-fidelity wireframes to validate flows and information hierarchy, then turn them into high-fidelity graphic proposals and mockups — palette, iconography, typography — checked against the product's real resolution and panel, not just on a desktop monitor.

Prototyping & testing

Mockups become interactive, navigable prototypes, which we use to test usability with real users before writing a single line of firmware: we catch ambiguities, perceived response times and layout issues while they're still cheap to fix, and only once validated do we move on to implementation on the target.

Advantages

  • Fewer operator errors and support interventions.
  • Reduced training time for the product's end users.
  • Improved operational safety in industrial and medical contexts.
  • Compliance with usability engineering standards.

Benefits

  • Interfaces that stay readable on small, low-resolution displays or under strong ambient light.
  • Visual consistency with the brand image.
  • Lower development costs, thanks to mockups and flows extensively validated before implementation.
  • Product differentiation from the competition.

HMI for a high-voltage pulse generator

Touchscreen interface for a PLASMA high-voltage pulse generator built on embedded Linux (LVGL v9 on an ARM Cortex-A SoC), implemented for a 7″ 1024×600 TFT display, with a main screen showing a real-time pulse graph, discharge parameter configuration and alarm handling. Interface navigable with mouse or touch exactly as on the real device. Parameters are editable while HV is disabled. Enable HV to simulate the trigger. Click the logo to restart the mockup.

Dashboard for an arc welding machine

A 1024×600 dashboard for the 7″ capacitive touchscreen of a next-generation MIG PULSED SYNERGIC arc welding machine: system status at a glance, quick process parameter selection and real-time monitoring graphs while welding. Click the logo to restart the mockup, click the menu to switch between light/dark mode.

Want to know more?

Call us right away or send an email to 
info@protechgroup.it

Contact

Protech s.a.s. di Girardi A. & c. 
Registered Office: Via dei Pini 21, 31033 - CASTELFRANCO VENETO (TV) - Italy 
VAT/Tax ID 03510960267 - SDI Code WP7SE2Q
info@protechgroup.it

© 2000-2026 Protech Engineering. All rights reserved · Privacy Policy