XUV 500

Car Infotainment System & Key bank Design For a Global SUV Brand

Designing for Indian's largest automobile manufacturer - Mahindra & Mahindra.

Maindra XUV 500 Photo

The Context

When India's largest automobile manufacturer Mahindra & Mahindra wanted to enter the sports utility vehicle (SUV) market (dominated by foreign players) by releasing their maiden indigenously designed and manufactured SUV,every thing was re-thought; from the color, texture, interiors, etc, except the vital infotainment system.
‍
My design company Maya Studios, was tasked to provide visual design for an off the shelf generic infotainment system to match the aesthetics and the quality of the new SUV. As principal UX designer, I studied the existing system and proposed a complete system design from scratch to suit not just the aesthetics of the proposed SUV but also to take advantage of new technologies available at hand.
‍
Lo and behold, the proposal resonated with Mahindra management and Maya Studios was commissioned to design the entire system along with associated components from scratch.

XUV 500 Infotainment System Overview
Project Name
XUV 500 - Car Infotainment System & Key Bank Design
Industry & Project Type
Automobile UX & Industrial Design
Target Audience
Urban professional/business person who's a power seeker and loves to flaunts status
Research
Primary Field Research
Team Size & Project Duration
2 Designers, 1 Visual Designer
Duration 8 months
My Role
Principal UX Designer & Researcher

The Brief

Mahindra & Mahindra, the client from hereon, required a car infotainment system for a yet to be launched SUV car. Being the first and only car to be completely designed and manufactured in India (at the time), the company took immense pride in its release and wanted every aspect ofthe car to reflect a completely unique Indian aesthetics. The infotainment system being an integrated solution for all the information and media related features of the vehicle had to reflect the same.  

Key Points
  • The system should reflect the character of the vehicle in terms of aesthetics, communcation and interaction design
  • Should be able to provide simple and easy to remember interaction model
  • System should prioritize the needs of the primary user i.e. the driver.
  • The system use a clear and direct visual language.
  • The system should comply with European car safety norms

Major hardware capabilities, design and ergonomics had already been finalized. We had to focus on the interaction modalities, research and UX/UI. This included remapping the hardware keys if required.

Screen specifications
  • 5.8” TFT touch screen without multi-touch
  • 400x200 pixels 18 bit color (262k), RGB666
  • Graphics processor ARM11 Core on Windows CE

‍

Dashboard key bank Specs
  • 17 tactile push buttons
  • Circular rotatory scroll with push button in the centre

‍

The steering wheel controls
  • 6 tactile buttons on left hand side of the steering wheel, 4 buttons in pairs.
  • 6 tactile buttons on right hand side of the steering wheel, dedicated for navigation system
‍
Remote control
  • The remote would consist of standard DVD and media controls
  • Pre-decided buttons with no remapping possible

The Challenges

These were the challenges we started out with:

  • No integration with the GPS/Navigation module resulting in two different navigation and visual language models
  • Low capability TFT restricted visual design to low resolution graphics and solid colors
  • Only one pop up can be allowed at one time
  • No multi-touch or drag and drop capabilities
  • Very low screen resolution i.e. 400x200 pixels
  • Animation limited to icons and nothing else
  • Limited font/typographic properties support

Scope of Work

The bulk of the work included

  • User Research
  • Heuristic Evaluation
  • System Analysis & Documentation
  • Interaction Design & Information Architecture
  • Branding & Visual Design
  • Key bank and remote control button mapping and design
  • Startup / Shutdown animations
  • Multi theme UI asset production
  • Product Testing

Business Goals

The client was very clear that the project needed

  • Design for eventual release in Europe and Africa
  • Work with already licences software and hardware configuration and make it work
  • Making it aspirational (as of 2012)
  • Break standards and expectations (not looking for techno-slick western aesthetics

Design Process

two people drawing on whiteboardby Kaleidico

In this project we followed the classic design process that goes like this:

  1. Discover - Learn about the exisiting system, learn about the domain, generate data and insights (research), do comparisons, market research etc.
  2. Analyze - Understand the data, churn ideas, collect journies and flows
  3. Design - Generate ideas, give them concrete shape, product artifacts
  4. Evaluate - Evaluate designs with stakeholders, fine tune designs
  5. Repeat

‍

The Team
1 x Principal UX designer (that's me)
1 x Senior Visual designer
1 x Design intern

Key Activities

Some of the major activities undertaken during the project can be divided into the following major areas:

Governance
  • Conduct periodic progress review with the the client and stakeholders
  • Validate design ideas with hardware vendors for feasiablitiy
  • Present work to senior management

‍

Discovery
  • Desk Research - competitor analysis, parallel product study, gaps and opportunities analysis, navigational analysis, understanding domain, in-car digital system best practices
  • Primary Market Research - types of infotainment systems available, classes of infotainment system, feature sets, off the shelf alternates, best in class systems, local preferences, etc
  • Synchronizing with hardware vendor and developer company
  • Old system understanding and evaluation
  • Existing pain points documentation
  • Documenting the existing system

‍

Analysis
  • Consolidating platform objectives
  • Analyzing gaps and opportunities
  • Mapping Key User Flows
  • Finalizing Features & Functionalities
  • Initial Information Architecture

‍

Design
  • Visual design & Color scheme selection
  • Process maps (macro level)
  • Low fidelity wire frames for key screens
  • Wire frame production
  • Hi-fidelity screen production
  • Micro-level screen audit(s)/reviews
  • External design review

Understanding the old system

Synchronising with stakeholders

After going through the existing documentation and other material, we made sure that we externalize all our learning and get it vetted by all the concerned stakeholders.

Research

The research was carried out research in several phases.  

  • User Persona
  • Market Research
  • Interaction Models
  • Secondary Research - Online
  • Theoretical Research
Understanding the target user(s) - Persona

Since the overall product, the car, had already being designed for a particular consumer segment, with a particular persona in mind, the same fitted for the infotainment system. The user per-
sona for the daily user of the car was hence referenced for the infotainment system as well.

Primary Market Research

Research directions:

  • Exploratory - gaining understanding
  • Which features sell
  • Who buys what
  • After sales response based on features/utilities

This stage was carried out in the local car accessories market. The researcher went as a user and consulted shopkeepers for choosing as ideal system for his car. The context presented to
shopkeepers was close to that required by the design brief.

We primarily used qualitative research method of focus group discussions (FGDs) and user interviews for most of the research phase.

Interaction Models Study

Visual Design Roots

Designed to capture power of seduction, majestic elegance, raw power & muscular agility; inspired by the agility of a cheetah.

Which this one line brief we went ahead and prepared the following presentation.

Which this one line brief we went ahead and prepared the following presentation.

Winning Entry - This slide below won us the project in our first attempt!

The above slide became the basis of the interface color scheme. Interesting things was, we had hit upon the actual car interior color scheme and got the project go ahead in just one step!

Design & Production

Major design principals:

  • Segregation of primary and secondary task
  • Information architecture that is based on easy perception model
  • Spatial consistency that will lead to comfortable affordance
  • Workflows that are relevant for regular users and intuitive for first time users
  • Avoiding accidental triggers as much as possible
  • Emphasis on designing a system that requires minimum visual attention
  • Enable users to navigate the system at a pace comfortable for their comprehension levels

‍

The Ideation Phase
From Ideations to Wireframes
In general, wireframe are articulation of a product's implicit and explicit facets visually on a macro level... and visual design mockup is marrying wireframes with branding, communication, typography etc...

Low fidelity wireframes were first designed to create macro level consensus between stakeholders. Then we moved to final wireframes development which became the precursor to visual mocukups.

‍

Conceptual Wireframes

Action Charts + Wireframes

We developed a common platform for sharing workflows and wireframes. These charts, referred as action charts, were a medium of sharing interaction workflow holistically as
well as comprehensively. The elements of these charts are explained below.

Action Charts: Wireframe-Action-Result

An action chart is an iterative chart with three columns repeating. The first column denotes Wireframe state, next the action state and third one depicting the result state. If any action’s result were to be on the same screen than its row ended with the result state. If an action’s result were to be a new wireframe than the chart showed the interaction model of the new wireframe in the same wireframe-action-result sequence as before.

The action charts included the following interaction modalities:

  • Touchscreen
  • Dashboard (switch bank) buttons
  • Steering wheel buttons

The action charts were made for all the functionalities: Home, CD, USB, DVD, Ipod, Radio, Phone, Bluetooth, Vehicle Info. GPS was not included for reasons mentioned before.

Design Documentation

Outcome

This was certianly a major learning experience for me and my team. We achieved a lot during the course of this project. Some of the wins were on a personal level such as:

  • Managed to convert a simple visual design project into a full scale platform design project.
  • Trained design intern while giving him hands on client management exposure.
  • Helped the client setup their first in-house UX design studio.

However, the biggest results are:

  • During user testing and expert group discussions, the interface was universally liked and no major usability issue came to light
  • The UX has been so succesful that as of 2020, the system is still being used in its base form (despite some theming changes)

Thank you for checking out my work!

LinkedinBlogInstagramFlickr
Up arrow.