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
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.
Branding
The Market
Literature Review
Design Language
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.
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 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.
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 prototypes of the design
Paper prototypes of the design
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.
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.
Initial Ideation Sketches
Explorative sketches
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
Selected foam model
Bottom-side
Bottom-side
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.
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.
Other selected work
Other selected work
Other selected work
Copyright © 2021, Max Meijer.
Copyright © 2021, Max Meijer.
Copyright © 2021, Max Meijer.
Copyright © 2021, Max Meijer.