Selected work

Designing complex, system-driven products that people can actually use.

Interaction & UI design across hardware-connected interfaces, embedded displays, mobile-first apps and scalable design systems. Two case studies below — click in to see the problem, the approach and the result.

← Portfolio
Companion web app · structural monitoring · Hexagon

Invicta WebApp

The problem

Monitoring the structural health of bridges and slopes is safety-critical — but historically the preserve of specialists with complex tools. Invicta pairs a monitoring sensor with a companion web app so teams can set it up, watch movement over time and act on millimetre-level displacement before it becomes a risk. The challenge: make something this technical genuinely usable.

Context

The interface for configuring the sensor and turning raw displacement, vibration and deflection data into something an engineer can read at a glance.

My role

Sole UX/UI designer, reporting to the project manager and working directly with the front-end team to keep Figma and code aligned.

Approach

I joined early, when the first design lacked system alignment and a coherent IA. I rebuilt the foundations, then designed the complex components the system didn't yet cover.

Invicta context
Invicta design involvement

Information architecture

Two-layer navigation
Problem: a flat structure didn't scale and buried key tasks as features grew.   Solution: Main navigation + Sessions navigation, giving the app room to grow with clear, scalable wayfinding.
IA
IA solutions

Monitoring

Placing points, fast
Problem: placing monitoring points took too many clicks and broke the flow; users couldn't easily fix or name points.   Solution: a dedicated Add-Point toolbar, inline rename/delete, and an optional default name — faster setup, more control.
Monitoring
Monitoring interactions

Displacement analysis

Reading movement over time
Problem: one view couldn't serve both spatial and trend reading, and scrubbing long histories was clumsy.   Solution: switch between All / Map / Graph, a rebuilt timeline that filters from years to minutes, and pinch-to-zoom event placement that never hides the data.
Displacement analysis
Displacement interactions
Timeline and events

Impact

“It improved the maturing of the design, exploring different scenarios in advance of developing and testing… communication with SW developers turned out to be really smooth, with less stress and more common understanding.”

Giulio Telleschi — Project Manager

“A brand-new look & feel that solves lots of UI and usability issues we had previously… every stakeholder is looking forward to seeing the new UX concept live soon.”

Francesco Coppi — Director, Monitoring Radar Product Management
← Portfolio
Mobile app redesign · high-precision field data collection

Zeno Mobile One

The problem

Field teams georeference critical infrastructure — pipelines, boundaries, assets — with survey-grade precision, but they were doing it through an outdated, inconsistent app with no underlying system and no support for variable outdoor lighting. Every screen drifted and development was slow. Zeno Mobile One is the ground-up, token-driven redesign that fixes this.

Context

An asset-management solution that captures accurate satellite data to georeference assets in the field — it had to modernise and hold up in real outdoor conditions.

My role

Sole designer. Full audit of the legacy app, then led the complete redesign with product managers and front-end (Scrum).

Approach

A token-driven UI library on sub-atomic design principles — consistent, themeable, fast to implement — aligned to the Pangea design system.

Zeno context
Zeno design involvement

Interface & responsive design

A consistent, system-driven UI
Problem: no shared components meant inconsistent screens and slow, repetitive development.   Solution: a structured component library and responsive setting pages that stay usable across the device's contexts.
Setting pages
Responsive design

Design tokens — light & dark

One source of truth, two themes
Problem: a single fixed theme failed in bright/variable field conditions, and designs drifted from code at hand-off.   Solution: tokens (primitive → semantic) drive light and dark mode, with documented specs so developers build exactly to design.
Design tokens light & dark
Design tokens specs
Primitive colours
Figma to code

Impact

“Working with Stefano massively improved our workflow and results… since we have Stefano on board, this process really sped up.”

Cindy Teeven — Product Engineer

“He helped us revise the UI/UX to align it to Pangea and develop the missing parts… and transferred our ideas to the software development team in an effective way.”

Markus Speckle — Senior Software Engineer
Stefano Andreottola
Interaction Designer · UI Specialist
Zürich, Switzerland · Swiss permit B  ·  linkedin.com/in/stefanoandreottola

UX/UI designer based in Zürich, working across hardware-related interfaces, embedded display experiences, mobile-first apps, web platforms and scalable design systems. Across roles in Austria and Switzerland, I have shaped complex digital products connected to physical devices, bringing software, hardware and real user workflows together in a clear, practical way. I design cross-platform with strong Figma expertise and a disciplined use of design tokens, supported by AI-assisted prototyping and rapid iteration.

Interaction DesignUI DesignIcon DesignDesign SystemsDesign TokensMobile-firstIoTEmbedded UIFigmaClaudeAI-assisted prototyping

Work experience

Jan 2023 — Present
Zürich, CH
UX / UI Designer
  • Build and scale design systems — robust components and strategic design tokens for seamless UX across web and embedded platforms.
  • Design intuitive, mobile-first interactions for sensor-driven and geospatial field products such as Zeno Mobile and MyMo, leading product designs to shape optimal UX and workflows.
  • Create high-fidelity, vibe-coded prototypes to validate ideas quickly and generate documentation that supports faster development.
  • Create and maintain an extensive custom icon library; drive design-system adoption and align design, product and engineering.
  • Streamline UXOps as the main Figma Admin, improving governance and workflows across design operations.
Mar 2020 — Dec 2022
Klaus, AT
Digital Product Designer
  • Designed across products — from touch embedded devices to Windows and web applications.
  • Built and maintained the design system and design operations.
Sep — Dec 2019
Dornbirn, AT
UX / UI Designer
  • Designed a cooking app that helps users find inspiration, share their creations and learn new techniques.
  • Worked in an international, cross-disciplinary team to build the platform.
Jan — Jul 2019
Trento, IT
UX / UI Designer
  • Built the GPI design system and the visual design for GPI's software solutions.
2015 — 2018
Remote
Earlier experience
  • 2D Animator & Copywriter at Canadian Solar (Oct–Dec 2018).
  • Graphic Designer, freelance, at Fiverr (2015–2017).

Education

2016 — 2019
Trento, IT
Higher Education Diploma
Graphic Design & Multimedia Comm. · Trento Alta Formazione Grafica
2015 — 2016
Tilburg, NL
Exchange Programme · 2 semesters
Art Communication & Design · Fontys University
2010 — 2015
Trento, IT
High School Diploma
Multimedia Graphic Design · Istituto Pavoniano Artigianelli

Personal skills

Languages
Italian (native) · English (C1.2, Trinity College London) · German (basic, A2)
Tools
Figma · zeroheight · Claude.ai · Adobe Creative Cloud · Design tokens · Prototyping · AI-assisted workflows
Soft skills
Communication · teamwork · time management · flexibility · problem-solving
Interests
Networking · travel · photography · swimming · skiing · fitness

Protected case studies

These project pages are password-protected. Enter the password to view them.

Incorrect password — please try again.