University Course: Design of Interactive Products

University Course: Design of Interactive Products

Bachelor Graduation Internship

University Course: Design of Interactive Products

University Course: Design of Interactive Products

Designing an interactive key fob for Tesla

Designing an interactive key fob for Tesla

Designing an interactive key fob for Tesla

Designing an interactive key fob for Tesla

Designing an interactive key fob for Tesla

UX-Design & Product Development

UX-Design & Product Development

UX-Design & Product Development

tesla_car_x

Designing a key fob with
exclusive functionalities

Designing a key fob with
exclusive functionalities

Designing a key fob with
exclusive functionalities

This group project was part of a university course on the design of interactive products. The main assignment to design a key fob that featured 'more exclusive' functionalities, for a sedan-model car. These functions included, for example, control over autonomous parking features and climate control. It is conceivable that functions such as these are not present within the low-tier car segments. Therefore, we chose to design the key fob for a more exclusive brand to help us direct the design of the remote. Based on our personal preference, we selected Tesla as a fictional client.

This group project was part of a university course on the design of interactive products. The main assignment to design a key fob that featured 'more exclusive' functionalities, for a sedan-model car. These functions included, for example, control over autonomous parking features and climate control. It is conceivable that functions such as these are not present within the low-tier car segments. Therefore, we chose to design the key fob for a more exclusive brand to help us direct the design of the remote. Based on our personal preference, we selected Tesla as a fictional client.

This group project was part of a university course on the design of interactive products. The main assignment to design a key fob that featured 'more exclusive' functionalities, for a sedan-model car. These functions included, for example, control over autonomous parking features and climate control. It is conceivable that functions such as these are not present within the low-tier car segments. Therefore, we chose to design the key fob for a more exclusive brand to help us direct the design of the remote. Based on our personal preference, we selected Tesla as a fictional client.

This group project was part of a university course on the design of interactive products. The main assignment to design a key fob that featured 'more exclusive' functionalities, for a sedan-model car. These functions included, for example, control over autonomous parking features and climate control. It is conceivable that functions such as these are not present within the low-tier car segments. Therefore, we chose to design the key fob for a more exclusive brand to help us direct the design of the remote. Based on our personal preference, we selected Tesla as a fictional client.

This group project was part of a university course on the design of interactive products. The main assignment to design a key fob that featured 'more exclusive' functionalities, for a sedan-model car. These functions included, for example, control over autonomous parking features and climate control. It is conceivable that functions such as these are not present within the low-tier car segments. Therefore, we chose to design the key fob for a more exclusive brand to help us direct the design of the remote. Based on our personal preference, we selected Tesla as a fictional client.

Date: September - November (2016)
Role: Interface & Experience Design
Course: Designing Interactive Products

Date: September - November (2016)
Role: Interface & Experience Design
Course: Designing Interactive Products

Date: September - November (2016)
Role: Interface & Experience Design
Course: Designing Interactive Products

Date: September - November (2016)
Role: Interface & Experience Design
Course: Designing Interactive Products

Analysis

Analysis

Analysis

Analysis

At the beginning of the project, we carried out an exhaustive client analysis, that included, the brand evaluation, the customer segmentation, the design-language of their products and the automotive market itself. Based on this research, we set up our Program of Requirements, that later on in the project, we would use to evaluate and select suitable design-directions.

At the beginning of the project, we carried out an exhaustive client analysis, that included, the brand evaluation, the customer segmentation, the design-language of their products and the automotive market itself. Based on this research, we set up our Program of Requirements, that later on in the project, we would use to evaluate and select suitable design-directions.

At the beginning of the project, we carried out an exhaustive client analysis, that included, the brand evaluation, the customer segmentation, the design-language of their products and the automotive market itself. Based on this research, we set up our Program of Requirements, that later on in the project, we would use to evaluate and select suitable design-directions.

At the beginning of the project, we carried out an exhaustive client analysis, that included, the brand evaluation, the customer segmentation, the design-language of their products and the automotive market itself. Based on this research, we set up our Program of Requirements, that later on in the project, we would use to evaluate and select suitable design-directions.

At the beginning of the project, we carried out an exhaustive client analysis, that included, the brand evaluation, the customer segmentation, the design-language of their products and the automotive market itself. Based on this research, we set up our Program of Requirements, that later on in the project, we would use to evaluate and select suitable design-directions.

tesla-store

Branding

other keyfobs

The Market

Literature Review

current Tesla Keyfob

Design Language

user-study

Current Customers

Literature Review

Design | Interface

Design | Interface

Design | Interface

Design | Interface

One of the main design-related challenges was to fit all the functionalities in such a small device. Additionally, we wanted to ensure an intuitive and functional interaction, while still allowing for fast usage of the key fob. To create an overview, we started by iteratively mapping the required functions to suitable categories.

One of the main design-related challenges during this project was to fit so many functionalities in such a small device. Additionally, we wanted to ensure that the interactions with the key fob would feel as intuitive and functional as possible, while still allowing for fast interactions with the key fob. To create an overview, we started by iteratively mapping the required functions to suitable categories.

One of the main design-related challenges during this project was to fit so many functionalities in such a small device. Additionally, we wanted to ensure that the interactions with the key fob would feel as intuitive and functional as possible, while still allowing for fast interactions with the key fob. To create an overview, we started by iteratively mapping the required functions to suitable categories.

One of the main design-related challenges during this project was to fit so many functionalities in such a small device. Additionally, we wanted to ensure that the interactions with the key fob would feel as intuitive and functional as possible, while still allowing for fast interactions with the key fob. To create an overview, we started by iteratively mapping the required functions to suitable categories.

Keyfob Function categorisation

A mapping of the key fob functionalities

A mapping of the key fob functionalities

We considered various solutions, but in the end, we decided to incorporate a small display that would respond to the user's touch. The main benefit, of using a touchscreen compared to ''standard physical buttons" is that the displayed buttons can be changed dynamically. This significant benefit allowed us to experiment with various conceptual models to base the key fob controls on.

We considered various solutions, but in the end, we decided to incorporate a small display that would respond to the user's touch. The main benefit, of using a touchscreen compared to ''standard physical buttons" is that the displayed buttons can be changed dynamically. This significant benefit allowed us to experiment with various conceptual models to base the key fob controls on.

We considered various solutions, but in the end, we decided to incorporate a small display that would respond to the user's touch. The main benefit, of using a touchscreen compared to ''standard physical buttons" is that the displayed buttons can be changed dynamically. This significant benefit allowed us to experiment with various conceptual models to base the key fob controls on.

Given the number of functionalities, we needed to find a solution to fit all these controls into the key fob. We considered various solutions, but in the end, we decided to make use of a small display that would respond to users touch. Obviously, the main benefit of using a screen compared to ''classic physical buttons" is that these buttons can be changed dynamically. This major benefit allowed us to experiment with various conceptual models to base the key fob controls on.

Another rationale for incorporating a touchscreen was found in the interior of Tesla cars: the tremendous touch screens found next to the steering wheel controls most of the car's features. From climate control to battery and energy usage, etc. As this is the main characteristic of the Model S, it would be coherent to let it come back in the design of the key fob.

Another rationale for incorporating a touchscreen was found in the interior of Tesla cars: the tremendous touch screens found next to the steering wheel controls most of the car's features. From climate control to battery and energy usage, etc. As this is the main characteristic of the Model S, it would be coherent to let it come back in the design of the key fob.

Another rationale for incorporating a touchscreen was found in the interior of Tesla cars: the tremendous touch screens found next to the steering wheel controls most of the car's features. From climate control to battery and energy usage, etc. As this is the main characteristic of the Model S, it would be coherent to let it come back in the design of the key fob.

Another rationale for incorporating a touchscreen was found in the interior of Tesla cars: the tremendous touch screens found next to the steering wheel controls most of the car's features. From climate control to battery and energy usage, etc. As this is the main characteristic of the Model S, it would be coherent to let it come back in the design of the key fob.

the interior of a tesla car

The interior of a Tesla Model S

Tesla Model S - Interior

We decided to base the conceptual model of the key fob on a layered menu structure. Each layer within the menu would represent a category based on the categorical-mappings we had created earlier. By creating different layers, we aimed to develop an intuitive path for the user and to reduce the time spent to search and find a specific button.

We decided to base the conceptual model of the key fob on a layered menu structure. Each layer within the menu would represent a category based on the categorical-mappings we had created earlier. By creating different layers, we aimed to develop an intuitive path for the user and to reduce the time spent to search and find a specific button.

We decided to base the conceptual model of the key fob on a layered menu structure. Each layer within the menu would represent a category based on the categorical-mappings we had created earlier. By creating different layers, we aimed to develop an intuitive path for the user and to reduce the time spent to search and find a specific button.

We decided to base the conceptual model of the key fob on a layered menu structure. Each layer within the menu would represent a category based on the categorical-mappings we had created earlier. By creating different layers, we aimed to develop an intuitive path for the user and to reduce the time spent to search and find a specific button.

overview of function categories

Functions related to the various menu-layers

Functions related to the various menu-layers

During this phase of the project, we continuously switched between prototyping and evaluating designs, while gradually increasing their level of fidelity. Through conducting user tests continuously, we aimed to identify flaws in our design: "Will our users be able to understand our icons? Are the functions grouped together in the right way? Are the menus presented in the right order?". Additionally, drawing inspiration from Fitt's Law, we decided to place the button for menu-browsing in the center of the interface. Based on Fitt's Law, this should enable users to navigate through our menu faster. We were interested to find out if the layered menu, with a central button, translated the theory into practice. Therefore, this design was compared to an alternative design through A/B testing in which test-participants were given tasks based on how the key fob would typically be used in day-to-day scenario's.

During this phase of the project, we continuously switched between prototyping and evaluating designs, while gradually increasing their level of fidelity. Through conducting user tests continuously, we aimed to identify flaws in our design: "Will our users be able to understand our icons? Are the functions grouped together in the right way? Are the menus presented in the right order?". Additionally, drawing inspiration from Fitt's Law, we decided to place the button for menu-browsing in the center of the interface. Based on Fitt's Law, this should enable users to navigate through our menu faster. We were interested to find out if the layered menu, with a central button, translated the theory into practice. Therefore, this design was compared to an alternative design through A/B testing in which test-participants were given tasks based on how the key fob would typically be used in day-to-day scenario's.

During this phase of the project, we continuously switched between prototyping and evaluating designs, while gradually increasing their level of fidelity. Through conducting user tests continuously, we aimed to identify flaws in our design: "Will our users be able to understand our icons? Are the functions grouped together in the right way? Are the menus presented in the right order?". Additionally, drawing inspiration from Fitt's Law, we decided to place the button for menu-browsing in the center of the interface. Based on Fitt's Law, this should enable users to navigate through our menu faster. We were interested to find out if the layered menu, with a central button, translated the theory into practice. Therefore, this design was compared to an alternative design through A/B testing in which test-participants were given tasks based on how the key fob would typically be used in day-to-day scenario's.

During this phase of the project, we continuously switched between prototyping and evaluating designs, while gradually increasing their level of fidelity. Through conducting user tests continuously, we aimed to identify flaws in our design: "Will our users be able to understand our icons? Are the functions grouped together in the right way? Are the menus presented in the right order?". Additionally, drawing inspiration from Fitt's Law, we decided to place the button for menu-browsing in the center of the interface. Based on Fitt's Law, this should enable users to navigate through our menu faster. We were interested to find out if the layered menu, with a central button, translated the theory into practice. Therefore, this design was compared to an alternative design through A/B testing in which test-participants were given tasks based on how the key fob would typically be used in day-to-day scenario's.

paper prototype interface

Paper prototypes of the design

Paper prototypes of the design

user-test

Picture taken during user-testing with an interactive prototype

User testing with an interactive prototype

The user test confirmed the assumption: having a central button, to navigate through the menu-layers, increased the speed at which users is able to browse and find the needed functionality. Additionally, the previous tests made us aware of ambiguities concerning a few icons, which we then resolved before the A/B test.

Another improvement that we made was to map certain buttons to their real-world locations as a metaphor. One example would be the button to start the engine (located left on the key fob), which matches the placement of the driver's seat. These changes improved the learnability of the interface and test-participants quickly noticed these patterns. Finally, it was decided to change the order of the second and third layer based on the assumption that these functionalities would be used most frequently.

The user test confirmed the assumption: having a central button, to navigate through the menu-layers, increased the speed at which users is able to browse and find the needed functionality. Additionally, the previous tests made us aware of ambiguities concerning a few icons, which we then resolved before the A/B test.

Another improvement that we made was to map certain buttons to their real-world locations as a metaphor. One example would be the button to start the engine (located left on the key fob), which matches the placement of the driver's seat. These changes improved the learnability of the interface and test-participants quickly noticed these patterns. Finally, it was decided to change the order of the second and third layer based on the assumption that these functionalities would be used most frequently.

The user test confirmed the assumption: having a central button, to navigate through the menu-layers, increased the speed at which users is able to browse and find the needed functionality. Additionally, the previous tests made us aware of ambiguities concerning a few icons, which we then resolved before the A/B test.

Another improvement that we made was to map certain buttons to their real-world locations as a metaphor. One example would be the button to start the engine (located left on the key fob), which matches the placement of the driver's seat. These changes improved the learnability of the interface and test-participants quickly noticed these patterns. Finally, it was decided to change the order of the second and third layer based on the assumption that these functionalities would be used most frequently.

The user test confirmed the assumption: having a central button, to navigate through the menu-layers, increased the speed at which users is able to browse and find the needed functionality. Additionally, the previous tests made us aware of ambiguities concerning a few icons, which we then resolved before the A/B test.

Another improvement that we made was to map certain buttons to their real-world locations as a metaphor. One example would be the button to start the engine (located left on the key fob), which matches the placement of the driver's seat. These changes improved the learnability of the interface and test-participants quickly noticed these patterns. Finally, it was decided to change the order of the second and third layer based on the assumption that these functionalities would be used most frequently.

keyfob menus

The menu-overview after the evaluation of the user tests

The menu-overview after the evaluation of the user tests

Design | Hardware

Design | Hardware

Design | Hardware

Design | Hardware

To make the concept technically feasible, the current casing of the key fob had to be redesigned. The reason was the need for additional space to fit all the components. Initially, we started with explorative sketches, followed up by with crafting various shapes out of modeling foam. The primary goal here was to find an ergonomic and fitting design.

To make the concept technically feasible, the current casing of the key fob had to be redesigned. The reason was the need for additional space to fit all the components. Initially, we started with explorative sketches, followed up by with crafting various shapes out of modeling foam. The primary goal here was to find an ergonomic and fitting design.

To make the concept technically feasible, the current casing of the key fob had to be redesigned. The reason was the need for additional space to fit all the components. Initially, we started with explorative sketches, followed up by with crafting various shapes out of modeling foam. The primary goal here was to find an ergonomic and fitting design.

To make the concept technically feasible, the current casing of the key fob had to be redesigned. The reason was the need for additional space to fit all the components. Initially, we started with explorative sketches, followed up by with crafting various shapes out of modeling foam. The primary goal here was to find an ergonomic and fitting design.

keyfob_sketches

Initial Ideation Sketches

Explorative sketches

foam keyfobs models

Foam Shape Explorations

Foam "Prototypes"

In the end, the selected foam model had a similar design language as the current key fob used by Tesla. However, the dimensions have been altered so that it could fit all the necessary hardware components. Characterizing for the design is the approach to the contour of a car. 

In the end, the selected foam model had a similar design language as the current key fob used by Tesla. However, the dimensions have been altered so that it could fit all the necessary hardware components. Characterizing for the design is the approach to the contour of a car. 

In the end, the selected foam model had a similar design language as the current key fob used by Tesla. However, the dimensions have been altered so that it could fit all the necessary hardware components. Characterizing for the design is the approach to the contour of a car. 

In the end, the selected foam model had a similar design language as the current key fob used by Tesla. However, the dimensions have been altered so that it could fit all the necessary hardware components. Characterizing for the design is the approach to the contour of a car. 

selected foam model side

Selected foam model

Selected foam model

foam-model-under

Bottom-side

Bottom-side

keyfob sketch

Design | Material & Finish

Design | Material & Finish

Design | Material & Finish

Design | Material & Finish

The last step of the project was to design a fitting appearance for the key fob. We selected materials that would fit with the design language of Tesla while keeping ergonomics in mind. For example, a section of the side and back of the key fob are covered with a rubber-like plastic coating to improve the grip on the key fob while holding it. The rests of the rear casing is made from a high gloss black plastic. The front screen is made of glass, with machined buttons and logo of Tesla. The latter has been post-processed with a chrome coating inlay, as well as the chrome band around the whole product. The combination of chrome and gloss black suggest the luxurious appearance that fits the Tesla Model S. Once the user touches the key fob, the interface reveals itself by lighting up.

The last step of the project was to design a fitting appearance for the key fob. We selected materials that would fit with the design language of Tesla while keeping ergonomics in mind. For example, a section of the side and back of the key fob are covered with a rubber-like plastic coating to improve the grip on the key fob while holding it. The rests of the rear casing is made from a high gloss black plastic. The front screen is made of glass, with machined buttons and logo of Tesla. The latter has been post-processed with a chrome coating inlay, as well as the chrome band around the whole product. The combination of chrome and gloss black suggest the luxurious appearance that fits the Tesla Model S. Once the user touches the key fob, the interface reveals itself by lighting up.

The last step of the project was to design a fitting appearance for the key fob. We selected materials that would fit with the design language of Tesla while keeping ergonomics in mind. For example, a section of the side and back of the key fob are covered with a rubber-like plastic coating to improve the grip on the key fob while holding it. The rests of the rear casing is made from a high gloss black plastic. The front screen is made of glass, with machined buttons and logo of Tesla. The latter has been post-processed with a chrome coating inlay, as well as the chrome band around the whole product. The combination of chrome and gloss black suggest the luxurious appearance that fits the Tesla Model S. Once the user touches the key fob, the interface reveals itself by lighting up.

The last step of the project was to design a fitting appearance for the key fob. We selected materials that would fit with the design language of Tesla while keeping ergonomics in mind. For example, a section of the side and back of the key fob are covered with a rubber-like plastic coating to improve the grip on the key fob while holding it. The rests of the rear casing is made from a high gloss black plastic. The front screen is made of glass, with machined buttons and logo of Tesla. The latter has been post-processed with a chrome coating inlay, as well as the chrome band around the whole product. The combination of chrome and gloss black suggest the luxurious appearance that fits the Tesla Model S. Once the user touches the key fob, the interface reveals itself by lighting up.

Render of the Tesla Keyfob Design

The final model adheres to the core values of Tesla, by keeping the model as simple and compact as possible. The menu is categorically structured, and the speed of interaction is ensured while maintaining its usability. This occurs physically, through the evocative buttons that are cut into the screen, and through subtle haptic feedback to indicate possible interactions and commands.

The final model adheres to the core values of Tesla; by keeping the model as simple and compact as possible and the menu clearly structured, a product is developed in which the speed of interaction is ensured while maintaining the control. This occurs physically through the evocative buttons that are cut into the screen, but also the light haptic feedback to indicate possible interactions and commands.

The final model adheres to the core values of Tesla, by keeping the model as simple and compact as possible. The menu is categorically structured, and the speed of interaction is ensured while maintaining its usability. This occurs physically, through the evocative buttons that are cut into the screen, and through subtle haptic feedback to indicate possible interactions and commands.

The final model adheres to the core values of Tesla, by keeping the model as simple and compact as possible. The menu is categorically structured, and the speed of interaction is ensured while maintaining its usability. This occurs physically, through the evocative buttons that are cut into the screen, and through subtle haptic feedback to indicate possible interactions and commands.

The final model adheres to the core values of Tesla, by keeping the model as simple and compact as possible. The menu is categorically structured, and the speed of interaction is ensured while maintaining its usability. This occurs physically, through the evocative buttons that are cut into the screen, and through subtle haptic feedback to indicate possible interactions and commands.

Render of keyfobs menus

Other selected work

Other selected work

Other selected work

Copyright © 2019, Max Meijer.

Copyright © 2018, Max Meijer.

Copyright © 2018, Max Meijer.

Copyright © 2018, Max Meijer.