Aaveg's Fun Fact
Loading…
Back to projects
HMIHMI
HMI · AUTOMOTIVE UX · CLUSTER

HMI

Designing the digital cluster and HMI for a TVS electric vehicle platform, with a focus on glanceability, motion-safe interactions, and bringing TVS brand language into a digital surface for the first time in the company's history.

Role
Deputy Manager, UX Design & Research
Company
TVS Motor Company
Timeline
Dec 2022 - Sep 2023
Focus
HMI, Automotive UX, Future Mobility, Brand Translation
01 · Context

Bringing TVS brand into a digital surface for the first time

TVS Motor Company had decades of equity in physical product design, with a recognisable design language across motorcycles and scooters that customers could identify at a glance. The digital surfaces inside an electric vehicle cluster were uncharted territory for the brand, and the absence of existing patterns to follow was both the opportunity and the risk of the project.

The cluster had to handle the obvious automotive requirements: speed, range, battery state of charge, regen state, ride mode, trip data, and a small set of telltale indicators for warnings and alerts. Every other EV cluster in the segment had to handle the same set, which meant the functional layer was a solved problem in the broader industry. What was not solved was how to make a TVS cluster feel unmistakably TVS, distinct from the generic Asian-OEM template that dominates this category and that several of our direct competitors had defaulted to.

The constraint that shaped every decision was glanceability. A rider has fractions of a second to absorb cluster information while in motion, which means our usual habits as digital designers (density, discoverability, progressive disclosure) work against us here. Information that requires more than a glance is information the rider cannot safely consume. This is a different design discipline from screen-only product design, and the project required unlearning some default instincts before producing anything useful.

02 · Research

Glance time, brand language, competitive teardowns

Research happened in three parallel tracks. Glance-time studies measured how long a rider's attention can leave the road for cluster information at different speeds, and informed the upper bound on how much information any single cluster screen could contain. The results were sobering, particularly at highway speeds where the safe glance budget is under a second.

Brand language interviews with the TVS design team mapped the physical-product design language onto principles that could translate to digital surfaces. TVS physical design has specific personalities (confident, considered, premium but not pretentious) that needed digital expressions, and the interviews surfaced the design choices in physical products that carried the brand most strongly. Some of those choices translated directly to digital, others did not, and some required reinterpretation that the brand team and I had to negotiate.

Competitive teardowns of clusters from peer OEMs (both Indian and international) produced a clear picture of the category visual default, which was useful primarily as a reference for what to not do. The dominant template was high-density, technical-looking clusters that prioritised information completeness over rider attention. We chose to go the other way: lower density, higher legibility, with a deliberate restraint that felt premium.

Glance budgets, brand mapping, competitive landscape

04 · Approach

Glanceability first, beauty second, brand third

I started from the information hierarchy the cluster needed to convey, then sorted them by the time a rider has to absorb each one. The categorisation produced three tiers.

Tier one (under one second of glance time): speed, battery percentage, and range. These are the primary information the cluster needs to deliver and they are needed continuously. Their visual treatment dominates the cluster and uses typography weight and contrast to be readable in fractions of a second under any lighting condition.

Tier two (one to two seconds): trip data, regen state, ride mode. These are needed periodically rather than continuously, and their visual treatment is intentionally subordinate to tier one. A rider can choose to look at them when conditions allow.

Tier three (anything longer): route guidance, settings, secondary information. These belong in the connected app, not the cluster. The cluster is not the right surface for any information that requires more than two seconds of attention to consume, and trying to fit such information into a cluster compromises the safety of the rider for marginal feature gain.

From that hierarchy I designed three cluster layouts for different ride contexts: city, highway, and performance. Each layout uses the same visual language and the same information tiers, but with different emphasis appropriate to the ride context. A highway layout makes range and speed prominent. A city layout makes navigation and battery state more available. A performance layout emphasises instantaneous power delivery and ride telemetry.

TVS brand expressed itself through typography, motion personality, and accent colour rather than through chrome or decoration. The cluster is restrained visually because the rider cannot afford decoration. The brand had to live in the choices of weight, spacing, and motion personality rather than in ornament.

Information hierarchy, motion studies, brand integration

06 · Key decisions

Three modes, motion as brand, hardware-aware design

Three ride modes sharing one visual language. I argued against a single cluster layout because real ride contexts vary too much for one layout to serve all of them well. A highway rider needs different information prominent than a city rider. Three layouts with shared bones gave us context-appropriate density without forcing riders to learn three different interfaces. The risk was complexity for the rider, but the shared visual language meant a rider who learned one layout could read the others immediately.

Motion as a brand element, not just a functional one. Most clusters use motion purely functionally: needles sweep, numbers update, alerts pulse. TVS motion needed to have a personality consistent with the rest of the brand. We developed a motion language with specific easing curves, timing, and choreography that distinguished TVS motion from the category default. This was prototyped on real hardware rather than in Figma, because motion personality is impossible to evaluate without seeing it at full speed on the actual display.

Hardware-aware design from day one. The cluster runs on specific display hardware with specific brightness, colour gamut, and viewing angle constraints. I worked with the hardware engineering team from the first sketch so that the design assumptions matched what the display could actually render. This avoided the standard automotive failure mode where a screen design looks great on a designer's calibrated monitor and unreadable in direct sunlight on the actual display.

Brand expression through restraint. The hardest call was deliberately not decorating the cluster. Every digital surface tends toward visual richness because designers can. A glance-time cluster needs the opposite discipline. The TVS brand had to be expressed through what the cluster did not do, which required convincing stakeholders that restraint was a brand choice and not an absence of design effort.

Three ride modes sharing one visual language

Three ride modes sharing one visual language

Typography, motion, telltales, alerts

09 · Outcomes

Design language approved, platform-ready

The cluster design language was approved for the EV platform and handed off to the development team for production engineering. The information hierarchy work also informed the connected app side of the experience, with consistent treatment of speed, range, and battery state across both surfaces so a rider's mental model travels between cluster and app without re-learning.

The most lasting outcome was the brand language documentation itself. The handover doc translated the cluster design choices back into principles that future TVS digital surfaces can use as a starting point, regardless of which screen or product they sit on. Other digital surfaces being designed inside TVS after the project ended have referenced this documentation, which makes the project's output reusable infrastructure rather than a one-off cluster design.

10 · Reflection

Hardware constraints make better design

Designing for an automotive cluster forces a discipline that screen-based product design rarely demands. Brightness conditions, glance time, motion safety, and physical button placement all push the design toward clarity. I came back from this project with sharper instincts for hierarchy and restraint that have made me a better designer on much simpler screen-only products.

I would seek out more hardware-adjacent work earlier in my career, because the constraints clarify the craft. There is something about designing for a display you cannot fully control, in an environment you cannot calibrate, for users you cannot afford to confuse, that produces design judgement nothing else does.

HMICluster DesignAutomotive UXEVMotion SafetyBrand Translation