Rear Seat Entertainment app
BYOD
Mercedes-Benz user experience (MBUX)
About the project
-
BYOD (bring your own device) is a replacement iOS app for a paid tablet device and part of Mercedes Me app family. App acts as a remote control for rear seat infotainment features.
-
User Profiles powered by AI Engine equals tailored & personalised experience
-
App with relevant set of features with customisation.
-
My responsibility was to lead the Design of the project with consistent UX deliverables in planned sprints.
* Confidential information is omitted and all the features and information presented here is in conformance with the NDA
Why BYOD?
-
Integrated experience through 'Connected Cars' paradigm at Mercedes-Benz.
-
Adding luxury and personalisation.
-
Crafting a Reflective model of design.
-
To match Head unit software NTG-7.
-
Tablet had complex screen navigation and low discoverability with usability problems.
-
App for Rear Seat infotainment features would be accessible to everyone with iOS device rather than having a single device.
-
Apps give more flexibility and control and software update the for new features is easier.
Business problem
-
Premium section is layered with users belonging to different parts of a social pyramid (A-Class, C-Class, E-Class, S-Class, G-Class, Maybach).
-
To understand the ecosystem of rear seat functions, an iOS app with different and relevant set of features for all car classes A, C, E, S etc.
-
Personalisation in connected car paradigm.
-
Align with driver distraction guide lines.
Design Team
-
India is Satellite R&D center and largest after Germany. I closely worked with Product Owners and other R&D centres.
-
In house Design Team, Development team and Testing team. Research teams & UT teams from different centres.
-
Highly collaborative with defined roles and with high synergy.
-
Translate vision to a product for different car lines for different markets.
-
We also make sure that our solutions conform to Style guides and Design System of MBUX
My role
PRODUCT DESIGNER
Deliverables & Activities
-
Collaborate for User interviews and research
-
User insights analysis & synthesis
-
Interaction Design
-
Personas & Scenarios and Customer Journeys
-
Task flows & Information Architecture
-
Wireframes & User Flows
-
Interactive prototypes
-
Visual designs
-
Enhancing Style Guide & Iconography
-
Design for delivery in Sprints
Product Vision + Business Needs
Design thinking iterations & collaboration.
App for China
App for Europe
The Design Process
We as a core design team of Mercedes-Benz follow Design Thinking dedicatedly to craft usable, aesthetic and luxurious experiences. From discovery to release, I relied on these iterations and activities to solve problems and craft experiences for various scenarios for rear seat passengers.
Empathise
Define
Ideate
Test
Prototype
-
Create personas of main market segments
-
Craft customer journeys
-
Hi-Fi Wireframes
-
Interactive Prototypes
-
Visual Designs
-
User Flows
-
Travel and collaborate with R&D centres for user research
-
Collect and understand user insights.
-
Research and understand the car infotainment ecosystem
-
Brainstorming sessions with global teams and stakeholders
-
Task Analysis & Flows
-
Low-Fi User Flows on whiteboard
-
Create & run tests.
-
Collect & Understand usability test results
-
Implement usability improvements.
-
A/B Testing
Learning about the users
Who are the users?
Rear seat passengers
What I did:
-
Collaborated different R&D centres for users interviews and insights.
-
Brainstormed with Product Owner to understand the consumers.
-
Researched and understood the infotainment system and related dynamics of multiple displays on rear seats.
Empathise
Asking a lot of 'why's?
I had several sessions with the Product Owner and stakeholders to understand the ecosystem in the real world context. This helped me to align with the vision of the product. Afterwards, I researched and researched the infotainment system and related dynamics of multiple displays on the rear seats. Subsequently, I conducted 5 interviews, 45 min each which users who were rear seat passengers from A Class, C-Class and S-Class. Below are some of my discussion points and notes
Pain points
What users said during interviews
“I have to customise the settings every time I am on the back seat”
“Sometimes I want to read a book or just relax”
“Sometimes I don’t want to set it up, it’s too much work”
“I wish it would be a bit easier to customise my RSE environment settings”
“My playlist is gone, light settings are different. "
My notes
1. Users had to do work to find and customise frequently used rear seat functions, too many clicks.
4. Customisation for RSE is not easy, too much work.
2. Lack of a one place for family members, to control and manage comfort settings.
5. Users had to change heat and seat settings every time they took a ride.
3. Users who don’t use the tablet much, found it hard to learn and navigate to the features, for example rear seat audio controls or themes.
Insights
User Research, Interviews
Affinity cluster, Empathy maps
Insights to inform design process
-
Its not easy to navigate in the tablet and it did not fit the main tasks of users.
-
The tablet was overcrowded with features and added cognitive and motor load.
-
Low discoverability and high learnability.
-
There is a strong need of personalisation for RSE infotainment for frequently accessed features.
User Personas
Backed up by user research and interview findings, I mapped user personas.
Define
User journeys
Deductively, from user research I recognised patterns in user needs and wants. Helped me narrow down the most important and frequently used features at rear seat for different car lines. I crafted user journeys based on the research and insights. One example of the user journey below:
A weekend drive with family to the parents home is one of the relevant journeys to understand the context and to derive UX opportunities and touch-points.
Define
A family drive on weekends to meet the parents.
Kids want ice cream, stops for ice cream.
Search for an alternate route.
Arrive at parents home.
Brainstorming sessions
Ideate
I conducted brainstorming sessions to understand the use -case cluster and in-car and outside car experience to inform the design iterations, to identify the right problems and to come up with innovative ideas for first release and to get inputs from stakeholders.
Challenges:
-
Define the scope of MVP for different car lines for China and Europe and improve UX over legacy version.
-
How to provide luxury and personalisation and tap into the right features for our users.
-
How to create an integrated experience with the connected car and relevant user journeys and the given tech constraints.
What would be the areas to target for MVP?
Idea generation
Guiding lights
-
What if users don’t buy the tablet?
-
What if the tablet becomes obsolete?
-
Make relevant features discoverable and decrease learnability.
-
Easy navigation and low cognitive load.
-
Solve existing usability problems and improve UX over legacy version.
-
Mental modes: Match the experience and luxury of car.
Task flows and Information Architecture
Ideate
By now, I had the clear idea of main features for MVP, which were derived from research insights to brainstorming sessions. Hence, I started with the task analysis with user goals in mind and created optimal task flows for several user goals. I also collaborated with the Design team to get it validated.
Afterwards, I created scalable Information Architecture(confidential) for the MVP and conducted the sessions with development team and other stakeholders to get the validation and buy-in and also to understand the constraints. This took couple of iterations before I can get to the whiteboard and start drawing.
MVP Modules: Home, Ambient lighting, Audio, Climate, Media, Tuner
Adaptive fond lights
Climate controls
Design
Prototype: Connectiong the dots
I like to get to the whiteboard or good old paper and pen before creating wireframes in the tool. I iterated sketches of wireframes couple of times.
Home
Remote control and lights
Onbording
Design
My approach
-
Broke down comfort mode into climate and lights.
-
Discoverable comfort modes.
-
New light themes.
-
Substantially lesser taps to access to frequent features as compared to existing MBUX system.
-
Tab bar modules based on user needs.
-
Use of realistic spatial images intuitive interactions, ex. light grids
One tap activation of Comfort modes
Broken down and structured menu items based on frequently used features
Tab menu based on user needs
1. Home
One tap activation of new light themes based on user moods
New, adaptive light modes, combine hardware capabilities, customisable and cater to user needs like relaxing etc.
Easy access to rear left and right seat settings
-
Reduced number of clicks
-
Better discoverability
Use of realistic light grid
-
low learnability
-
low cognitive load
Customisable light spots
‘Save on hard key’ - one tap access to user settings, no more frequent customisation needed.
2. Adaptive fond lights
3.Two-zone light mode
One tap activation of sound profiles
New, adaptive light modes, combine hardware capabilities, customisable and cater to user needs like relaxing etc.
4. Audio Controls
Use of realistic light grid
-
low learnability
-
low cognitive load
Lesser taps to customise sound for high end sound systems like Burmester
5. Audio Settings
Realistic controls derived from spatial environment. (Match the experience and luxury of car.)
6. 4D Sound
7. Climate
Mapped users Primary and Secondary tasks
Use of car images - match the UX of car
Easy access to main climate controls.
8. Climate -more menu
9. Remote Control
User can control and manage RSE displays while relaxing at seat. Reduced physical movement and work.
10. Display selection
Summary
-
Features and modules based on user needs.
-
Reduced number of taps.
-
Better discoverability and low learnability.
-
Intuitive interactions mapped to the real car experiences
-
Screen designs based on primary and secondary task mapping.
-
Scalable designs, more featured to be added in further releases.
User Flows & Prototypes
Prototype
I created module-wise user flows, happy flows and error scenario flows along with the interactive protoypes. At this stage, I use these to:
-
Communicate designs to the team.
-
Validate designs before they go into work.
-
Understand and identify constraints and dependencies.
Connectivity flow
Visual Designs
Visual personality:
I had already created user flows and wireframes for different modules of the app. Now it was time to shape visuals. These visuals are based on Mercedes-Benz(MBUX) design system. We had a legacy style guide and along with another designer I enhanced a lot of elements. I contributed in creating apps color palette, gradients, notifications, buttons, typography, background themes and iconography. Below is the style guide:
Home
Home - dashboard
Positive feedback
Negative feedback
Climate
Climate control left
Climate control right
Climate control more
Row selection
Audio
Audio controls
Equaliser
Balance and fader
4D Sound
Loudness
Sound profile active
Lights
Light controls
Two-Zone light
Interior lights
Media & Tuner
Media
Tuner
Remote control
Remote control
Display selection
Design for delivery:
After the design critique session with the design team, this is the time where I deliver Visual Designs to the team along with icons, images and other assets and I conduct multiple sessions with the team to ensure they have the clear understanding of all the aspects of design in work, from user interfaces to interactions, micro interactions etc.
Of course, in each development sprint I supported ad-hoc requests, discussions and design query sessions with the team.
Accessibility testing
I made sure to do the WCAG AA & WCAG AAA testing before releasing the designs to the other teams. These designs like other digital products, have to go through further testing for legal requirements and accessibility by respective teams.
Guidelines I follow, based on POUR(Perceivable, Operable, Understandable, Robust):
Test
Usability tests & design improvements
We released the MVP for internal beta users first and along with product owner and testing teams, I conducted and collaborated for usability tests and design improvements. <tools>.
These helped to discover problems in the working design and come up with alternative design solutions. I also conducted A/B tests afterwards to collect data and usage patterns to drive design iterations, decisions and solutions.
Once I had concrete design solutions I use to release it to the team for as enhancements in further sprints. Example below:
Low discoverability and extra clicks (motor load) for frequently accessed radio station list like , favourites, popular.
Alternative design fixes: Discoverable, above the fold, personalised list of frequently accessed stations by user on main screen of tuner, with an entry point to all the options.
Design-1
Design-2
Combined with the data analytics, consequentially, these tests also informed me about the usage patterns, user behaviour, user needs and wants.
I also, used this data to drive new ideas, future roadmap and further improvements in the app<Scenic Route, Send to car, In car office>.
Usability tests
Data analytics
-
New feature ideas
-
Improvements
Impact
-
3% increase in revenue in OTA (Over The Air) package updates.
-
App became a part of Mercedes Me app family adhering to the philosophy of selective monetisation.
-
Positive feedback from the users.
-
Successful MVP release for Europe and China and appreciation in department Town-hall event.
-
iOS App with scalable plug and play design which is flexible to cater to global markets for third party vendors.(ex. Here Maps for Europe and Baidu Maps for China)
-
Our team grabbed an important project for in-car UX for upcoming software for Mercedes-Benz head units.
Learnings
-
How to collaborate effectively with globally distributed teams.
-
Seek validation at every step, with stakeholders or users.
-
Documentation plays an important role, how and why both.
-
Luxury can also be a need.
What lies next?
From the resultant suggestions which I collected from brainstorming sessions and discussions with the team, I along with the team, came up with the ideas to evolve the product further, some of the ideas were:
Scenic Route:
Users love long drives and natural landscapes, suggest an alternative route which has beautiful landscapes and enhance the drive experience.
Send to car:
Send a couple route to the car from the app, not only a single POI.
In-car office:
An integrated feature which gives users option to manage office work from Rear Seat display and iOS app.
Collaboration
Norbert Neuber, Product Owner,
Daimer AG
Rohit has crafted top-notch and aesthetic experiences in every feature of the app. His designs are high quality that work flawlessly. We have worked together on multiple projects and he is brilliant in his understanding of system as well as in communication with development teams.