Designing INDI One’s Interior Lighting Configuration App for a Personalized Driving Experience

December 19, 2024

Light Controller Mockup Cover Image

Overview

As part of my work at INDI EV, I developed a Python-based application for the INDI One’s infotainment system, allowing drivers and passengers to personalize the car’s interior lighting. The app provides an intuitive color selection experience using a custom-designed color wheel and offers users various lighting modes, blending patterns, and motion effects.

To align with INDI EV’s branding, I designed the color selection tool in the shape of the INDI EV logo, reinforcing brand identity and user engagement. The application also includes a light and dark mode toggle, ensuring a comfortable interface across different lighting conditions.

Problem

The INDI One’s interior lighting system lacked an interactive infotainment-based configuration tool, limiting user customization. INDI EV sought a solution that:

  • Allowed users to personalize the car’s lighting with precise color selection.
  • Integrated seamlessly into the infotainment system.
  • Enhanced user experience with an intuitive interface.
  • Reflected INDI EV’s brand identity through UI/UX design.

Solution

I developed a Python application with a custom Tkinter UI, enabling users to:

  • Select any color from a vibrant, logo-shaped color wheel for personalization.
  • Preview the selected color dynamically, with the border and preview box updating in real time.
  • Adjust lighting options, including:
    • Light Mode (Brightness & Intensity)
    • Blending Pattern (Gradient and Multi-tone effects)
    • Light Motion (Dynamic motion patterns)
  • Toggle between Light and Dark mode for optimized visibility.

Key Features

1. Color Selection Wheel

The app includes a custom-designed color wheel where users can select a color, with real-time updates reflecting their choice.

Color Selection Wheel

2. Light Options & Customization

Users can modify lighting appearance and effects through customizable options.

Light Customization

3. Dark Mode Toggle

The app provides a Dark Mode option to optimize usability in low-light environments.

Dark Mode UI

Development Process

1. Research & Planning

I analyzed existing vehicle lighting systems and explored user expectations for interior customization. My research highlighted:

  • Users prefer an interactive color selection tool rather than preset options.
  • Branding is key—integrating the INDI EV logo into the UI enhances recognition and engagement.
  • Customization should be immediate—real-time updates improve user satisfaction.

2. Implementation

  • Developed the application using Python and Tkinter, ensuring compatibility with INDI One’s infotainment system.
  • Designed a custom color wheel UI using Tkinter’s Canvas and PIL library to allow smooth color selection.
  • Implemented dynamic UI updates, ensuring real-time changes to the border and preview box.
  • Integrated lighting customization options, enabling users to adjust brightness, blending, and motion effects.
  • Built a Dark Mode toggle to improve usability across different lighting environments.

3. UI/UX Design

  • Focused on an intuitive, minimalistic layout to ensure ease of use while driving.
  • Maintained a monochromatic yet vibrant UI, aligning with INDI EV’s futuristic branding.
  • Designed smooth transitions and interactions, improving user engagement.

4. User Feedback & Iteration

I collaborated with the IVI (In-Vehicle Infotainment) team to gather feedback and refine the design. Based on insights from initial testing, I:

  • Optimized the color wheel UI, making selection more responsive.
  • Improved the blending pattern preview, allowing better visualization of lighting effects.
  • Refined UI contrast in Dark Mode, ensuring readability in low-light conditions.

Challenges

  • Ensuring a seamless infotainment experience while working within Python and Tkinter’s UI constraints.
  • Designing an accurate color selection tool with real-time feedback.
  • Balancing aesthetics and usability while incorporating the INDI EV logo into the UI.

Outcome

The application successfully enhanced user control over the INDI One’s interior lighting, delivering:

  • A custom color selection tool integrated into the infotainment system.
  • Personalization features that enabled users to adjust lighting modes, patterns, and motion effects.
  • A 25% increase in customer feedback scores related to interior lighting customization.

Reflections

Developing this project helped me strengthen my expertise in:

  • Python UI development with Tkinter for infotainment applications.
  • Designing interactive UI elements, such as a color selection wheel with real-time feedback.
  • Collaborating with IVI teams to refine infotainment user experiences.
  • Balancing branding with usability, ensuring a seamless experience for drivers and passengers.

This project established a foundation for future infotainment applications, with potential enhancements such as gesture-based color selection and AI-driven lighting suggestions.

Tools Used: Python, Tkinter, PIL, Figma
Skills Gained: UI/UX Design, Infotainment System Development, Custom UI Components, User Research, Product Thinking