Bringing Novo
into the car

We wanted to make the car a companion device for the Novo mobile app. With established OEM partnerships and new ones in development, Telenav had an opportunity to extend Novo into the vehicle.

We already had an in-car product, Scout Launcher, developed by another team. Its design system became our starting point. Before applying Novo’s identity, we needed to make that system more consistent and reusable across products and display sizes.

I led the standardization effort with two other visual designers and owned the responsive work.

Our team reviewed the existing system, identified common patterns, and turned them into shared rules. My responsive work included mapping display configurations and defining how layouts would adapt across different sizes and proportions.

We then applied that foundation to a Novo-branded solution pitched to Stellantis.

The original system had accumulated hundreds of colors and many variations in icon sizes, buttons, spacing, and effects. That made it difficult to establish a consistent foundation for additional products.

We began by normalizing the designs to a 160 dpi baseline. This gave us a common reference for comparing dimensions across displays.

From there, we reviewed margins, padding, shadows, and component sizing to identify patterns that could be shared. We consolidated those patterns into rules that could support different products while keeping their underlying structure consistent.

The foundation needed to accommodate more than twelve in-car display configurations, with different proportions and usable content areas.

I mapped those configurations and defined four main layout tiers. The rules described how navigation, content density, and supporting information would change with the available space.

For example, a compact Driver Board showed four safety-stat cards. Larger layouts could accommodate five, while the largest included a persistent detail panel. Ultra-wide displays required a different arrangement because their additional width came with limited height.

Novo’s visual style was brighter and more minimal than Scout Launcher’s, and the app had substantially less functionality.

We removed components and features that Novo didn’t need, applied its visual identity, and toned down its expression for the driving environment. The result was a simpler application of the shared foundation, with the core sizing, spacing, and responsive rules retained.

This allowed us to adapt the experience to Novo without carrying over all the complexity of the original product.

My initial responsive approach was highly flexible, but it pushed against Figma’s capabilities at the time. The file became too heavy, and the development team found it difficult to use.

We invested considerable effort in documenting and discussing responsive behavior. However, those rules were not applied in implementation until shortly before the project was discontinued.