Sono Motors

Establishing scalable UI foundations for a rapidly evolving product

Duration

1 years

Made with

Stakeholder

Industry

Automotive

Automotive HMIs operate in environments where attention is limited, constraints are strict, and mistakes are costly. Interfaces must remain legible, predictable, and reliable across driving contexts, hardware limitations, and safety requirements. This project shows how interface and visual design decisions were made explicit and shared to build a coherent HMI system for Sono Sions first electric vehicle, balancing usability, brand expression, and embedded constraints.

Sono Motors

Establishing scalable UI foundations for a rapidly evolving product

Duration

1 years

Made with

Stakeholder

Industry

Automotive

Automotive HMIs operate in environments where attention is limited, constraints are strict, and mistakes are costly. Interfaces must remain legible, predictable, and reliable across driving contexts, hardware limitations, and safety requirements. This project shows how interface and visual design decisions were made explicit and shared to build a coherent HMI system for Sono Sions first electric vehicle, balancing usability, brand expression, and embedded constraints.

Sono Motors

Establishing scalable UI foundations for a rapidly evolving product

Duration

1 years

Made with

Stakeholder

Industry

Automotive

Automotive HMIs operate in environments where attention is limited, constraints are strict, and mistakes are costly. Interfaces must remain legible, predictable, and reliable across driving contexts, hardware limitations, and safety requirements. This project shows how interface and visual design decisions were made explicit and shared to build a coherent HMI system for Sono Sions first electric vehicle, balancing usability, brand expression, and embedded constraints.

Context

Sono Sion is an electric vehicle designed around sustainability, simplicity, and transparency. The in-car HMI had to support core driving information, infotainment, and vehicle controls within an embedded system, under tight constraints related to hardware performance, response times, and safety regulations. The challenge wasn’t to design a visually appealing interface, but to establish a reliable and scalable HMI language that could be implemented consistently and evolve with the product.

The real problem

The interface had to make a complex system understandable without exposing it. Solar charging, bidirectional energy flows, and sharing services coexisted within a single ecosystem, but for the driver everything needed to feel immediate, with no loss of context and a constantly clear system state.

My Role

I worked as a Senior UI Designer, leading the visual direction of the HMI and guiding the UI team in building a shared visual language for Sono Sion.

I collaborated closely with UX and engineering, contributing to information architecture and interaction design, translating system complexity into clear and consistent behaviors.

I was responsible for defining and maintaining coherence across typography, color, iconography, components, and motion principles, turning product values into concrete, scalable design decisions aligned with embedded system constraints.

Context

Sono Sion is an electric vehicle designed around sustainability, simplicity, and transparency. The in-car HMI had to support core driving information, infotainment, and vehicle controls within an embedded system, under tight constraints related to hardware performance, response times, and safety regulations. The challenge wasn’t to design a visually appealing interface, but to establish a reliable and scalable HMI language that could be implemented consistently and evolve with the product.

The real problem

The interface had to make a complex system understandable without exposing it. Solar charging, bidirectional energy flows, and sharing services coexisted within a single ecosystem, but for the driver everything needed to feel immediate, with no loss of context and a constantly clear system state.

My Role

I worked as a Senior UI Designer, leading the visual direction of the HMI and guiding the UI team in building a shared visual language for Sono Sion.

I collaborated closely with UX and engineering, contributing to information architecture and interaction design, translating system complexity into clear and consistent behaviors.

I was responsible for defining and maintaining coherence across typography, color, iconography, components, and motion principles, turning product values into concrete, scalable design decisions aligned with embedded system constraints.

Context

Sono Sion is an electric vehicle designed around sustainability, simplicity, and transparency. The in-car HMI had to support core driving information, infotainment, and vehicle controls within an embedded system, under tight constraints related to hardware performance, response times, and safety regulations. The challenge wasn’t to design a visually appealing interface, but to establish a reliable and scalable HMI language that could be implemented consistently and evolve with the product.

The real problem

The interface had to make a complex system understandable without exposing it. Solar charging, bidirectional energy flows, and sharing services coexisted within a single ecosystem, but for the driver everything needed to feel immediate, with no loss of context and a constantly clear system state.

My Role

I worked as a Senior UI Designer, leading the visual direction of the HMI and guiding the UI team in building a shared visual language for Sono Sion.

I collaborated closely with UX and engineering, contributing to information architecture and interaction design, translating system complexity into clear and consistent behaviors.

I was responsible for defining and maintaining coherence across typography, color, iconography, components, and motion principles, turning product values into concrete, scalable design decisions aligned with embedded system constraints.

The process

The work started from constraints, not screens. Displays, performance limits, and regulatory requirements defined the design space. On top of that, I shaped the system’s state architecture and led workshops with UX and engineering to turn implicit assumptions into shared rules.

These rules became the foundation of the design system, translated into components, tokens, and motion principles.

Creative direction

I led the definition of the visual metaphor, building a language that made system states immediately perceivable. The goal was not to decorate the interface, but to express behavior, ensuring consistency across energy flows, interactions, and feedback.

Creative direction

I led the definition of the visual metaphor, building a language that made system states immediately perceivable. The goal was not to decorate the interface, but to express behavior, ensuring consistency across energy flows, interactions, and feedback.

Creative direction

I led the definition of the visual metaphor, building a language that made system states immediately perceivable. The goal was not to decorate the interface, but to express behavior, ensuring consistency across energy flows, interactions, and feedback.

Design System

I developed a UI pattern library that aligns with the design direction by following a cohesive concept, ensuring that every component adheres to the visual style, functionality, and user experience goals outlined in the project vision.

Design System

I developed a UI pattern library that aligns with the design direction by following a cohesive concept, ensuring that every component adheres to the visual style, functionality, and user experience goals outlined in the project vision.

Design System

I developed a UI pattern library that aligns with the design direction by following a cohesive concept, ensuring that every component adheres to the visual style, functionality, and user experience goals outlined in the project vision.

Icon Design

I developed a complete icon set to ensure visual consistency and usability across the entire interface. Each icon was meticulously crafted using a custom perfect grid system, maintaining harmony, balance, and scalability at any size. To support seamless integration, I also created a comprehensive icon style guide documentation, detailing design principles, sizing rules, stroke weights, and usage guidelines to establish a cohesive and recognizable visual language across all platforms.

Icon Design

I developed a complete icon set to ensure visual consistency and usability across the entire interface. Each icon was meticulously crafted using a custom perfect grid system, maintaining harmony, balance, and scalability at any size. To support seamless integration, I also created a comprehensive icon style guide documentation, detailing design principles, sizing rules, stroke weights, and usage guidelines to establish a cohesive and recognizable visual language across all platforms.

Icon Design

I developed a complete icon set to ensure visual consistency and usability across the entire interface. Each icon was meticulously crafted using a custom perfect grid system, maintaining harmony, balance, and scalability at any size. To support seamless integration, I also created a comprehensive icon style guide documentation, detailing design principles, sizing rules, stroke weights, and usage guidelines to establish a cohesive and recognizable visual language across all platforms.

What changed

The resulting interface provided a clear and consistent foundation for the in-vehicle system, reducing ambiguity and supporting technical implementation. Teams worked with a shared interface language, leading to more stable decisions and fewer renegotiations during development. The system didn’t become simpler, but it became reliable.

Reflection

In automotive design, UI is not a visual layer. It is part of the system. When decisions are clear and consistent, the interface fades into the background and allows drivers to focus on what matters.

E.

Currently available for product design roles
and system-driven projects on complex digital products.
If this way of thinking resonates, lets discuss a product.

© Edoardo Sportelli - 2026. P. IVA 02180180438. Living in Italy, in Fiastra, nestled in the Sibillini Mountains. Like Tuscany, but better. Policy Privacy and Data Protection. No reuse or redistribution without permission.

E.

Currently available for product design roles
and system-driven projects on complex digital products.
If this way of thinking resonates, lets discuss a product.

© Edoardo Sportelli - 2026. P. IVA 02180180438. Living in Italy, in Fiastra, nestled in the Sibillini Mountains. Like Tuscany, but better. Policy Privacy and Data Protection. No reuse or redistribution without permission.

Currently available for product design roles
and system-driven projects on complex digital products.
If this way of thinking resonates, let’s discuss a product.

© Edoardo Sportelli - 2026. P IVA 02180180438.
Living in Italy, in Fiastra, nestled in the Sibillini Mountains. Like Tuscany, but better.

Policy Privacy and Data Protection.

No reuse or redistribution without permission.

E.